@font-face {
    font-family: "Old Standard TT";
    src: url("./OldStandardTT-Bold.ttf") format("truetype");
}

* {
    margin: 0;
    padding: 0;
    font-family: "Old Standard TT", serif;
}

:root{
    --main-color: black;
    --secondary-color: fuchsia;
    --third-color: rgb(255, 0, 0);
    --border-radius: 30%;
}

body{
    width: 1215px;
    height: 1600px;
}
/* -------------------------------------------- */
header{
    width: 1215px;
    height: 150px;
    background-color: var(--main-color);
    display: flex;
    position:static;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 88px;
    border-bottom: solid var(--secondary-color);
}
.hed_img{
    position: fixed;
    width: 10%;
    height: 25%;
    left: 4%;
    z-index: 2;
}
.hed_img img{
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation-name: ImgHeader;
    animation-timing-function: linear;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

    @keyframes ImgHeader{
    from{
        height: 90%;
        width: 90%;
    }
    25%{
        height: 80%;
        width: 88%;
        border: double var(--secondary-color);
        border-radius: 50%;
    }
    50%{
        height: 92%;
        width: 92%;
        border: double var(--third-color);
        border-radius: 50%;
    }
    75%{
        height: 85%;
        width: 88%;
        border: var(--secondary-color);
        border-radius: 50%;
    }
    to{
        height: 90%;
        width: 90%;
    }
}
.header_tenebrisAvem{
    height: 100%;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 40%;
    margin-left: 18%;
}
.section_header_2{
    display: flex;
    width: 100%;
}
.span{
    margin: auto;
    border: solid var(--main-color);
    animation-name: SpanAnima, BorderAnima;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: relative;
    left: 2%;
    width: 100%;
    padding: 0px 7%;
    left: 0%;
    height: 100%;
    cursor: pointer;
    text-decoration: underline;
    font-size: 80%;
    font-weight: 150;
}
h5{
    font-size: 40%;
    border-top: solid var(--secondary-color);
    animation-name: SpanAnima;
    animation-timing-function: linear;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    font-weight: 150;
    margin: auto 5%;
    text-decoration: none;
}


@keyframes SpanAnima{
    from{
        text-shadow: 50px 20px 50px 20px rgb(0, 153, 255);
        color: var(--secondary-color);
    }
    25%{
        text-shadow: 50px 20px 50px 20px rgb(242, 0, 255);
        color: aqua;
    }
    50%{
        text-shadow: 50px 20px 50px 20px rgb(217, 255, 0);
        color: yellow;
    }
    75%{
        text-shadow: 50px 20px 50px 20px rgb(0, 153, 255);
        color: blue;
        }
    to{
        text-shadow: 50px 20px 50px 20px rgb(255, 247, 0);
        color: var(--secondary-color);
    }
    }

    @keyframes BorderAnima{
    from{
        border-color: black;
        /* padding: 20px; */
    }
    25%{
        border: double var(--secondary-color);
        /* padding: 5px; */
    }
    50%{
        border: double var(--secondary-color);
        /* padding: 10px; */
    }
    75%{
        border: double var(--secondary-color);
        /* padding: 5px; */
    }
    to{
        border-color: black;
        /* padding: 20px; */
    }
}
.span:hover{
    animation-name: none;
    color: var(--third-color);
    font-size: 85%
    
}

/* ------------------------------------- */
main{
    width: 1215px;
    height: 2222px;
    position:relative;
    z-index: 1;
    display: flex;
    background-image: url(./img_for_background.jpg);
    background-position: center;
    display: flex;
}
.aside_left_info{
    height: 100%;
    width: 20%;
    background-color: var(--main-color);
    text-align: center;
}
.aside_left_info img{
    width: 97%;
    height: 22%;
    border: solid var(--secondary-color);
    border-radius: 40%;
    margin: 5% auto;
}
.songs_box{
    width: 45%;
    max-height: 99%;
}
.song_top{
    font-size: 50px;
    margin-bottom: 10px;
    color: var(--secondary-color);
}
.song_figure_audio{
    height: 90%;
    width: 140%;
    margin-left: 3%;
    color: var(--secondary-color);
}
.audio{
    width: 35%;
    height: 3%;
}
button{
    width: 80px;
    height: 40px;
    background-color: var(--main-color);
    color: var(--secondary-color);
    border: solid var(--secondary-color);
    border-radius: 30%;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    bottom: 20px;
}
button:hover{
    background-color: var(--secondary-color);
    color: var(--main-color);
    border: solid var(--main-color);
    width: 85px;
    height: 45px;
}
.song_figure_audio img{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-left: 5px;
    position: relative;
    top: 0.5%;
}
.song_figure_audio img:hover{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 5px;
}
.song_figure_audio div{
    margin: 0;
    font-size: 110%;
}
.video_box{
    width: 35%;
    height: auto;
}
.video_box video{
    width: 90%;
    height: auto;
    border: solid var(--secondary-color);
}

/* ----------------------------------- */
footer{
    background-color: black;
    width: 1215px;
    height: 150px;
    font-weight: 500;
    font-size: 40px;
    border-top: solid var(--secondary-color);
    margin: auto;
}
.nav_in_footer{
    display: flex;
    width: 80%;
    height: 100%;
    margin: auto;
}
.div_flex_footer{
    margin: auto;
    display: flex;
}
.nav_in_footer div img{
    height: 85%;
    width: 35%;
    border-radius: 50%;
    margin: auto;
    margin-right: 5px;
    cursor: pointer;
}
.nav_in_footer div img:hover{
    height: 86%;
    width: 36%;
}
.link{
    margin: auto 10px;
    margin-left: 0;
    color: var(--secondary-color);
    cursor: pointer;
}
.link:hover{
    color: blueviolet;
    text-decoration: none;
}
/* --------------------------------------------------- */
/* Далі додатки */
/* --------------------------------------------------- */
.hiden{
    display: none;
    width: 500px;
    height: 100px;
    color: whitesmoke;
    background-color: var(--main-color);
    border: solid whitesmoke;
    font-size: 25px;
}


/* ---Для екранів менших за 1024пікселів--- */
@media screen and (max-width: 1024px){
    body{
        width: auto;
        background-image: url(./background_img.jpg);
    }
    header{
        display:flex;
        flex-direction: column;
        height: auto;
        margin: 0;
        padding: 0;
        width: auto;
    }
    .hed_img img{
    display: none;
    margin: 0;
    padding: 0;
}
    .section_header_2{
        flex-direction: column;
        height: auto;
        margin: 0;
        padding: 0;
    }
    .header_tenebrisAvem{
        width: 420px;
        height: 200px;
        position: relative;
        right: 5px;
        margin: 0;
        padding: 0;
    }
    .span{
        margin: 0;
        padding: 0;
    }
    
    main{
        flex-direction: column;
        height: auto;
        width: auto;
    }
    .songs_box{
        width: 100%;
    }
    .aside_left_info img{
        height: 250px;
        width: 200px;
        margin: 0;
    }
    .song_figure_audio{
        margin-bottom: 20px;
        width: 100%;
    }

    .audio{
        width: 200px;
        height: 100px;
    }

    .video_box{
        margin-left: 15px;
        width: 90%;
    }

    footer{
        flex-direction: column;
        width: auto;
    }
    .nav_in_footer{
        flex-direction: column;
        height: auto;
        background-color: black;
        margin: 0;
    }
    .nav_in_footer div img{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
}
    .nav_in_footer div{
    flex-direction: column;
    margin: 0;
}
    .div_flex_footer a{
        font-size: 20px;
    }
    .nav_in_footer div img:hover{
    height: 220px;
    width: 220px;
}
    .link:hover{
    color: blueviolet;
    text-decoration: none;
}
}