@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Sono:wght@200&display=swap');

h1  {
    font-size: 1.4em;
    margin-block-start: 0.05em;
    margin-block-end: 0.05em;
    display: inline;
  }

  h3 {
    font-size: 0.8em;
    margin-block-start: 0.25em;
    margin-block-end: 0.05em;
  }

body {
    background-repeat: no-repeat;
    font-family: 'Sono', sans-serif;
    background-origin: content-box;
    background-repeat: no-repeat;
  background-position: center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
  color: white;
  height: 100vh;
  background-image: url("https://cdn.discordapp.com/attachments/989220288258539621/1039649846048591982/Unbenanntes_Projekt.JPG");
  overflow: hidden;
    
}

span {
    font-size: calc(1rem * var(--tag-multiplier));
    margin:5px;
}

.span-cloud {
    cursor: pointer;
    text-decoration: wavy;
    transition-duration: .5s;
}

.span-cloud:hover {
    text-shadow: 1px 5px 8px rgba(255,255,255,1);
}

#wrapper{
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    top:0px;
    left:0px;
}

.content{
    color: #FFFFFF;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
    position: absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 100;
    padding-left:50px;
    
}

.background{
    background-color:#ccc;
    position:absolute;
    top:0px;
    left:0px;
    z-index: -100;
    box-shadow: 0 0 5px 10px #555;
    animation: fadeInAnimation ease 3s;
    
}

.youtube-cover {
    opacity: 0.2;
    background: rgba(0, 0, 0, 1); 
    text-align: center;
    width:100%;
    height:52px;
    top:0;
    left:0;
    position: fixed;
    transition: background 2s ease-out 5s;
    overflow:hidden;
    padding-top:10px;
    padding-bottom: 10px;
}

.youtube-cover:hover {
  opacity: 1;
}

.youtube-footer-cover {
    opacity: 0.3;
    background: rgba(0, 0, 0, 1); 
    font-size: 24px;
    text-align: center;
    width:100%;
    height:75px;
    bottom:0;
    left:0;
    position: fixed;
    transition: height 2s, background 1s ease-out 5s;
}

.youtube-footer-cover:hover {
    height:150px;
    opacity: 1;
    overflow: scroll;
    background: rgba(0, 0, 0, 1); 
    transition: height 1s, background 1s ease-out 1s;
    box-shadow: 2px -4px 11px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 2px -4px 11px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px -4px 11px 0px rgba(0,0,0,0.75);
}

#resume-cover {
  display:none;
  opacity: 1;
  background: rgba(0, 0, 0, 1); 
  font-size: 24px;
  text-align: center;
  width:100%;
  height:75px;
  top:40%;
  left:0;
  position: fixed;
  transition: height 2s, background 1s ease-out 5s;
}

#youtube-footer-cover:hover + #youtube-cover {
    background: rgba(0, 0, 0, 1); 
    transition: height 1s, background 1s ease-out 1s;
}

.tag-cloud {
    width:55%;
    padding: 15px;
    text-align: center;
    margin: auto;
}

.nav_tab {
    text-decoration: overline;
    transition-duration: 1.5s;
  }

  .nav_tab:hover {
    color: cyan;
    cursor: pointer;
  }

  .category_tab {
    font-family: 'Inconsolata', monospace;
    font-family: 'Sono', sans-serif;
    transition-duration: 1.5s;
    white-space:nowrap;
    cursor: pointer;
  }

  .category_tab:hover {
    color: cyan;
    cursor: pointer;
  }

  .nav-create {
    margin:25px;
    transition-duration: 2s;
  }

  .category_list {
    margin:25px;
    font-family: 'Inconsolata', monospace;
    font-family: 'Sono', sans-serif;
  }

  .category_content_list {
    font-size: .7em;
    font-family: 'Inconsolata', monospace;
    font-family: 'Sono', sans-serif;
  }

  .volume {
    font-size:1.7em;
    cursor: pointer;
  }

  .title-div {
    white-space: nobreak;
  }

  /* width */
::-webkit-scrollbar {
    width: 20px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #37F1F8; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #1BDCE4; 
  }

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
     }
}

@keyframes fadeOutAnimation {
    0% {
        background: rgba(0, 0, 0, 1); 
        opacity: 1;
    }

    75% {
        background: rgba(0, 0, 0, 1); 
        opacity: 1;
    }

    100% {
        background: rgba(0, 0, 0, .1); 
     }
}

@-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #3ADCE9, 0 0 50px #3ADCE9, 0 0 60px #3ADCE6, 0 0 70px #3ADCE9;
    }
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #3ABFE9, 0 0 50px #3ABFE9, 0 0 60px #3ABFE9, 0 0 70px #3ABFE9, 0 0 80px #3ABFE9;
    }
  }

  #mute-image {
    vertical-align: middle;
    cursor: pointer;
    
  }
  

  
  @media screen and (max-width: 1600px) {
    
    #title {
        font-size: 21px;
        margin-bottom:40px;
    }
    
    
    .youtube-footer-cover {
        opacity: 1;
    }
    
    .youtube-footer-cover:hover {
        height:150px;
    }
  }
  
  
  @media screen and (max-width: 1150px) {
    
    #title {
        font-size: 18px;
        margin-bottom:45px;
    }
    
    .youtube-footer-cover {
        height: 55px;
    }
    
    .youtube-footer-cover:hover {
        height:135px;
    }

    .tag-cloud {
      display: none;
    }
  }

  @media screen and (max-width: 700px) {
    
    #title {
        font-size: 18px;
        margin-bottom:45px;
    }
    
    
    .youtube-footer-cover:hover {
        height:150px;
    }
  }

  @media screen and (max-width: 450px) {
    
    #title {
        font-size: 18px;
        margin-bottom:45px;
    }

    .youtube-cover {
        height: 82px;
    }

    .youtube-footer-cover {
        height:68px;
        font-size: 14px;
    }
    
    
    .youtube-footer-cover:hover {
        height:150px;
    }
  }