@font-face {
  font-family: "Lato-Regular";
  src: url(../fonts/Lato-Regular.ttf);
}
@font-face {
  font-family: "Lato-Black";
  src: url(../fonts/Lato-Black.ttf);
}
@font-face {
  font-family: "Lato-Bold";
  src: url(../fonts/Lato-Bold.ttf);
}
@font-face {
  font-family: "Lato-Light";
  src: url(../fonts/Lato-Light.ttf);
}
@font-face {
  font-family: "Lato-Medium";
  src: url(../fonts/Lato-Medium.ttf);
}
@font-face {
  font-family: "Lato-Semibold";
  src: url(../fonts/Lato-Semibold.ttf);
}
@font-face {
  font-family: "OpenSans-Bold";
  src: url(../fonts/OpenSans-Bold.ttf);
}
@font-face {
  font-family: "OpenSans-Regular";
  src: url(../fonts/OpenSans-Regular.ttf);
}
@font-face {
  font-family: "OpenSans-Semibold";
  src: url(../fonts/OpenSans-Semibold.ttf);
}

*{
    margin: 0;
    padding: 0;
}


.header{
    min-height: 100vh;
    width: 100%;
    position: relative;
}
.navigation{

}
.nav-logo{
  font-size: 36px;
  padding-bottom: 20px;
  font-family: "Lato-Black";
  text-transform: uppercase;
  background: -webkit-linear-gradient(left, #33FFFF, #B833FF);
  background: -ms-linear-gradient(left, #33FFFF, #B833FF);
  background: -moz-linear-gradient(left, #33FFFF, #B833FF);
  background: -o-linear-gradient(left, #33FFFF, #B833FF);
  -webkit-background-clip: text;
  -ms-background-clip: text;
  -o-background-clip: text;
  -webkit-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -o-text-fill-color: transparent;
}
nav{
    display:flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;

}
.nav-links{
    flex: 1;
    text-align: right;
}
.nav-links ul li{
    list-style: none;
    display:inline-block;
    padding:8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #666666;
    text-decoration: none;
    font-size: 16px;
    text-transform: uppercase;
}
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #af51fe;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
}
.studio-content{
display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-top: 3%;
}
.studio-content-img{
width: 15%;
height: 15%;
border-radius: 50%;
align-content: center;
align-self: center;
margin-bottom: 3%;
}
.studio-title{
    align-content: center;
    align-self: center;
    color: #a951fe;
    text-align: center;
    font-weight: bolder;
}
.studio-line{
    margin-top: 5%;
    display: flex;
}

.studio-description{
    color: #666666;
    text-align: center;
    align-self: center;
    width: 60%;
    height: 30%;
    margin-bottom: 7%;
}

.studio-alpha{
    min-height:  height: 100%;
    width: 100%;
    background-color: #a951fe;

    margin-bottom: 2%;
}
.studio-alpha-img1{
    width: 45%;
    height: 17%;
    box-shadow: 2px 2px 5px 2px DarkOrchid;
    margin-top: 3%;
    margin-right: 2%;
    margin-left: 2%;
    border-radius: 1%; align-self: center;
    margin-bottom: 3%;
    
}
.studio-alpha-img1:hover{
    animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.studio-alpha-img{
    width: 45%;
    height: 17%;
    box-shadow: 2px 2px 5px 2px DarkOrchid;
    margin-top: 3%;
    margin-left: 1%;
    margin-right: 1%;
    border-radius: 1%; align-self: center;
    margin-bottom: 3%;
}
.studio-alpha-img:hover{
    animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.studio-alpha-title1{
    color: white;
    justify-self: left;
}
.studio-alpha-title{    
    color: white;
    justify-self: left;
}
.studio-alpha-folder1{
    width: 100%;
    height: 10%;
    display: flex;
    flex-direction: row;
    margin-bottom: 0%;
    margin-right:1%;
}
.studio-alpha-folder{
    width: 100%;
    height: 10%;
    display: flex;
    flex-direction: row;
    margin-bottom: 3%;
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
    background-image: url("images/BlogImages/Untitled%20presentation-2.png");
}
.studio-alpha-folder-folder1{
    width: 100%;
    margin-left: 1%;
    margin-top: 5%;
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
    background-image: url("images/BlogImages/Untitled%20presentation-2.png");
}
.studio-alpha-folder-folder{
    width: 100%;
    margin-left: 4%;
    margin-top: 3%;
}
.studio-alpha-text{
    color: white;
}
.studio-alpha-selector{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: white;
    padding-right: 20%;
    padding-left: 20%;
    font-size: 100%;
    list-style-type: none;
    
}

.studio-alpha-selector li a::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #ffffff;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.studio-alpha-selector li a:hover:after{
  width: 100%;
}

.coming-soon{
    display: flex;
    width: 100%;
    color: #a951fe;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    padding-left: 20%;
    padding-right: 20%;
    margin-bottom: 0%;
    margin-top: 10%;
}
.coming-soon-title{
    text-align: center;
    font-size: 275%;
    font-weight: bolder;
    margin-bottom: 5%;
    
}
.countdown{
    display: flex;
    justify-content: space-between;
}
.day,.hour,.minute,.second{
    font-size: 7rm;
    text-align: center;
    font-weight: bolder;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.download{
 width: 100%;
height: 10%;
display: flex;
 justify-content: center;
 
}
.download-title{
    align-self: center;
    align-content: center;
    margin-top: 15%;
    margin-bottom: 5%;
    color: #a951fe;
    font-size: 6vh;
}
.download-button{
  background: #a951fe;
  align-self: center;
  border: none;
  color: white;
  font-size: 6vh;
  cursor: pointer;
  width: 25%;
  border-radius: 25px;
    transition-duration: 0.75s;
}
.download-button:hover{
  background-color: ghostwhite;
  color: #a951fe;
}


.download-link{
    text-decoration: none;
    color: white;
    text-align: center;
    
}
.game{
margin:0px auto;
left:0;
right:0;
border-radius: 50px;
border-width: 2%;
  
}
.gamecontainer{
    margin-bottom: 4%;
    background-color: black;
    margin-right: 30%;
    margin-left: 30%;
    padding-top: 2%;
    padding-bottom: 2%;
    
    border-radius: 25px;
    border-color: grey;
    border-width:35px;
    border-style:solid;
    box-shadow: 4px,4px,4px,4px
}
.atest {
  
}
.centered-div {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 20%; /* Adjust as needed */
      width: 80%;
      margin:0px auto;
    }

    .centered-div span {
      font-size: 18px; /* Adjust as needed */
      font-family: "Lato-Regular";
    color: #000000;
    }
    .centered-div span a{
    color: #a951fe;
    }

@media(max-width: 700px){

    .nav-links{
        visibility: hidden;
    }
    .studio-logo{
        display: flex;
        margin-top: 5%;
        justify-content: center;
    }
    .studio-logo-img{
 width: 75%;
height: 75%;
        
        
}
    .studio-line{
        visibility: hidden;
    }
    .footer{
        visibility: hidden;
    }
    .studio-description{
        top: 65%;
        justify-content: center;
    }
    .studio-alpha-img{
        visibility: hidden;
        justify-self: left;
        display: flex;
    }
    .studio-alpha-img1{
        visibility: hidden;
        display: flex;
    }
    
    .coming-soon{
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: space-between;    
        
}
   
}