/* 
https://kvabacdn.fra1.cdn.digitaloceanspaces.com/common/noMarkerFramePortrait.png
*/
/* @font-face {
    font-family: "MarkForMC Nrw";
    src: url("https://db.onlinewebfonts.com/t/d930760769788d4aaa8f4b153aed37ba.eot");
    src: url("https://db.onlinewebfonts.com/t/d930760769788d4aaa8f4b153aed37ba.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/d930760769788d4aaa8f4b153aed37ba.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/d930760769788d4aaa8f4b153aed37ba.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/d930760769788d4aaa8f4b153aed37ba.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/d930760769788d4aaa8f4b153aed37ba.svg#MarkForMC Nrw")format("svg");
} */
@font-face {
    font-family:"Sport";
    src: url("/assets/PBSport-Bold.ttf") format("truetype");
  }
  @font-face {
    font-family:"Sport-r";
    src: url("/assets/PBSport-Regular.ttf") format("truetype");
  }
  @font-face {
    font-family:"Sport-bi";
    src: url("/assets/fonts/PBSport-BoldItalic.ttf") format("truetype");
  }
  @font-face {
    font-family:"Sport-i";
    src: url("/assets/fonts/PBSport-LightItalic.ttf") format("truetype");
  }
  @font-face {
    font-family:"Yulong";
    src: url("/assets/Yulong-Regular.ttf") format("truetype");
  }

body, html {
    margin : 0px; 
    overflow: hidden;
    font-family: "MarkForMC Nrw";
    font-size:1.75vh;
}
@font-face {
    font-family: "MarkForMC T";
    src: url("/assets/fonts/MarkForMC-Thin.ttf")format("truetype"),;
  
}
@font-face {
    font-family: "MarkForMC H";
    src: url("/assets/fonts/MarkForMC-HeavyIt.ttf")format("truetype"),;
  
}
@font-face {
    font-family: "MarkForMC El";
    src: url("/assets/fonts/MarkForMC-ExtraLt.ttf")format("truetype"),;
  
}
@font-face {
    font-family: "MarkForMC Boldit";
    src: url("/assets/fonts/MarkForMC-BoldIt.ttf")format("truetype"),;
  
}
@font-face {
    font-family: "MarkForMC B";
    src: url("/assets/fonts/MarkForMC-Black.ttf")format("truetype"),;
  
}
@font-face {
    font-family: "Nato el";
    src: url("/assets/fonts/NotoSans-ExtraLight.ttf")format("truetype"),;
}
#overlay {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-image: url("https://kvabacdn.fra1.cdn.digitaloceanspaces.com/common/noMarkerFramePortrait.png");
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
    
}
#loader{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
  left: 0;
  background-color: black;
  z-index:999999999
}
#loader img{
   height: 100%;
}

    #soon {
        width: 100%;
        position: absolute;
        color: white;
        top: 3%;
        left: 50%;
        font-family: "Sport-bi";
        transform: translateX(-50%);
        text-align: center;
    }

#overlay p {
    margin-top: 20vh;
}
#page{
   display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    padding: 22% 0;
   
}
#wrapper{    
    align-items: center;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content-img{
   width: 56%;
   z-index: 10;
}
#spacer{
    height: 30%;
}
#stars{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}


#show{
    opacity: 0;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 #container {   
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
 }
 #logo{
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
   transform: translate(-50%, -50%);
   
  
 }
#stars-full{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    position: absolute;
}
#text-cont{
    color: white;
    position: absolute;
    top: 45vh;
    left: 11vw;
    width: 78vw;
    
}
#one, #two, #three{    
    font-size: 2.5rem;
    font-family: "MarkForMC El";
    line-height:2.35rem;
    
}
#greeting{
    color: white;
    font-family: "Nato el";
    position: absolute;
    font-size: 1.2rem;
    top: 110vh;
    left: 7vw;
    width: 69vw;
    max-height: 55vh;
    overflow-y: auto;
}
#three .char{     
 
}
#two .word:nth-last-child(1){
    font-family: 'MarkForMC Boldit';
}

.char{
    scale:0;
    overflow:hidden;
    transform-origin: bottom left;
}
.line{
    /* height:40px; */
}
#gobutton{
    color: white;
    font-size: 1.35rem;
    padding: 10px;
    border-radius: 2.25rem;
    background-color: transparent;
    border: solid 1px white;
    padding: 1rem;
    position: absolute;
    top: 93%;
    left: -50%;
    transform: translate(-50%, -50%);
}
#blurr-text{
    font-size: 1.5rem;
    margin-top: 1rem;
    filter: blur(10px);
    opacity: 0;
    font-family: "MarkForMC T";
}
#select-flow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* HTML: <div class="loader"></div> */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    width: 35%;
    aspect-ratio: 4;
    background: radial-gradient(circle closest-side,#EB001B 90%,#0000) 0/calc(100%/3) 100% no-repeat;
    animation: l2 1s steps(3) infinite;
  }
  @keyframes l2 {
    to{background-position: 150%} 
    50.0%  {  background: radial-gradient(circle closest-side,#F79E1B 90%,#0000) 0/calc(100%/3) 100% no-repeat;} 

}
#intro {
    display: flex;
    font-family: "Sport";
    background-color: blue;
    color: white;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}


#form-container{
    width: 85%;
}
#ar{
    display: none;
}
#messenger{
   max-width: 300px;
   width: 90%;
    font-family: "Sport";
    /* background-color: rgba(3,98,252,0.7); */
    color: white;
    font-size: large;
    transform: translate(-50%, -50%);
    position: absolute;
    top:50%;
    left: 50%;
    height: 585px;
    max-height: 85vh;
    display: none;
    /* border: solid 1px white;
    border-radius: 25px; */
    padding:95px 28px;
    background-image: url('/assets/fon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-family: "Sport-r";
}
#messenger h3{
  
     font-family: "Sport";
 }
 #messenger p{
  font-size: medium;
}
#messenger input{
    font-family: 'Sport-i';
  }
#form-but, #loose-but ,#win-but {
    background-image: url('/assets/butt.png');
    background-color: transparent;
    color: white;
    font-family: 'Sport-bi';
    padding: 8px 38px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: auto;
}

#loose-but ,#win-but{
    font-size: xx-large;
    font-family: "Sport-bi";
}
#start-message{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}

#start-message button{
    font-size: xx-large;
    font-family: "Sport-bi";

}
#counter{
    position: absolute;
    top: 0;
    right: 15px;
    color: white;
    z-index: 99;
    font-size: 3rem;
    font-family: "Yulong";
}
#win-message{
    font-family: "Sport-r";
    padding: 20px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* justify-content: space-between; */
    display: flex;
}
#win-message span{
    font-family: "Sport-i";
    font-size: small;
}

.second-win{
    display: none;
}
#loose-message{
    font-family: "Sport-r";
    padding: 20px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* justify-content: space-between; */
    display: flex;
}
#loose-message h3{
    font-family: "Sport";
   
}
#terms-a{
    color: white;
    text-decoration: underline;
    font-family: 'Sport';
}
.error-span{
    font-size: small;
    color: #EB001B;
    display: none;
}