@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,700;1,700&display=swap');

* {
    margin: 0 0 0 0;
}

body {
    position: relative;
}


.main-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #ffa567;
    width: 100%;
    scrollbar-color: purple;
}


.sticky-nav {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 7;
}

ul {
    
    list-style-type: none;
    font-family: Archivo, sans-serif;
    font-size: 87px;
    color:#fe076f;
    margin-top: 50px;
    margin-left: 30px;
    z-index: 8;
    
}




.dropdown {
    margin-top: 5px;
    position: relative;
    display: inline-block;
    transition: height 0.3s ease-in-out;
  } 

.dropdown-content {
    display: none;
    position: absolute;
    color:#fe076f;
    font-family: Archivo, sans-serif;
    z-index: 4;
    margin-top: 5px;
    font-size: 30px;
    transition: 1s ease-in-out;
}

#nav-mail, #nav-facebook, #nav-bandcamp {
    margin-bottom: 5px;
    margin-left: 10px;
    
}

a {
    text-decoration: none;
    color:#fe076f;
    
    
}

.show {
    display:block;
    -webkit-animation-name: show;
            animation-name: show;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
      -webkit-animation-duration: 0.5s;
              animation-duration: 0.5s;
      -webkit-animation-direction: normal;
              animation-direction: normal;
}

@-webkit-keyframes show {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   
  }

@keyframes show {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   
  }

.nav-ul1 {
    letter-spacing: -2px;
    
}

.nav-ul a:hover {
    color: rgba(128, 0, 107, 0.616);
    text-shadow: 3px 3px 1px rgba(0, 255, 0, 0.25), 1px 1px 1px rgba(38, 42, 255, 0.7), -3px -1px 1px rgba(255, 0, 0, 0.3) ;
    transition: all 0.3s;
}

.nav-ul3 {
    margin-top: 10px;
    margin-left: 15px;
    letter-spacing: -4px;
    
}

.nav-ul4 {
    letter-spacing: -4px;
}

.dropbtn {
    border: none;
    cursor: pointer;
    color: #fe076f;
    font-family: Archivo, sans-serif;
    font-size: 87px;
    letter-spacing: -5px;
    margin-top: 5px;
    margin-left: 10px;
    
    
}



.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    height: auto;
    
}

.bottom {
    position: relative;
}
.top {
    position: absolute;
}

#icon {
    position: absolute;
    left: 180px;
    top: 42px;
    width: 60px;
}

#album-cover {
    
    width: 55vw;
    height: auto;
    z-index: 2;
    margin-bottom: 2px;

}
   
.cover-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center ;
    align-items: center;
}

.image {
    position: absolute;
    height: 30vw;
    z-index: 1;
    -webkit-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { transform:rotate(360deg); } }

.static {
    will-change: transform;
    position: absolute;
    height: 54vw;
    z-index: 0;
    -webkit-animation: linear infinite;
            animation: linear infinite;
    -webkit-animation-name: move;
            animation-name: move;
    -webkit-animation-duration: 3s;
            animation-duration: 3s; 
}

@-webkit-keyframes move {
    0% {
        margin-top: 0vw;
        
      }
      100% {
          
          margin-top: -12vw;
      }
     
    /* 0% {
      margin-top: 0px;
    }
   
    25% {
        margin-top: 4px;
    }

    50% {
        margin-top: 2px;
        margin-left: 1px;
    }

    75% {
        margin-left: -4px;
    }
    100% {
        margin-top: 4px;
        margin-left: -2px;
    } */
    
  }

@keyframes move {
    0% {
        margin-top: 0vw;
        
      }
      100% {
          
          margin-top: -12vw;
      }
     
    /* 0% {
      margin-top: 0px;
    }
   
    25% {
        margin-top: 4px;
    }

    50% {
        margin-top: 2px;
        margin-left: 1px;
    }

    75% {
        margin-left: -4px;
    }
    100% {
        margin-top: 4px;
        margin-left: -2px;
    } */
    
  }

.glava {
    will-change: transform;
    position: absolute;
    height: 55vw;
    width: 55vw;
    z-index: 5;
    transform-origin: bottom;
    -webkit-animation: linear infinite;
            animation: linear infinite;
    -webkit-animation-name: glava;
            animation-name: glava;
    -webkit-animation-duration: 3s;
            animation-duration: 3s; 
}

@-webkit-keyframes glava {
    0% {
        scale: 100%;
        opacity: 0;
    }
    5% {
        scale: 102%;
        opacity: 0.4;
    }
    6% {
        scale: 100%;
        opacity: 0;
    }
    15% {
        scale: 102%;
        opacity: 0.7;
    }
    17% {
        scale: 100%;
        opacity: 0;
    }
    100% {
        scale: 100%;
        opacity: 0;
    }
    
}

