@keyframes breathing{
  0% {
      transform:  scale(1) translate(0%, 0%);
  }
  50% {
      transform:  translate(0%, -5%) scale(1.1);
  }
  100% {
      transform:  scale(1) translate(0%, 0%);
  }
}
@keyframes rotate {
0% {
  transform: rotate(-3deg);
}
50% {
  transform: rotate(3deg);   
}
100% {
  transform: rotate(-3deg);
}
}

@font-face {
  font-family: Vera;
  src: url(/css/fonts/Vera\ Humana\ 95.ttf);
}
@font-face {
  font-family: Mokoto;
  src: url(/css/fonts/Mokoto\ Demo.ttf);
}
.mokoto {
  font-family: 'Mokoto', sans-serif !important;
}

body {
  margin:0;
  padding:0;
  height: 100vh;
  overflow: hidden;
  background-color: #543e44;
}

.foreground {
  transition: opacity 0.8s;
  opacity: 0.5;
  height:100%;
  min-width:100%;
  cursor: pointer;
  z-index:3;
  position: absolute;
  max-width: 100vw;
  pointer-events: all;
}

.fullscreen-video {
  position: fixed;
  overflow: hidden;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: -10;
}

.bg-overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #000000e2;
  z-index: -9;
}
.overlay-disabled {
  opacity: 0;
  cursor: default;
  z-index: -1;
}
.disabled {
  pointer-events: none;
}
.wiggle {
  animation: rotate 4s ease-in-out infinite;
}
#codario {
  position: fixed;
  z-index: 2;
  left: -230px;
  bottom: -240px;
  width:400px;
  height:400px;
  transition: transform .6s ease-in;
  opacity: 0;
  cursor: pointer;
}
#codario:hover{
  transform: translate(185px, -170px);
  filter: drop-shadow(0rem 0rem 1rem rgb(210, 190, 23));
}
#codario img {
  width:400px;
  height:400px;
}

#codario-title {
  position: absolute;
}

.bottom-left {
  position: fixed;
  z-index: 2;
  left: 0px;
  bottom: 0px;
  width:200px;
  height:200px;
  max-height:15%;
  transition: transform .6s ease-in;
  opacity: 0;
  cursor: pointer;
}
.bottom-left img {
  width: auto;
  height: 100%;
}
#leftcorner:hover {
  -webkit-filter:drop-shadow(0px 0px 3px #222);
  filter: drop-shadow(0px 0px 3px #222);
}
#leftcorner:hover img {
  filter:invert(0) !important;
}
.bottom-right {
  filter:invert();
  position: fixed;
  z-index: 2;
  right: 1%;
  bottom: 0px;
  width: 200px;
  height: 200px;
  max-height: 15%;
  transition: transform .6s ease-in;
  cursor: pointer;
}
.bottom-right img {
  width: auto;
  height: 100%;
}
#menu {
  position: fixed;
  cursor: pointer;
  z-index: 2; 
  bottom:15px;
  right:15px;
  width: auto;
  height: 150px;
  max-height:15%;
  transition: .5s ease-in-out;
  opacity: 0;
}
#menu:hover {
  filter:invert(1);

}
.brain-awake {
  top:5% !important;
}
#menu img {
  width:auto;
  height:100%;
  animation: breathing 5s linear 0s infinite normal none;
}
#menu img:hover{
  filter: drop-shadow(0rem 0rem 1rem rgb(255, 199, 199));
}
#udstillet {
  max-width: 560px;
  height: auto;
  width:auto;
  max-height: 40vh;
  z-index: 10;
  filter: drop-shadow(0em 0em 0.5em black);
  cursor: pointer;
}
.video-subtext {
  font-family: "Lexend", sans-serif;
  color:white;
  margin-top: 0em;
  font-size:3em;
  margin-bottom: 0.2em;
}
#logo {
  cursor: pointer;
  transition: filter 0.4s;
  z-index: 100;
  text-align: center;
  width: auto;
  height: 15vh;
  max-height:120px;
  margin-left: 50%;
  transform: translateX(-50%);
  position: fixed;
  padding: 15px;
}
#logo:hover{
  filter:invert(1);
}
#instagram {
  width:30px;
  height:30px;
  position: fixed;
  top:15px;
  right:15px;
  transition: opacity 0.8s;
  opacity: 0;
  z-index: 105;
}
#instagram img { 
  width:30px;
  height:30px;
}
#instagram img:hover {
  filter: drop-shadow(0em 0em 0.2em black);
}
#slider {
  width: 100%;
  height:100%;
  opacity: 0;
  transition: opacity 0.4s;
}
.active {
  opacity: 1 !important;
}
.inactive {
  opacity: 0 !important;
}
.swipe-item video {
  width:560px;
  height:auto;
  max-height: 40vh;
  z-index: 10;
  filter: drop-shadow(0em 0em 0.5em black);
  cursor:pointer;
}
.swipe-item  img {
  width:auto;
  height:auto;
  max-height: 40vh;
  z-index: 10;
  filter: drop-shadow(0em 0em 0.5em black);
  cursor:pointer; 
}
video::-internal-media-controls-overlay-cast-button {
  display: none;
}
.play-btn {
  width: 50px;
  height: 50px;
  z-index: 999;
  position: relative;
  right: 50%;
  transform: translate(50%,-55%);
  background-size: contain;
  cursor:pointer;
}
.paused {
  background-image: url(/images/play.png);
}
.playing {
  background-image: url(/images/pause.png);
}
.title {
  font-size: 3em;
  font-weight:100;
}
.codario {
  font-family: 'Amatic SC', cursive;
  color:greenyellow;
}
.wftwt {
  font-family: 'Amatic SC', cursive;
  color: #cc35d1;
  font-size: 1.9em;
}
.swipe-item:hover .ysl {
  color:black;
}
.ysl {
  font-family: 'Vera', cursive;
  font-size: 2.25em;
  color: #9bb8fb;
}
.tbhc {
  font-family: 'Great Vibes', cursive;
  color: #cc61a7;
}
.compilation {
  font-family: 'Amatic SC', cursive;
  color:wheat;
}
.whacking {
  font-family: 'Mokoto', cursive;
  color:gold;
  font-size: 2.25em;
}
.shoutout {
  color: white;
  font-family: 'Mokoto', sans-serif;
  font-weight: 100;
}
.shoutout a {
  text-decoration: none;
  color:#d9bc51;
}
.video-subtext {
  font-weight:100;
}
.show {
  height: min-content;
  transition: transform .2s ease-in;
}
#swipe-container {
  height:100%;
}
.swipe-item {
  display:flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#about {
  filter:opacity(0.80);
}
#about:hover{
  filter:opacity(1.0);
}
#about h4 {
  font-size:3em;
}
#about p {
  max-width: 400px;
  color: white;
  line-height: 2em;
  font-size: 1.15em;
  padding:1em;
  text-align: left;
}
p {
  font-family: "Lexend", sans-serif;
}
#about:hover {
  cursor:pointer;
}
#description {
  font-size: 2em;
  line-height: 2.25em;
}
.whitestrip {
  min-height: 100%;
  padding-bottom:100px;
  direction: rtl; /* Set direction to right-to-left */
}

