@font-face {
    font-family: "Londrina";
    src: url("../fonts/LondrinaSolid-Black.ttf") format("truetype");
    font-weight: 900;
  }
  
  @font-face {
    font-family: "PT";
    src: url("../fonts/PT Root UI_Medium.ttf") format("truetype");
    font-weight: 400;
  }
  :root {
    --main-blue: hsl(214deg 98% 58%);
    /* --order:1; */
  }
  
  * {
    list-style: none;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    font-family: 'PT';
    text-rendering: optimizeLegibility;
    font-size: 20px;
    background: #fff9f8;
    font-weight: 400;
  }
  a{
    color:inherit
  }
  /* components */
  
  .btn {
    width: auto;
    height: 40px;
    font-family: "PT";
    border-radius: 10px;
    font-weight: 400;
    border: 2px #f2f2f2 solid;
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    color: black;
    font-size: 16px;
    transition: opacity .2s ease;
    user-select: none;
  }
  .btn.active{
    background: #e2e3e8;
    border-color:#e2e3e8;
    color: black;
  }
  .btn a{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn:hover {
    opacity:0.5
  }
  .btn:active {
    opacity:0.3
  }

  .btn img {
    width: 22px;
  }
  .socialIconsWrap{
    display: flex;
  }
  .socialIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    padding-top: 6px;
  }
  .socialIcon img{
    width: 20px;
    opacity: 0.5;
  }
  .socialIcon:hover img{
    opacity:0.3
  }
  .socialIcon:active img{
    opacity:0.6
  }
  .arrows_wrap{
   display: flex;
   justify-content: space-between;
   padding: 0 16px;
  }
  .arrows_wrap.disabled{
    pointer-events: none;
    opacity:0.1;
  }
  .arrows_wrap img{
    width: 40px;
    /* padding: 0 2px; */
  }
  #arrowL:hover{
    /* padding-right: 5px; */
  }
  #arrowR:hover{
    /* margin-left: 5px; */
  }
  .arrows_wrap img:hover{
    opacity: 0.8;
  }
  .arrows_wrap img:active{
    opacity: 0.6;
  }
  .infoIcon {
    border-radius: 50%;
    height: 20px;
    width: 20px;
    background: grey;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 15px;
    align-items: center;
    font-weight: 400;
    padding-right: 1px;
    cursor: pointer;
  }
  
  .flex {
    display: flex;
  }
  
  header {
    width: 100%;
    height: 150px;
    padding: 20px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header_logo {
    height: 90px;
    display: flex
  }
  
  .header_btnswrap {
    display: flex;
  
  }
  
  .header_btnswrap .btn {
    margin-right: 10px;
  }
  
  
  main {
    min-height:calc(100vh - 150px);
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

.description_title {
    font-family: "Londrina";
    font-weight: 900;
    font-size: 90px;
    height: 80px;
    margin-bottom: 45px;
    opacity:0;
    animation: dropIn .5s ease forwards;
    animation-delay: calc(var(--order) * 40ms)
}
.tagswrap{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 0;
    max-width: 1000px;
}
.tagstitle {
    font-size: 28px;
    color: black;
    font-family: "Londrina"
  }
  .tagItem{
    margin-left:10px;
    background: black;
    color: white;
    padding: 8px 12px;
    border-radius: 18px;
    font-size: 18px;
    cursor:pointer;
    user-select: none;
    opacity:0;
    animation: dropIn .5s ease forwards;
    animation-delay: calc(var(--order) * 40ms)
  }
  @keyframes dropIn {
    from {opacity:0;transform: translateY(20px);}
    to {opacity:1;transform: translateY(0)}
  }
  .tagItem:hover{
    background: #247ced;
  }
  .tagItem:active{
    opacity:0.4
  }
.tagItem.selected{
      background: #d63c5e;
}
.searchBar{
  margin:40px 10px 20px 10px;
}
#searchSongs{
  border: 0;
  border-bottom: 1px solid #e2e3e8;
  background: none;
  font-family: "PT";
  font-size: 18px;
}
#searchSongs::placeholder{
  color: rgb(196, 196, 196);
}