@keyframes glava {
    0% {
        scale: 100%;
        opacity: 0;
    }
    5% {
        scale: 102%;
        opacity: 0.4;
    }
    6% {
        scale: 100%;
        opacity: 0;
    }
    15% {
        scale: 102%;
        opacity: 0.7;
    }
    17% {
        scale: 100%;
        opacity: 0;
    }
    100% {
        scale: 100%;
        opacity: 0;
    }
    
}


/* .cloud {
    
    position: absolute;
    width: 10vw;
    top: 37vw;
    left: 2.5vw;
    z-index: 2;
    transform-origin: 6vw 9vw;    
    -webkit-animation: linear infinite;
            animation: linear infinite;
    -webkit-animation-name: cloud;
            animation-name: cloud;
    -webkit-animation-duration: 4s;
            animation-duration: 4s; 
} */
/* .play {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 4vw;
    z-index: 0;
}
button {
    position: absolute;
    
    height: 4vw;
    width: 4vw;
    z-index: 5;
} */


/* @-webkit-keyframes cloud {
    
    0% {will-change: transform;
        scale: 100%;
        
    }
    
    98% {
        scale: 130%;
        
    }
    100% {
        scale:100%;
    }
}


@keyframes cloud {
    
    0% {will-change: transform;
        scale: 100%;
        
    }
    
    98% {
        scale: 130%;
        
    }
    100% {
        scale:100%;
    }
} */
.main img.top {
    -webkit-animation-name: fade;
            animation-name: fade;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-duration: 3s;
              animation-duration: 3s;
      -webkit-animation-direction: alternate;
              animation-direction: alternate;
    }
    @-webkit-keyframes fade {
        0% {
          opacity: 1;
        }
       
        3% {
          opacity: 0;
        }
        20% {
            opacity: 0;
          }
        100% {
          opacity: 0;
        }
      }
    @keyframes fade {
        0% {
          opacity: 1;
        }
       
        3% {
          opacity: 0;
        }
        20% {
            opacity: 0;
          }
        100% {
          opacity: 0;
        }
      }


.music-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background-color: transparent;
    height: auto;
    background-color: #ffa567;
    padding-top: 65px;
    margin-bottom: 0px;
    width: 55vw;
    z-index: 2;
}

/* .kocka {
    width: 55vw;
    position: absolute;
   
    font-family: Archivo;
    font-size: 3000px;
    color:#fe076f;
} */


.music-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: Archivo;
    font-size: 25px;
    color: purple;
    width: 200px;
    top: 70px;
    left: calc(25vw - 200px);
    z-index: 99;
           
}

.video-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 100px;
    padding-top:60px;
    position: relative;
    width: 55vw;
    padding-bottom: 56.26%;
}



.video-label {
    position: absolute;
    top: -100px;
    padding-top: 10px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    font-family: Archivo;
    font-size: 25px;
    color: purple;
    width: 55vw;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding-top: 10px;
    
}

#art {
    padding-top: 0px;
    margin-top: 50px;
    width: 55vw;
}
.suzi-cover {
    padding-top: 0px;
    width: 100%;
}

.active:after {
    content:"";
    display: inline-block;
    height: 0.21em; 
    vertical-align: bottom;
    width: 20px;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 20px solid #fe076f;
    -webkit-animation-name: fadein;
            animation-name: fadein;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      -webkit-animation-duration: 0.2s;
              animation-duration: 0.2s;
      -webkit-animation-direction: alternate;
              animation-direction: alternate;
}

@-webkit-keyframes fadein {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   
  }

@keyframes fadein {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   
  }

/* MEDIA QUERIES /////////////////////////////////////////////////////////////////// */
@media only screen and (min-width: 1110px) {
    .small {
        display: none;
    }
}
@media only screen and (max-width: 1110px) {
    .big {
        display: none;
    }
}

