/* MAIN-OPTIONS */
body{
    background-image: url(../images/background.jpg);
}


/* HEADER */


.header {
    margin: 15px;
    box-sizing: border-box;
    border: 3px solid rgb(42, 42, 42);
    border-radius: 20px;
    height: 50px;
    display: flex;
    font-family: Unbounded;
    align-items: center;
    padding: 0px 10px;
    justify-content: space-between;
}

.tag{
    font-family: Unbounded;
    color: red;
}
.logo {

}
.header__nav {
    flex-basis: 900px;   /* IT'S NOT AUTO */
    display: flex;
    justify-content: center;
    gap: 30px;
    
}
.nav__element {
}

.select__lang{
    background-color: transparent;
    font-size: 16px;
}

.option__lang{
    background-color: transparent;
}
.header__btn {
    border-radius: 30px;
    padding: 7px;
    background: rgb(255, 0, 0);
}


/* MAIN */
.main {
}

/* SECTION__HOME */

.section__home {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    height: 100vh;

}
.home__title {
    margin-top: 150px;
    font-family: Unbounded;
    font-size: 80px;
    font-weight: 900;
    line-height: 99px;
    letter-spacing: 10px;
    text-align: center;
}
.home__subtitle {
    margin-top: 10px;
    color: rgb(255, 255, 255);
    font-family: Unbounded;
    font-size: 48px;
    font-weight: 300;
    line-height: 60px;
    letter-spacing: 1px;
    text-align: center;
}

.circle__decoration_y{
    border: 125px solid rgb(155, 153, 3);
    border-radius: 50%;
    left: -200px;
    top: 70px;
    filter: blur(125px);
    position: absolute;
    background: linear-gradient(235.71deg, rgb(0, 176, 104) 3.749%,rgb(0, 176, 104) 41.328%,rgb(50, 87, 237) 68.935%);
}

.circle__decoration_p{
    border-radius: 50%;
    right: -200px;
    top: 200px;
    filter: blur(125px);
    position: absolute;
    border: 125px solid rgb(176, 0, 165);
    background: linear-gradient(261.43deg, rgba(233, 41, 241, 0.87) -99.969%,rgb(66, 0, 176) 0.52%,rgb(50, 87, 237) 74.343%);
}

.hand__decoration {
    width: 75px;
    position: absolute;
    top: 75px;
    rotate: -45deg;
    left: 200px;
}
.man-computer__decoration {
    width: 75px;
    position: absolute;
    bottom: 200px;
    rotate: 15deg;
    right: 300px;
}


/* SECTION__ABOUT */

.section__about {
    display: flex;
    justify-content: center;
    padding: 40px 0px;

}
.img__block {
    flex-basis: 30%;
}
.circle-box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    backdrop-filter: blur(20px);
    background: rgba(255, 4, 4, 0.32);
    border: 2px solid rgba(255, 25, 25, 0.636);
    box-shadow: 0px 0px 100px 20px rgba(255, 0, 0, 0.453);
}
.me-img {
    width: 75%;
    height: 75%;
}
.name-box {
    border-radius: 20px;
    backdrop-filter: blur(20px);
    background: rgba(255, 0, 0, 0.47);
    box-sizing: border-box;
    padding: 7px;
    text-align: center;
    font-size: 20px;
    margin-top: -10px;
    width: 200px;
}
.text__block {
    flex-basis: 30%;
}
.about__title {
    margin-top: 30px;
    color: rgb(255, 0, 0);
font-family: Unbounded;
font-size: 20px;
font-weight: 400;
line-height: 25px;
letter-spacing: 0px;
text-align: left;
}
.about__text {
    margin-top: 20px;
}


/* SECTION__SKILLS */


.section__skills {
    position: relative;
    height:  auto;
    padding: 300px 40px;
}
.skills__block {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
    height: 200px;
    margin: 0px auto;
    box-sizing: border-box;
}
.technology__block {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    height: 250px;
}
.technology__block:nth-child(even){

    flex-direction: column-reverse;
}


.circle__technology {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background-color: #1A1A1A;
    display: flex;
    justify-content: center;
    align-items: center;
}
.technology__image {
    height: 75px;
}
.skills__point {
    background-color: orange;
    height: 15px;
    width: 15px;
    border-radius: 50%;
}


:root{
    --html: #FF6D00;
    --css: #039BE5;
    --js: #FFD600;
    --bootstrap: #7C4DFF;
    --figma: #66BB6A;
    --sass: #F06292;
    --react: #80DEEA;
    --node: #37474F;
    --mongodb: #45A636;
}

.html__point{
    background-color: var(--html);
    box-shadow: 0px 0px 10px 10px var(--html);
    height: 20px;
    width: 20px;
}
.css__point{
    background-color: var(--css);
    box-shadow: 0px 0px 10px 10px var(--css);
    height: 10px;
    width: 10px;
}
.js__point{
    background-color: var(--js);
    box-shadow: 0px 0px 10px 10px var(--js);
    height: 12px;
    width: 12px;
}
.bootstrap__point{
    background-color: var(--bootstrap);
    box-shadow: 0px 0px 10px 10px var(--bootstrap);
    height: 8px;
    width: 8px;
}
.figma__point{
    background-color: var(--figma);
    box-shadow: 0px 0px 10px 10px var(--figma);
    height: 18px;
    width: 18px;
}
.sass__point{
    background-color: var(--sass);
    box-shadow: 0px 0px 10px 10px var(--sass);
    height: 10px;
    width: 10px;
}
.react__point{
    background-color: var(--react);
    box-shadow: 0px 0px 10px 10px var(--react);
    height: 14px;
    width: 14px;
}
.mongo__point{
    background-color: var(--mongodb);
    box-shadow: 0px 0px 10px 10px var(--mongodb);
    height: 14px;
    width: 14px;
}
.node__point{
    background-color: var(--node);
    box-shadow: 0px 0px 10px 10px var(--node);
    height: 14px;
    width: 14px;
}

