* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;

}

body {
    /* background-color: rgb(92, 130, 227); */

    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
    position: relative;
    min-height: 100vh;

}

.container {
    width: 1200px;
    background-color: rgb(254, 254, 254);
    margin: auto;
    position: relative;
    padding: 0 20px;
}

header {
    position: sticky;
    width: 1200px;
    background-color: rgb(254, 254, 254);
    left: 0;
    right: 0;
    margin: auto;
    border-bottom: 2px solid rgb(92, 130, 227);
    top: 0;
    z-index: 1000;

}

a .fa-brands {
    text-decoration: none;
    color: rgb(92, 130, 227);
}

.top__menu li a {
    text-decoration: none;
    color: black;
    transition: 1s;
}

.top__menu li:hover a {
    color: rgb(92, 130, 227);
}

nav {
    padding: 15px 0;
}

.top__menu ul {
    display: flex;
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 2px;
    padding: 0 20px;
    position: relative;

}

.skills ul li{
    list-style: none;
padding: 5px 5px;
}


.top__menu li {
    padding: 10px 30px;
    background-color: rgb(229, 231, 232);
    transition: 0.5s;
    width: 215px;
    text-align: center;
}

.top__menu>ul>li:hover {
    background-color: rgb(53, 96, 96)!important;
    color: rgb(92, 130, 227);

}

.project:hover .project__list {
    flex-direction: column;
    position: absolute;
    display: flex !important;
    left: 0;
    padding: 0;
    top: 44px;
    opacity: 1;
}

.top__menu .project__list {
    display: none;
    opacity: 0;
    transition: 1s;
}

.project {
    position: relative;
}

.top__menu .project__list li {
    width: 214.72px;

}

.separator {
    height: 30px;
}

.info {
    
    display: flex;
    justify-content: space-between;
    padding: 40px 0 0 0;
}

.info__photo img {
    height: 350px;

}

.info__text {
    width: 40%;
    display: grid;
    grid-template-columns: 1fr 1fr;


}

.info__text>div:nth-child(even) {
    text-align: right;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
}

.info__btns {
    width: 24%;
    text-align: right;
    position: relative;


}

.info__btn--cv button {
    margin-top: 0 !important;
}