@media only screen and (max-width: 1230px) {
   
    .music-label {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 200px;
        height: auto;
        
        left: 0px;
        bottom: 0px;
        
               
    }
    .video-label {
        align-items: center;
        text-align: center;
        padding-bottom: 40px;
    }
    
   
}
/* ///////////////////////////////////////////////////////////////// */
@media only screen and (max-width: 1110px) {
    
   
    .nav-ul {
        padding-left: 10px;
        font-size: 35px;
    }
    .main-container {
        display: flex;
        flex-direction: column;
        width: 100vw;
    }
    
    .cover-container {
        padding-top: 110px;
        width: 80vw;
     }
     #album-cover {
         width: 80vw;
     }
     .image {
        position: absolute;
        height: 45vw;
    }
    .static {
        height: 78vw;
    }
    .glava {
        height: 80vw;
        width: 80vw;
    }
   
    .sticky-nav {
        display: flex;
        flex-direction: row;
        justify-content: left;
        position: fixed;
        width: 100vw;
        height: auto;
        padding-bottom: 20px;
        background-color: #ffa567;
        top: -35px;
    }

    .cover-container, .music-container{
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .music-container {
        width: 80vw;
    }
    .video-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80vw;
        height: auto;
          
    }
    .video {
        
        flex-direction: column;
        align-items: center;
        width: 80vw;  
        padding-top: 20px;     
    }
    .music-label {
        width: 30vw;
        justify-content: start;
        align-items: center;
        font-size: 22px;
        padding-top: 20px;
    }
    
    .video-label {
        font-size: 22px;
        top: -130px;
        height: auto;
        justify-content: start;
        align-items: center;
        padding-top: 100px;
    }
    .video-container {
        width: 80vw;
        height: 50vw;
        padding: 0px;
        
    }
    /* .cloud {
        position: absolute;
        width: 14vw;
        height: 14vw;
        top: 62vw;
        left: 3.7vw;
        transform-origin: 7vw 10vw; 
    } */
      
    .nav-ul li{
        padding-left: 10px;
        display: inline-block;
        flex-direction: row;
        justify-content: start;
        width: 120px;
        
    }
    .nav-ul2, .nav-ul3, .nav-ul4 {
        margin-left: 0px;
    }

    .show {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-bottom: 10px;
    }
   

    .dropdown-content li {
        font-size: 22px;
        padding-left: 0px;
        padding-top: 10px;
        justify-content: left;
        width: auto;
    }
    .dropdown-content {
        flex-direction: column;
        background-color: #ffa567;
        border-radius: 1px;
        align-items: left;
        padding-left: 10px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: auto;
        font-family: Archivo;
    }
    .dropbtn {
        font-size: 35px;
    }
    #art {
        padding-top: 20px;
        width: 80vw;
    }
    .active:after{
        height: 0.19em;
        border-top: 10px solid #fe076f;
        width: 10px;
    }
}
/* //////////////////////////////////////////////////////////// */
@media only screen and (max-width: 700px) {
    .cover-container {
        color: #7c1a4b;
        background-clip: content-box;
        box-shadow: inset 1000 0 0 1000px #ffa567;
        padding-top: 80px;
        margin-top: 18px;
        width: 80vw;
        
     }
     .image {
        position: absolute;
        height: 45vw;
        
    }
    /* .cloud {
        
        top: 75vw;
    } */
    .video-container {
        width: 80vw;
        height: 40vw;
        padding-bottom: 50px;
            
    }
    .video-label {
        
        width: 80vw;
        justify-content: center;
        padding-top: 130px;
        padding-bottom: 0px;
    }
    .video {
        padding-top: 60px;
        padding-bottom: 70px;
    }
    .music-container {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 140px;
    }
    .music-label {
        position: relative;
        width: 80vw;
        top: -20px;
        align-items: center;
        text-align: center;
        padding-top: 0px;
    }
    
    .nav-ul {
        padding-left: 10px;
        padding-bottom: 15px;
    }
   
    .nav-ul2, .nav-ul3, .nav-ul4 {
        margin-left: 0px;
    }
    
    
    #art {
        justify-content: center;
        padding-top: 50px;
        width: 80vw;
    }
}
/* //////////////////////////////////////////////////// */
@media only screen and (max-width: 601px) {
    .cover-container {
       padding-top: 110px;
       width: 80vw;
    }
    #album-cover {
        width: 80vw;
    }
    
    .video-container {
        width: 80vw;
        height: 40vw;
        padding-bottom: 50px;
        
        
    }
    .video {
        height: 50vw;
        padding-top: 60px;
    }
    
    .video-label {
        width: 80vw;
        justify-content: center;
        padding-top: 140px;
        padding-bottom: 50px;
    }
    .dropdown-content{
        align-items: center;
    }
    .music-label {
        position: inline;
        padding-top: 20px;
    }
    .music-container {
        padding-bottom: 40px;
    }
    #art {
        justify-content: center;
        padding-top: 50px;
        width: 80vw;
    }
}
/* ////////////////////////////////////////////////////////////// */
.footer {
    width: 55vw;
}

.copyright {
    margin-top: 32px;
    margin-bottom: 32px;
    font-size: 20px ;
    text-align: center;
    font-family: Archivo;
    color:#fe076f;
}




.active {
    overflow: hidden;
    
}