body {
  /* padding: 50px */
  /* font-family: system-ui */
}

@font-face {
  font-family: 'fez';
  src: url('../fonts/uni05_54-webfont.woff2') format('woff2'),
        url('../fonts/uni05_54-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal
}

:root {
  --surface-opacity: 1;
  --fez-logo-color: rgb(15, 0, 26);
  --owl-green: #73f59d;
  --sky-blue: #2bfffa
}

html, body {
  box-sizing: border-box;
  /* background-color: var(--fez-logo-color) */
  background-color: #2bfffa;
  background-color: var(--sky-blue);
  margin: 0;
  padding: 0;
  font-family: 'fez', monospace;
  text-transform: uppercase;
  font-size: 16px
}

@media(max-width: 768px) {

html, body {
    font-size: 14px
  }
}

*, *:before, *:after {
  box-sizing: inherit
}

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

a:hover, a:active, a:visited {
    color: #FFF
}

main {
  position: relative;
  width: 100%;
  height: 96%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: space-between */
  justify-content: flex-start;
  padding: 2%
}

@media(max-width: 768px) {

main {
    padding: 4%;
    /* justify-content: space-between */
    height: 90%
  }
}

main {
  /* @media(--md)
    align-items: center */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
  opacity: var(--surface-opacity)
}

#fez-logo-container {
  /* position: absolute
  top: 0
  left: 0 */
  max-width: 16%
}

@media(max-width: 768px) {

#fez-logo-container {
    /* max-height: 30vh */
    max-width: 40vw
  }
}

.fez-logo {
  width: 100%;
  height: auto
  /* margin-bottom: 4% */
}

.fez-logo path {
    /* animation: rainbow2 20s linear
    animation-iteration-count: infinite */
    fill: rgb(15, 0, 26);
    fill: var(--fez-logo-color)
}

.links {
  /* position: relative */
  /* top: 10% */
  padding-top: 2%
}

@media(max-width: 992px) {

.links {
    padding-top: 1rem
  }
}

.links {
  /* padding-bottom: 1rem */
  /* color: #FFF */
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  line-height: 16px;
  padding-bottom: 64px
}

.links * {
    position: relative;
    color: rgb(15, 0, 26);
    color: var(--fez-logo-color);
    padding: 4px 0
}

@media(max-width: 992px) {

.links * {
      color: #FFF;
      background-color: rgb(15, 0, 26);
      background-color: var(--fez-logo-color);
      margin-top: 8px;
      padding-left: 9px;
      padding-right: 4px;
      padding-bottom: 8px;
      padding-top: 6px
  }
}

@media(max-width: 576px) {

.links * {
      margin-top: 6px;
      padding-left: 9px;
      padding-right: 4px;
      padding-bottom: 6px;
      padding-top: 4px
  }
}

.links * {
    /* @media(--md)
      padding-bottom: .6rem
      padding-top: .5rem
      padding-right: 1rem */
    /* &:last-child
      padding-right: 0 */
    /* animation: rainbow2 20s linear
    animation-iteration-count: infinite */
}

.links .big {
    font-size: 24px;
    line-height: 21px;
    padding-top: 4px
}

@media(max-width: 576px) {

.links .big {
      margin-top: 6px;
      padding-left: 9px;
      padding-right: 4px;
      padding-bottom: 8px;
      padding-top: 4px
  }
}

.links .big {
    /* @media(--md) */
}

.links a {
    transition: color 300ms ease-in-out;
    color: rgb(15, 0, 26);
    color: var(--fez-logo-color)
}

@media(max-width: 992px) {

.links a {
      color: #FFF
  }
}

.links a {
    text-decoration: none
}

.links a:active, .links a:visited {
      color: rgb(15, 0, 26);
      color: var(--fez-logo-color)
}

@media(max-width: 992px) {

.links a:active, .links a:visited {
        color: #FFF
  }
}

.links a:hover {
      /* animation: none */
      /* color: #aa0a28 */
      color: #FFF
      /* text-shadow: 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 2px 0px 0 #000, 0px 2px 0 #000, -2px 0px 0 #000, 0px -2px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000 */
}

.links {
  /* & a:hover
    animation: rainbow 10s linear
    animation-iteration-count: infinite */
  /* & .soundtrack
    padding-bottom: 0 */
}

.links .bandcamp {
    height: 50px;
    overflow: hidden
    /* border: 4px var(--fez-logo-color) solid */
}

.vimeo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden
}

.hidden {
  opacity: 0
}

#backgroundvideo {
  transition: opacity 1s linear
  /* width: 100vw
  height: 100vh */
}

.vimeo-wrapper iframe {
  opacity: 1;
  /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  min-width: 177.77vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

footer {
  /* position: relative */
  opacity: 1;
  opacity: var(--surface-opacity);
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #000;
  width: 100%;
  z-index: 3;
  color: #FFF;
  padding: 0 2%
}

@media(max-width: 768px) {

footer {
    padding: 0 4%
  }
}

footer {
  min-height: 64px
}

@media(max-width: 576px) {

footer {
    min-height: 44px
  }
}

footer {
  /* padding-bottom: 1rem */
  /* & .bottom-row */
  width: 100%;
  display: inline-flex;
  /* flex-wrap: wrap */
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

footer .right-side {
    /* background-color: #000
    padding-top: 12px
    padding-bottom: 12px */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end
    /* margin-left 15px */
}

footer .right-side .esrb {
      height: 36px;
      padding-right: 15px
}

footer .right-side .privacy {
      display: flex;
      flex-grow: 1;
      line-height: 1.1;
      padding: 0 15px;
      /* padding-right: 15px */
      font-size: 12px
}

footer .polytron {
    padding: 0
    /* padding-right: 15px */
}

footer .polytron #logo, footer .polytron #text {
      display: block;
      height: 32px;
      width: 32px
}

footer .bandcamp {
    max-width: 60%;
    padding-right: 15px
}