@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Sen:wght@400..800&display=swap');

body {
    padding: 0;
    margin: 0;
    background: rgb(128, 127, 127);
}

/*HEADER*/

.header {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-size: cover;
    animation: changeBackground 35s infinite;
    color: black;
}

@keyframes changeBackground {
    0%, 100% {
        background-image: url(/foto/one.jpg);
        opacity: 1;
    }
    20% {
        background-image: url(/foto/two.jpg);
        opacity: 1;
    }
    40% {
        background-image: url(/foto/three.jpg);
        opacity: 1;
    }
    60% {
        background-image: url(/foto/four.jpg);
        opacity: 1;
    }
    80% {
        background-image: url(/foto/five.jpg);
        opacity: 1;
    }
}

.logo_Name {
    padding: 5px 8px;
    color: rgb(23, 23, 23);
    font-family: Manrope;
    font-size: 32px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: left;
    margin-left: 3%;
}

.menu {
    display: flex;
    gap: 20px;
    padding-right: 20px;
    margin-top: 39px; 
    margin-right: 2%;
}

.menu a {
    color: black;
    text-decoration: none;
    font-family: Manrope;
    font-size: 22px;
    font-weight: 400;
    height: 50px;
    position: relative;
    transition: color 0.3s ease;
}

.menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: black;
    transition: width 0.3s ease;
}

.menu a:hover {
    color: #555;
}

.menu a:hover::after {
    width: 100%;
}

/*Div About*/

.Div_About{
    display: flex;
    color: white;
    margin-top: 2%;
    font-family: Manrope;
    justify-content: center;
    gap : 200px;
    
    
}

.About_podDiv{
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.About_h4 {
    font-size: 24px;
    font-family: Manrope;
    margin: 0;
    padding: 0;
}

.bacl_line_1 {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 15%;
    height: 2px;
    background-color: rgb(238, 202, 202);
}

.About_Text{
    justify-content: center;
    text-align: start;
    align-items: start;
    box-sizing: border-box;
    border: 1px solid rgb(223, 223, 223);
    border-radius: 15px;
    padding: 15px;
    font-size: 24px;
    height: 83%;
    width: 448px;
    font-family: Manrope;
}

.About_Image{
    background-image: url(/foto/about2.jpeg);
    width: 526px;
    height: 405px;
    background-size: cover;
    border-radius: 23px;
    margin-top: 3%;
}

/* Div Work*/
.Div_Work {
    display: flex;
    margin-top: 2%;
    color: white;
    font-family: Manrope;
    justify-content: center;
    gap : 200px;
}

.Work_Image {
    /* background-image: url(/covers/onmyway.jpg); */
    width: 448px;
    height: 471px;
    border-radius: 23px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    animation: changeImageWork 21s infinite;
    background-size: cover;
}

@keyframes changeImageWork {
    0%, 100% {
        background-image: url(/covers/vTemnote.jpg);
        opacity: 1;
    }
    33% {
        background-image: url(/covers/vsemysvoevremy.jpg);
        opacity: 1;
    }
    66% {
        background-image: url(/covers/onmyway.jpg);
        opacity: 1;
    }
}


.Work_podDiv {
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.Work_h4 {
    font-size: 24px;
    font-family: Manrope;
    margin: 0;
    padding: 0;
}

.bacl-line_2 {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 8%;
    height: 2px;
    background-color: rgb(238, 202, 202);
}

.Work_listWork {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px;
    box-sizing: border-box;
    border: 1px solid rgb(223, 223, 223);
    border-radius: 15px;
    width: 526px;
    margin-top: 5%;
    padding: 2%;
}

.Work_listWork a {
    display: block;
    margin: 10px 0;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: white;
    font-family: Manrope;
}

.Work_listWork a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/*Div Social Network*/
.Div_Soc_net{
    display: block;
    margin-top: 2%;
    color: white;
    font-family: Manrope;
    justify-content: center;
}
.Soc_net_podDiv1{
    justify-content: center;
    align-items: center;
    text-align: center;
}
.Soc_net_h4{
    font-size: 24px;
    font-family: Manrope;
    margin: 0;
    padding: 0;
}

.bacl-line_3{
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 5%;
    height: 2px;
    background-color: rgb(238, 202, 202);
}

.Soc_net_podDiv2{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 20px;
}

.Soc_net_Image_one{
    background-image: url(/logo/telegram-logo.png);
    width: 100px;
    height: 100px;
    background-size: cover;
    margin: 10px;
}

.Soc_net_Image_two{
    background-image: url(/logo/instagram-logo.png);
    width: 100px;
    height: 100px;
    background-size: cover;
    margin: 10px;
}

.Soc_net_Image_three{
    background-image: url(/logo/VK-logo.png);
    width: 100px;
    height: 100px;
    background-size: cover;
    margin: 10px;
}

.Soc_net_Image_four{
    background-image: url(/logo/YouTube-logo.png);
    width: 100px;
    height: 100px;
    background-size: cover;
    margin: 10px;
}