.computer__decoration{
    height: 75px;
    width: 75px;
    position: absolute;
    left: 50px;
    top: 150px;
    rotate: 30deg;
}
.trophy__decoration{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 75px;
    bottom: 150px;
    rotate: -30deg;
}


/* SECTION__PROJECT */


.section__project {
    padding: 20px 40px;
    box-sizing: border-box;
}
.block__projects {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 25px;
}
.project__box {
    display: flex;
    flex-direction: column;
    background-color: #292929;
    width: 300px;
    border-radius: 15px;
    box-sizing: border-box;
}
.project__box-info{
    display: flex;
    height: 100%;
    padding: 30px 10px;
    flex-direction: column;
    gap: 10px;
}
.project__img {
    width: 100%;
    border-radius: 15px 15px 0px 0px;
}
.project__title {
    font-size: 16px;
    font-weight: 600;

}
.project__info {
    font-size: 12px;
    font-weight: 300;
}
.project__links {
    font-size: 12px;
    display: flex;
    gap: 15px;
}

.project__links a{
    width: 100%;
    text-align: center;
}

.project__link {
    background-color: #00B068;
    box-shadow: 0px 2px 8px 0px #00B068;

    padding: 10px;
    border-radius: 15px;
}
.project__github {
    background-color: #7C4DFF;
    box-shadow: 0px 2px 8px 0px #7C4DFF;
        padding: 10px;
    border-radius: 15px;

}



.section__contact{
    padding: 150px 20px;
    margin-left: 50px;

}



.section__contact-title{
    font-family: Unbounded;
font-size: 75px;
font-weight: 900;
line-height: -1px;
letter-spacing: 3px;
text-align: left;
}
.title{
    font-family: Unbounded;
font-size: 50px;
font-weight: 900;
line-height: -1px;
letter-spacing: 3px;
text-align: center;
margin: 50px;
}

@media (max-width: 1300.98px){
    .circle__technology{
        height: 75px;
        width: 75px;
    }
    .technology__image{
        height: 50px;
    }
    .skills__point {
        height: 10px;
    width: 10px;
    border-radius: 50%;
    }
    .skills__block{
        gap: 30px;
    }
    .technology__block{
        height: 200px;
    }
}

@media (max-width: 991.98px) {
    .skills__block {
        gap: 25px;
        height: auto;
    }
    .section__skills{
        padding: 30px 40px;
    }
    .trophy__decoration, .computer__decoration, .hand__decoration, .man-computer__decoration{
        display: none;
    }
    .about__title{
        text-align: center;
    }
    .section__about {
        display: flex;
        justify-content: center;
        padding: 35px 13px;
        flex-direction: column;
        align-content: center;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 950.98px){
    .skills__point{
        display: none;
        height: 50px;
        flex-direction: column;
    }
    .skills__block{
        flex-wrap: wrap;
        display: flex;
        padding: 50px;
        box-sizing: border-box;
    }
    .technology__block {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        height: 75px;
    }
    .technology__block:nth-child(even){
    
        flex-direction: column;
    }
    
}

@media (max-width: 600.98px){
    .home__title {
        margin-top: 100px;
        font-family: Unbounded;
        font-size: 60px;
        font-weight: 900;
        line-height: 99px;
        letter-spacing: 10px;
        text-align: center;
    }

    .home__subtitle {
        margin-top: 10px;
        color: rgb(255, 255, 255);
        font-family: Unbounded;
        font-size: 38px;
        font-weight: 300;
        line-height: 60px;
        letter-spacing: 1px;
        text-align: center;
    }

    .title {
        font-family: Unbounded;
        font-size: 40px;
        font-weight: 900;
        line-height: -1px;
        letter-spacing: 3px;
        text-align: center;
        margin: 0px;
    }
    .section__contact-title{
        font-size: 50px;
    }
    .nav__element{
        display: none;
    }
}

@media (max-width: 400.98px){
    .home__title {
        margin-top: 100px;
        font-family: Unbounded;
        font-size: 40px;
        font-weight: 900;
        line-height: 99px;
        letter-spacing: 10px;
        text-align: center;
    }
    .about__text{
        font-size: 12px;
    }

    .home__subtitle {
        margin-top: 0px;
        color: rgb(255, 255, 255);
        font-family: Unbounded;
        font-size: 18px;
        font-weight: 300;
        line-height: 60px;
        letter-spacing: 1px;
        text-align: center;
    }

    .title {
        font-family: Unbounded;
        font-size: 20px;
        font-weight: 900;
        line-height: -1px;
        letter-spacing: 3px;
        text-align: center;
        margin-bottom: 20px;
    }
    .section__contact-title{
        font-size: 30px;
    }
    .nav__element{
        display: none;
    }
    .contact-item{
        font-size: 10px;
    }
}