.library{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
#librarynoun{
  height: 75%;
  margin-left: 20px;
  border-radius: 15px;
}
.librarywrap{
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    border: 1px solid #e2e3e8;
    color: #454851;

    border-radius: 5px;
}
.gridTitle{
    font-family: "Londrina";
    font-size: 28px;
}
.samplerow{
    display: grid;
    width: 100%;
    grid-template-columns: 195px 2fr 1fr 1fr;
    height: fit-content;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #e2e3e8;
    font-size: 18px;
    cursor:pointer
}
.samplerow:hover{
  background: #767b8d10;
}
.titlerow{
    display: grid;
    width: 100%;
    grid-template-columns: 195px 2fr 1fr 1fr;
    height: 60px;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #e2e3e8;
}
    .stemInfo, .gridTitle{
      height: 100%;
      border-left: 1px solid #e2e3e8;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .loadingGrid{
        font-family: "Londrina";
        font-size: 28px;
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    .stemInfo{
      padding: 20px;
    }
    .stemInfo:nth-child(1),.gridTitle:nth-child(1){
      border-left:none;
    }
    .stemInfo:nth-child(2){
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;

    }
    .samplerow:last-child{
        border-bottom: 0;
    }
    .filetitle{
      margin-top: 4px;
    }
    .artist{
      text-decoration: underline;
    text-underline-position: under;
    }
    .smalltagswrap{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tags{
      font-size: 10px;
      margin-top: 6px;
      margin-right: 5px;
      border:1px solid black;
      padding: 4px 5px;
      border-radius: 12px;
      letter-spacing: 0.03rem;
    }
    .player{
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f2f2f2;
      border-radius: 13px;
      padding: 2px 15px;
      margin: 14px 0;
    }
    .player img:hover{
      opacity:0.6;
    }
    .samplerow:hover .player{
      background: none;
    }
    .samplerow:hover .albumcover{
      opacity:0.9;
    }
    .player img:active{
      opacity:0.8
    }
    .waveform{
      position: relative;
      width: 100%;
      height: 30px;
      margin: 0 10px;
      background-image: url("../images/audio.png");
      background-repeat: repeat-x;
    }
    .stemdetails{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .playbtn{
      width: 50px;
      margin-left:-10px;
      margin-right: -10px
    }
    .downloadbtn{
      width:40px
    }
    .title{
      margin-top: 4px;
    }
    .songlength{
      font-size:14px
    }
    input[type="range"] {
      position: relative;
      -webkit-appearance: none;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 10px 10px;
      float: left;
      outline: none;
      background: none;
      background: #dddddd;
      height: 3px;
    }
    input[type="range"]::-webkit-slider-runnable-track {
      width: 100%;
      height: 3px;
      cursor: pointer;
      background: #dddddd;
    }
    input[type="range"]::-webkit-slider-thumb {
      position: relative;
      -webkit-appearance: none;
      box-sizing: content-box;
      height: 15px;
      width: 15px;
      border-radius: 50%;
      background-color:#a6abba;
      cursor: pointer;
      margin: -6px 0 0 0;
    }
    input[type="range"]:active::-webkit-slider-thumb {
      transform: scale(1.2);
      background: #9a9fb3;
    }
    .description_p{
      margin-bottom: 50px;
      font-family: "PT";
    }
    footer{
      height: 60px;
      width: 100%;
      background: #d5d7e1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
    .shake{
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);  
      backface-visibility: hidden;
      perspective: 1000px;
    }
    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }
    
      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }
    
      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }
    
@media (max-width: 1200px) {
  header {
    flex-direction: column;
  }

  .header_logo {
    margin-bottom: 20px;
  }

  canvas img {
    max-width: 380px;
  }

  main {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }

  .playground_controls_wrap {
    margin-right: unset;
  }

  .description_p {
    width: unset
  }

  .sequencer {
    height: unset;
  }

  .sequencer_channel {
    padding: 16px 10px;
  }


header {
  padding: 15px;
}
.header_btnswrap{
  flex-wrap: wrap;
  justify-content: center;
}
.header_btnswrap .btn{
  margin-right: 5px;
}
  .btn{
    font-size: 14px;
    height: 30px;
    width: fit-content;
    padding: 0 11px;
  }
  .btn img{
    display: none;
  }

  main{
    padding: 15px;
  }
  .description_title{
    font-size: 60px;
  }
  .description_title_info{
    font-size: 16px;
    width: fit-content;
    justify-content: flex-start;
  }
  .description_p{
    font-family:"PT";
  }
  .playControls_wrap{
    display: flex;
    padding-top: 30px;
    justify-content: center;
    flex-wrap: wrap-reverse;
  }
  .canvas{
    margin-bottom: 10px;
  }
  .sequencer{
    margin-bottom: 50px;
  }
  .sequencer_option{
    border-radius: 8px;
    border-width: 2px;
  }
  .sequencer_title{
    font-size: 16px;
    width: 120px;
  }
  .sequencer_mute{
    bottom: -10px;
    font-size: 12px;
    padding: 0px 6px;
    width: fit-content;
  }

}

@media (max-width: 800px) {
  .btn{
    margin-bottom: 6px;
  }
  .socialIcon img{
    width: 20px;
  }
  .tagswrap{
    position: relative;
    flex-wrap: wrap;
    gap: 8px 0;
  }
  .tagItem{
    padding: 5px 8px;
    border-radius: 14px;
    font-size: 14px;
  }
  .tagstitle{
    position: absolute;
    top: -40px;
  }
  .searchBar{
    margin: 20px;
  }
  .description_title{
    height: unset;
    margin-bottom: 30px;
    font-size: 40px;
    margin-bottom: 10px;
  }
  .librarywrap{
    margin-top: 10px;
  }
  .tagstitle{
    font-size: 20px;
  }
  .songlength{
    display: none;
  }
  .gridTitle{
    font-size: 17px;
  }
  .player{
    margin: 10px 0;
  }
  .player input{
    display: none;
  }
  .stemInfo{
    padding: 5px;
  }
  .stemInfo{
    font-size: 12px;
    text-align: left;
  }
  .samplerow,.titlerow{
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .albumcover{
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
  }
  .playbtn{
    width: 30px;
  }
  .downloadbtn{
    width: 25px;
  }
  .stemInfo:nth-child(2){
    align-items: center;
  }
  .glasses_wrap {
    display: none;
  }
}