.the-menu {
  height:5vh !important;
}

.divider {
  width:100%;
  height:50px;
  margin:0;
  background: repeating-linear-gradient( -45deg, #000000, #000000 10px, #ffffff 5px, #ffffff 25px );
  background-color: #e5e5f7;
  margin-bottom: 2em;
  margin-top: 2em;
}

@media only screen and (max-height: 430px) {
  #nav-btns {
      display:none;
  }
}
@media only screen and (min-width:800px){
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display:block;
  }
  .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
      z-index:2;
      text-align: center;
  }
  .swipe-wrap {
      overflow: hidden;
      position: relative;
  }
  .swipe-wrap > div {
      float: left;
      width: 100%;
      position: relative;
  }
  .nav {
      position: fixed;
      top:45%;
      height:10%;
      z-index:5;
  }
  .nav a {
      font-family: 'Righteous', cursive;
      font-size: 6em;
      color:white;
      text-decoration: none;
  }
  .nav:hover a {
      color:rgb(176, 176, 176);
  }
  .show:hover{
      transform: scale(1.02);
  }
  .left{
      float:left;
      left:10%;
  }
  .right{
      float:right;
      right:10%;
  }

  .hover-pink:hover {
      filter: invert(48%) sepia(14%) saturate(1420%) hue-rotate(262deg) brightness(97%) contrast(93%);
  }
  .hover-blue:hover {
      filter: invert(1);
  }
  .hover-orange:hover {
      filter: invert(36%) sepia(89%) saturate(7106%) hue-rotate(13deg) brightness(96%) contrast(103%);
  }
  .hover-purple:hover{
      filter: invert(40%) sepia(9%) saturate(4407%) hue-rotate(242deg) brightness(89%) contrast(76%);
  }
  .hover-gold:hover {
      filter: invert(57%) sepia(21%) saturate(546%) hue-rotate(1deg) brightness(101%) contrast(92%);
  }
  .hover-green:hover{
      filter: invert(85%) sepia(63%) saturate(602%) hue-rotate(24deg) brightness(94%) contrast(111%)
  }
}
@media only screen and (max-width: 800px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display:none;
  }
  .nav {
      display: none;
  }
  
  #codario {
      left: -140px;
      bottom: -300px;
  }
  #codario img{
      width:250px;
      height:250px;
  }
  #logo{
      width:100px;
      height:100px;
  }
  .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
      z-index:2;
      text-align: center;
  }
  .swipe-wrap {
      overflow: hidden;
      position: relative;
  }
  .swipe-wrap > div {
      float: left;
      width: 100%;
      position: relative;
  }
  .swipe-item iframe {
      pointer-events: none;
      max-width: 90%;
  }
  .swipe-item video {
      max-width: 90%;
  }
  #index {
    margin-top: 25px;
  }
  /*.landscape ~ .play-btn {
      bottom: 95px;
  }
  .landscape ~ .video-subtext {
      margin-top: -95px;
  }
  .ysl, .tbhc, .whacking {
      margin-bottom: -35px;
  }
  .compilation {
      margin-bottom: -20px;
  }*/
  .tbhc {
      font-size:2.2em;
  }
}