html, body {
text-transform: uppercase;
  }

.phoneoverlay{
  display: none;

}

#langnav{
  padding-top: 12%;
  padding-right: 15%;

  background-color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0;
  right: 0;
  /* z-index: 2; */

}
#langbutton{
  position: absolute;
  background-color: white;
  padding-top: 1.1%;
  padding-bottom: 1.1%;
  padding-left: 1.3%;
  padding-right: 1.3%;
  top: 0;
  right: 0;
  font-size: 25px;
  /* margin-top: 4%;
  margin-right: 5%; */
  margin-top: calc(50px - 1.1%);
  margin-right: 1.25%;
  margin-bottom: 2%;
  margin-left: 4%;
  color: black;
  z-index: 3;
  animation: blink 4s infinite;
  animation-direction: alternate;
  


}
@keyframes blink {
  from {background-color: white; color: black;}
  to {background-color: black; color: white;}

}
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* grid-template-rows: 150px; */
grid-column-gap: 1%;

height: calc(100vh - 16px);
height: -webkit-calc(~'100vh - 16px');
height: -moz-calc(~'100vh - 16px');
height: calc(~'100vh - 16px');

}

.item{

writing-mode: vertical-rl; 
text-orientation: mixed; 
display: flex; 
align-items: center;
/* transform: rotate(180deg); */
white-space: nowrap;
text-align: right;


/* ENABLE AFTER STYLING! */
height: 10000px;
}


.slide-top {
  /* rotate: 180deg; */
	-webkit-animation: slide-top 80s linear infinite both;
          animation: slide-top 80s linear infinite both;
  /* overflow: hidden; */
  justify-content: flex-end;
}


/* ----------------------------------------------
 * Generated by Animista on 2020-5-18 10:16:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */

 @-webkit-keyframes slide-top {
    0% {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
    }
    100% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  }
  @keyframes slide-top {
    0% {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
    }
    100% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  }

/* Styling follows here */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

html, body{
  font-family: "Avenir Next", "Avenir", 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 44px;
  color: white;
  background-color: black;
}

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

@media only screen  and (max-width : 1824px) {
  html, body{  
  font-size: 44px;
  }
  }

@media only screen  and (max-width : 1690px) {
    html, body{  
  font-size: 42px;
  }
  }

@media only screen  and (max-width : 1280px) {
    html, body{  
  font-size: 38px;
  }
  }

@media only screen  and (max-width : 1200px) {
    html, body{  
  font-size: 36px;
  }
  }

@media only screen  and (max-width : 1024px) {
    html, body{  
  font-size: 34px;
  }
  }

@media only screen  and (max-width : 980px) {
    html, body{  
  font-size: 32px;
  }
  }

@media only screen  and (max-width : 960px) {
  html, body{  
  font-size: 30px;
  }
}

@media only screen  and (max-width : 900px) {
    html, body{  
  font-size: 28px;
  }
  }

@media only screen  and (max-width : 768px) {
    html, body{  
  font-size: 27px;
  }
  }

@media only screen  and (max-width : 680px) {
  html, body{  
  font-size: 23px;
  }
}

@media only screen  and (max-width : 640px) {
  html, body{  
  font-size: 22px;
  }
}

@media only screen  and (max-width : 600px) {
  .phoneoverlay{
    display: block;
    overflow: hidden;
    position: fixed; 
    z-index: 100; 
    display: flex; 
    background-color: rgb(0, 0, 0); 
    height: 100vh; 
    width: 100vw; 
    align-items: center; 
    justify-content: center;
    text-align: center;
  
  }
  .phonegif{
    display: block;
    overflow: hidden;
    /* position: fixed;  */
    z-index: 100; 
    display: flex; 
    background-color: rgb(0, 0, 0); 
    height: 100vh; 
    width: 100vw; 
    align-items: center; 
    justify-content: center;
    text-align: center;
    color: white;
    text-transform: uppercase;    
}
  }

/* 
@media only screen  and (max-width : 540px) {
    html, body{  
  font-size: 21px;
  }
  }

@media only screen  and (max-width : 500px) {
    html, body{  
  font-size: 20px;
  }
  }

@media only screen  and (max-width : 440px) {
    html, body{  
  font-size: 19px;
  }
  }

@media only screen  and (max-width : 430px) {
    html, body{  
  font-size: 18px;
  }
  }

@media only screen  and (max-width : 410px) {
    html, body{  
  font-size: 17px;
  }
  }

@media only screen  and (max-width : 350px) {
  html, body{  
  font-size: 16px;
  }
}

@media only screen  and (max-width : 320px) {
  html, body{  
  font-size: 15px;
  }
} */