@font-face {
  font-family: 'MADS Receipt';
  src: url(/font/type.ttf);
}

:root{
  --gutter: 40px;
}

body{
  background: #A9652C;
  background: #ecad79;
  font-family: 'MADS Receipt', monospace;
  font-size: 28px;
  line-height: 0.8;
  color: white;
  text-align: left;
  margin:0px;
}


#bg {
  position: fixed;
  background: #A9652C;
  background:black;
  z-index: 0;
  width: calc(100% + 10px);
  height: calc(100% + 100px);
  top: -5px;
  left: -5px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
  z-index:-1;
  mix-blend-mode: multiply;
}

#bg{
  /* visibility: hidden; */
}
#bg_swap,
#bg_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 100px);
}
#bg_swap {
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 1.5s;
}
#bg_swap.active {
  opacity: 1;
}
.animated{
  animation: kenburns 10s linear both;
}
#bg, #bg_swap{
  animation-fill-mode: both;
  background-position: center;
}


#bg_overlay {
  background: linear-gradient(to right, #0099f7, #f11712);
  opacity: 0;
  transition: opacity 1s;
  mix-blend-mode: color;
}

.top-bottom{
  position: fixed;
  height:calc(100vh - var(--gutter)*2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--gutter);

}

#sig{
  display: flex;
  position:fixed;
  bottom: var(--gutter);
  right:var(--gutter);
}

#sig svg{
  position: absolute;
  pointer-events:none;
  width: 650px;
  top:0px;
  transform:translate(-5%, -57%) rotate(-1deg);
}

.line{
  width: 500px;
  margin-left: 5px;
}

a{
  text-decoration:none;
  color:white;
}

#comingSoonContainer div {
  white-space: nowrap;
}

@keyframes kenburns{
  0%{
      background-position: 0px -100px;
  }

  100% {
      background-position: 0px 0px;
  }
}


@media (min-aspect-ratio: 7/5) {
  /* * {
    border: 2px solid red;
  } */
  @keyframes kenburns{
    0%{
        background-position: 0px -50vh;
    }
  
    100% {
        background-position: 0px -40vh;
    }
  }
}

#comingSoonContainer{
  position:fixed;
  width:calc(100vw - var(--gutter)*2);
  padding: var(--gutter);
  text-transform: uppercase;
  line-height:0.5;
  left: 0px;
  bottom:calc(var(--gutter) *5);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}

#bullets{
  position:fixed;
  bottom:calc(var(--gutter) * 5 + 17*28px*0.5);
}

.x{
  white-space: nowrap;
}

#loading{
  width:100vw;
  height:100vh;
  position:fixed;
  top:0px;
  left:0px;
  background: #36200D;
  z-index: 5;
  text-align: center;
  animation: loading 2s forwards linear;
}
#loading svg{
  position:absolute;
  top: 50vh;
  left: 50vw;
  width: calc(200% - 30px);
  transform: translate(-50%, -50%);
}
#test{
  display:none;
}
@keyframes loading{
  0%{
      opacity: 1;
      display:block;
  }
  50%{
      opacity: 1;
      display:block;
  }
  90%{
      opacity: 0;
      display:block;
  }
  100%{
      opacity: 0;
      display:none;
  }
}

@media only screen and (max-width: 950px) {

  #sig{
      bottom:calc(var(--gutter)*3);
      right: auto;
      left: var(--gutter);
  }
  #comingSoonContainer, #bullets{
      position: static;
      padding: 0;
  }
  .top-bottom{
      justify-content: flex-start;
      gap: 1em;
  }
  #footer{
      position: fixed;
      bottom:var(--gutter);
      left: var(--gutter);
  }

}

@media only screen and (max-width: 670px) {

  :root{
      --gutter: 20px;
  }

  #sig{
      bottom: calc(var(--gutter) * 4);
  }

  #sig svg{
      max-width:calc(100vw - 10px);
      top: 20px;
  }

}