:root {
  --hue: 223;
  --bg: hsl(10,90%,60%);
  --fg: hsl(var(--hue),10%,10%);
  --trans-dur: 0.3s;
  --trans-ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --trans-ease-out: cubic-bezier(0.33,1,0.68,1);
  font-size: calc(20px + (40 - 20) * (100vw - 280px) / (3840 - 280));
}
html {
  -webkit-text-size-adjust: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: $c-white;
  position: fixed;
  width: 100%;

}

header, footer {
  flex: 0 0 auto;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  height: 100%;
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
span.logo {
  width: calc(40% + 10px);
  background: rgba(255,255,255, .7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
  padding: 0 5px;

  img {
    width: 100%;
  }
  @media screen and (orientation: landscape) {
    width: 200px;
  }
}

@media screen and (orientation: landscape) and (max-height: 450px) {
  .player .player__window {
    .player__panel {
      display: none;
    }
  }
  button.player__playContainer {
    border: none;
    background: #343434;
    padding: 15px 7px 15px 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
  form.header__search {
    display: none;
  }
}

/*! CSS Used from: Embedded */
*{box-sizing:border-box;padding:0;margin:0;color: $c-text;}
.th_icon{position:absolute;height:100%;width:100%;right:0;
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  background: rgba(0, 0, 0, 0.7);}

.th_duration,.th_quality{position:absolute;right:5px;font-size:12px;color:#f9f9f9;padding:3px 7px;border-radius:2px;box-shadow:0 1px 2px rgba(0, 0, 0, .3);font-weight:bolder;}
.th_duration{bottom:5px;background-color:rgba(0, 0, 0, .6);}
.th_quality{top:5px;background-color:rgb(252 0 0 / 75%);}
/*! CSS Used from: Embedded */
a{text-decoration:none;word-wrap:break-word;}
#navi_button,#page_header{display:grid;position:relative;}
#page_header{align-items:center;width:100%;padding:0 10px;grid-template-columns:50px minmax(100px, 1fr) 50px;grid-column-gap:10px;height:50px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0, 0, 0, .15);text-align:center;}
#page_header div{display:inline-block;}
#logo div img{max-height:26px;width:auto;}
#navi_button{place-items:center;}
.gg-search{box-sizing:border-box;position:relative;display:inline-block;transform:scale(var(--ggs, 1.1));width:16px;height:16px;border:3px solid;border-radius:100%;margin-left:-4px;margin-top:-4px;color:#33393b;}
.gg-search::after{content:"";display:block;box-sizing:border-box;position:absolute;border-radius:3px;width:3px;height:8px;background:currentColor;transform:rotate(-45deg);top:10px;left:12px;}
#navi_button label{display:flex;flex-direction:column;width:35px;cursor:pointer;}
#navi_button label .m_line{background:#33393b;border-radius:10px;height:4px;margin:2px 0;transition:transform .4s cubic-bezier(.68, -.6, .32, 1.6);}
.m_line:first-of-type,.m_line:nth-of-type(3){width:75%;}
.m_line:nth-of-type(2){width:100%;}
#navi_button input[type=checkbox]{display:none;}
input[type=checkbox]:checked~.m_line:first-of-type{transform-origin:bottom;width:50%;transform:rotatez(45deg) translate(2px, -1px);}
input[type=checkbox]:checked~.m_line:nth-of-type(2){transform-origin:top;transform:rotatez(-45deg);}
input[type=checkbox]:checked~.m_line:nth-of-type(3){transform-origin:bottom;width:50%;transform:translate(15px, -3px) rotatez(45deg);}
#menu_items,#menu_overlay{position:absolute;left:0;z-index:10;top:100%;}
#menu_items{display:block;}
#menu_items{margin:1px;width:250px;transform:translateX(-100%);border-radius:3px;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, .15);text-align:left;padding:10px 20px;}
.menu_item{display:inline-block;position:relative;padding:7px 0;width:100%;}
.menu_item:not(:last-child):after{content:'';position:absolute;bottom:0;height:1px;left:0;background-color:#cfcfcf;width:50%;}
.menu_item a{color:#1e1f1a;display:inline-block;font-size:14px;font-weight:bolder;}
#menu_overlay{height:100vh;width:100vw;background:rgba(0, 0, 0, .1);display:none;}
#menu_items,#page_header{background-color:#fff;}
.age {
  font-size: 22px;
  color: #33393b;
  font-weight: bold;
  letter-spacing: -3px;
  border: 3px solid #33393b;
  border-radius: 5px;
}