.info__btns button {
    border: none;
    background-color: rgb(92, 130, 227);
    padding: 25px 43px;
    margin: 10px 0;
    color: white;
    text-transform: uppercase;
    width: 238px;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.info__btns button::before{
    content:'';
    position:absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,transparent,#fff, transparent);
    transition: 1s;
    
}
.info__btns button:hover::before{
    left: 100%;
}


.info__photo {
    width: 24%;
}

.socials {
    margin: 50px 0;


}

.fa-brands {
    font-size: 45px;

}

.socials button {
    border: none;
    padding: 10px 26px;
    height: 73px;

    background-color: rgb(237 242 244);
}

.html__css {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    padding: 0 0 35px 0;
    grid-row-gap: 70px;
    padding-bottom: 88px;
}
.html__css .project__descrition{
    position:absolute;
    bottom: -66px;
    padding-bottom: 10px;
}

.html__css>div {
    width: 320px;
    height: 320px;
    background-color: gray;
    position: relative;
}
.html__css>div:nth-child(1) {
    background-image: url(../img/pilot.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.html__css>div:nth-child(1):hover {
    background-size: 130% 130%;
    background-position: center;

}

.html__css>div:nth-child(2) {
    background-image: url(../img/music.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.html__css>div:nth-child(2):hover {
    background-size: 130% 130%;
    background-position: center;

}

.html__css>div:nth-child(3) {
    background-image: url(../img/longWay.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.html__css>div:nth-child(3):hover {
    background-size: 130% 130%;
    background-position: center;

}

.html__css>div:nth-child(4) {
    background-image: url(../img/form.png);
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 1s;


}

.html__css>div:nth-child(4):hover {
    background-size: 130% 130%;
    background-position: center;

}

.html__css>div:nth-child(5) {
    background-image: url(../img/);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.html__css>div:nth-child(5):hover {
    background-size: 130% 130%;
    background-position: center;

}
.html__css>div:nth-child(6) {
    background-image: url(../img/);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.html__css>div:nth-child(6):hover {
    background-size: 130% 130%;
    background-position: center;

}

.JsProgect {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    padding: 0 0 35px 0;
    grid-row-gap: 70px;
    padding-bottom: 88px;
}
.project__descrition{
    position:absolute;
    bottom: -77px;
    padding-bottom: 10px;
}
#tabs{
    bottom: -62px;
}

hr {
    position:absolute;
    bottom: -10px;
    width: 30%;
    height: 4px;
    background: black;

}
.JsProgect>div {
    width: 320px;
    height: 320px;
    background-color: gray;
    position: relative;
}

.JsProgect>div:nth-child(1) {
    background-image: url(../img/accordion.jfif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(1):hover {
    background-size: 130% 130%;
    background-position: center;

}

.JsProgect>div:nth-child(2) {
    background-image: url(../img/tabs.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(2):hover {
    background-size: 130% 130%;
    background-position: center;

}

.JsProgect>div:nth-child(3) {
    background-image: url(../img/game.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(3):hover {
    background-size: 130% 130%;
    background-position: center;

}

.JsProgect>div:nth-child(4) {
    background-image: url(../img/traffic_light.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(4):hover {
    background-size: 130% 130%;
    background-position: center;

}

.JsProgect>div:nth-child(5) {
    background-image: url(../img/calculator.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(5):hover {
    background-size: 130% 130%;
    background-position: center;

}

.JsProgect>div:nth-child(6) {
    background-image: url(../img/desk.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(6):hover {
    background-size: 130% 130%;
    background-position: center;

}

.JsProgect>div:nth-child(7) {
    background-image: url(../img/json.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(7):hover {
    background-size: 130% 130%;
    background-position: center;

}
.JsProgect>div:nth-child(8) {
    background-image: url(../img/Kettles_project_figma.png);
    background-size: 117% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(8):hover {
    background-size: 130% 130%;
    background-position: center;

}
.JsProgect>div:nth-child(9) {
    background-image: url(../img/);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: 1s;


}

.JsProgect>div:nth-child(9):hover {
    background-size: 130% 130%;
    background-position: center;

}






.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    transition: 1s;
    display: flex;
    align-items: center;
    justify-content: center;

}

.overlay:hover {
    background: rgba(0, 0, 0, 0.2);
}

.overlay .fa-solid {
    font-size: 70px;
    color: #97a7a5;
    transition: 1s;
}

.overlay:hover .fa-solid {
    color: white;
}

#content>section:not(.about__me) {
    display: none;

}

.checked__li {

    background: rgb(53 96 96)!important;
}

.checked__a {
    color: rgb(92, 130, 227) !important;

}

p {
    text-indent: 25px;
    text-align: justify;
    font-size: 20px;
    padding: 0 0 20px 0;
}

#contacts>div {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: justify;
    padding: 0 0 20px 0;
}

.fa-envelope {
    font-size: 43px;
    color: rgb(92, 130, 227);
}

.footer {
    height: 74px;
    text-align: center;
    line-height: 74px;
    background-color: rgb(239, 243, 245);
    font-size: 18px;
    width: 1200px;
    margin: auto;
    position: relative;
    z-index: 100;

}

#messenger__btn {
    position: relative;
}

.messenger {
    opacity: 0;
    transition: 1s;
    position: absolute;
    width: 100%;
    left: -44px;
    right: 0;
    margin: auto;
     bottom: 125px;
     
}

.show__messengers {
    opacity: 1 !important;
}

.show {
    display: block !important;
    
    right: 0;
    top: 45px;
}

.fa-angles-left {
    font-size: 14px;
    position: absolute;
    left: 12px;
    top: 0;
    margin: auto;
    bottom: 0;
    height: fit-content;

}

.project {
    position: relative;
}

.rotate90 {
    transform: rotate(-90deg);
}





@media all and (max-width:460px) {
     html{
        height: fit-content!important;
    }
    .separator {
        display: none;
    }

    .html__css {
        grid-template-columns: 1fr;
        justify-items: center;

    }

    .header {
        width: 100%;
    }

    .container {
        width: 90%;
    margin-top: 25px;

    }

    .top__menu ul {
        flex-direction: column;
    }

    .info {
        flex-direction: column;
    }

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

    .info__text {
        width: 100%;
        margin: 15px 0;
    }

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

    .socials {
        margin: 50px 0;
        text-align: center;
    }

    .socials button {
        padding: 12px 25px;

    }

    .fa-brands {
        font-size: 40px;
    }

    .JsProgect {
        justify-items: center;
        grid-template-columns: 1fr;
         
    }

    .top__menu {
        display: none;
        position: fixed;
        right: 0;
        top: 45px;
    }

    .mobile__menu {
        text-align: right;
        font-size: 30px;
        padding: 10px 20px;

    }

    .footer {
        width: 100%;
        margin-top: 50px;
    }

    .project:hover .project__list {
        left: -179px;
        top: 0;
    }

    .top__menu .project__list li {
        padding: 0;
        width: 180px;
        height: 22px;
    }

    .top__menu .project__list li a {
        font-size: 17px;
    }
.messenger{
    left: 0;
    right: 0;
    margin: auto;
    bottom: -44px;
}

}

@media all and (min-width: 461px) {
    .mobile__menu {
        display: none;
    }

    .fa-angles-left {
        display: none !important;
    }
}
.area{
    background: rgb(92, 130, 227);  
    background: linear-gradient(to left, #7577a4, rgb(92, 130, 227));
    width: 100%;
    position: absolute;
    min-height:100%;
    
   
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 15s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 5%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 7%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 4%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    right: 5%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
     right: 1%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
     right: 3%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
      right: 7%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
      right: 10%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
      right: 10%;;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
.circles li:nth-child(11){
      right: 12%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(12){
      right: 13%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(13){
      right: 15%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(14){
      right: 7%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(15){
      right: 9%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(16){
    left: 12%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(17){
    left: 3%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(18){
    left: 2%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(19){
    left: 15%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}
.circles li:nth-child(20){
    left: 1%;;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}