@-ms-viewport {
    width: device-width;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {

    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: black;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family:"Chiller", "Bahnschrift";
    font-size: 100%;
    font-weight: 600;
    
        overflow: hidden;
       overflow-x: hidden;
       cursor:url('imgs/cursor.png'), auto;

}

img {

    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}

form {

}

main {
  scroll-timeline: --main-timeline;
}

*::-webkit-scrollbar {
  height: 15px;
  width: 15px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #000000;
}

*::-webkit-scrollbar-track:hover {
  background-color: #000000;
}

*::-webkit-scrollbar-track:active {
  background-color: #000000;
}

*::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: #000000;
  border: 4px outset #4268FF;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #5000DA;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #000F95;
}

@font-face {
    font-family: 'Chiller';
    src: url('imgs/Chiller-Regular.ttf') format('truetype');
    src: url('imgs/Chiller-Regular.eot');
    src: url('imgs/Chiller-Regular.eot?#iefix') format('embedded-opentype'),
        url('imgs/Chiller-Regular.woff2') format('woff2'),
        url('imgs/Chiller-Regular.woff') format('woff'),
        url('imgs/Chiller-Regular.svg#Chiller-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.decoration {
z-index: 2;
display:block;
position:fixed;

width: 100%;
height: 100%;
pointer-events: none;

}

#stardec {
mix-blend-mode:color-dodge;

}

.loopover {
z-index: 2;
display:block;
position:fixed;
height: 100%;
width: 100%;
mix-blend-mode:darken;
overflow: hidden;
overflow-y: visible;

}


.loopover img {
z-index: 2;
display:block;
position:absolute;
max-height:110%;
width: auto;
height:40%;
right: 3em;
bottom:0;

}


#burn {
mix-blend-mode:darken;
height: 101%;
opacity: 0.95;
transform: scaleY(1.05);
pointer-events: none;
}

#darken {
mix-blend-mode: lighten;
opacity: 0.7;
min-width: 60em;
z-index: 5;
pointer-events: none;
  -webkit-animation: filter-animation ;
  animation: filter-animation ;
  animation-timing-function:steps(7, jump-end);

  animation-timeline: scroll(y);

}



@-webkit-keyframes filter-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }
  

  100% {
    -webkit-filter: hue-rotate(360deg);
  }
}

@keyframes filter-animation {
  0% {
    filter: hue-rotate(0deg);
  }
  

  
  100% {
    filter: hue-rotate(360deg);
  }
}




*{
     margin: 0;
    padding: 0;   
    box-sizing:border-box;

}

#whitebg {
    background-color:white;
}


.article {

width: 50vw;
height: auto;
margin:3em;

text-wrap: stable;
z-index: 2;
position:absolute;
right: 8.5em;
margin-left: auto;

margin-bottom:auto;
max-width: 50%;
max-height: 90%;

}

#midarticle {
right: 0;
position:relative;
display: none;
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 85%;
transform: translate(0, -10%);
}

#mobilearticle {
right: 0;
position:relative;
display: none;
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 100%;
margin-top:auto;
transform: translate(0, 20%);
z-index: 2;



}

.article p{
padding: 0;
    color:black;
    font-size: 2vw;
    line-height: 0.9;
    text-align:center;
    -webkit-text-stroke: 0.14em white;
paint-order: stroke fill;
text-wrap: pretty;
}




#getgame {
   line-height: 0.4;
   background-image: url("imgs/getgame.png");
   border-size: 100px;
   background-repeat: no-repeat;
   font-weight: 1000;
   animation: pulse2  1000ms step-start  infinite;
}

#soc {

font-size:0.6em;
}

@keyframes pulse2 {
  0% { transform: skew(160deg, -9deg) ; } 

  10% { transform: skew(155deg, -11deg); } 
  50% { transform: skew(159deg, -10deg); }

  70% { transform: skew(167deg, -11deg); }
  100% { transform: skew(166deg, -10deg); }
}

.decoration img {

mix-blend-mode: inherit;
    display: block;
width: 100%;
height: 100%;

 left: 50%;
  right: 50%;
}





.gameimg {
z-index: 1;
background-color: white;
width: 100%;
padding:0;

}

.gameimg img {

max-width: 100%;
    display: block;
width: auto;
height: 100%;
min-height: 60em;
 left: 50%;
  right: 50%;
}

#desktop {
    display:block;
}

#mobile {
    display:none;
}


nav {

z-index: 3;

}

#mobilespace {
    display:none;
    width:auto;
    height:6em;
    background-color:white;
}



nav ul{
    flex-direction: column;
    list-style:none;
   display:flex;
    text-align:right;
    right: 0;
    z-index: 3;
    position: fixed;
    margin-top: 100px;
    margin-right: 60px;
    max-width:100%;
}

nav a{
 all: unset;
 width:100%;
 display:flex;
 }




nav li{
    display: flex;
    
}

#signature {
 position: relative;
font-family:"Bahnschrift";
z-index:9;
color: #80cdef;
font-size: 3em;

}


button {

height: 10em;
width: 10em;
    background:none;
border: none;
padding: 1em;
margin: 1em;
margin-left: auto;
cursor: pointer;
fill: black;
  filter: 
    drop-shadow(-2px -4px 0px white) 
    drop-shadow(6px -2px 0px white) 
    drop-shadow(2px 6px 1px white)
    drop-shadow(-2px 2px 0px white)
}

button:hover {


  filter: 
    drop-shadow(-2px -2px 0px blue) 
    drop-shadow(2px -2px 0px blue) 
    drop-shadow(2px 2px 1px blue)
    drop-shadow(-2px 2px 0px blue)
}


#mobilescaletext {
    pointer-events: none;
    color: black;
    -webkit-text-stroke: 0.05em white;
paint-order: stroke fill;

}





/*v2*/


.v2nav {
z-index: 3;
width:100%;
height:30em;
background-color:white;
display:flex;

background-size: auto 100%;
background-repeat: no-repeat;
background-position-x: center;
 background-position-y: top;
   
}

#hc_bg {
background-image: url("imgs/remi_real.jpg");
 box-shadow: 0 -6px 3px 3px black inset;

}

#header_bg {
background-image: url("imgs/header.jpg");
background-size: auto;
 background-color:black;
   box-shadow: 0 0 3px 3px white inset;
}

.v2buttonrow {
z-index: 1;
width:80%;
display:flex;
align-self: flex-end;
margin:15px;
height:15em;
margin-left:auto;
margin-right:auto;
pointer-events:none;
 gap: 10px;
   background-color:black;
   box-shadow: 0 0 8px 8px white inset;
   -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.v2nav :hover {
width:85%;


}

.v2buttonrow button {

z-index: 3;
all: unset;
width:auto;
 flex-grow: 1;
 pointer-events:auto;
background-color:black;
line-height:0.8em;
 cursor: pointer;
  transition:  padding 0.3s ;
  animation-timing-function: ease-in-out;
   transition-timing-function:steps(2, jump-start);
  background-image: url("imgs/btn_idle.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size:80px;
      color:black;
   -webkit-text-stroke: 0.01em white;
    text-shadow: 0px 0px 25px grey;
paint-order: stroke fill;
font-family:"Times New Roman";
    white-space: nowrap;
    text-overflow: ellipsis;
    
    text-transform: uppercase;
    font-weight:800;

      animation-play-state: paused; /* Pause by default */
  animation-fill-mode: both; /* Retain start/end styles */
}
.v2buttonrow button span:hover  {
    all:unset;
    pointer-events:none;
}
.v2buttonrow button span {
pointer-events:none;
}


.v2buttonrow button:hover { background-image: url("imgs/btn_hover.jpg");width: auto;width: calc-size(auto, size * 1.3); transition-delay: 250ms;  padding:4px; margin:7px; animation: pulse2  1000ms step-start  infinite; animation-delay: 0.15s;  transform: scale(1, 1.5);
}


.v2buttonrow button:active { background-image: url("imgs/btn_press.jpg"); animation: press  100ms step-start;}



@keyframes press {
  0% { transform: skew(160deg, -9deg)  scale(1.3, 1.4);  } 

  50% { transform: skew(-60deg, 10deg)  scale(1.3, 0.7); }

  70% { transform: skew(3deg, 5deg)  scale(1.7, 0.4);}
  80% { transform: skew(0deg, 0deg)  scale(1.3, 0.4);}
  100% { transform: skew(0deg, 0deg)  scale(1.3, 0.4); }
}

/*glitter*/

.star {

   animation-timing-function:steps(1, end);
   transition-timing-function:steps(1, jump-start);
   animation-name: glitter;

  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  background: red;
  overflow: hidden;
  z-index: 2;
  animation: glitter 1s infinite;
  -webkit-animation: glitter 1s infinite;
  -moz-animation: glitter 1s infinite ;
  -ms-animation: glitter 1s infinite ;
  -o-animation: glitter 1s infinite ;
 transform: scale( 0.35);
  -moz-transform: scale(0.35);
}
.star-top,
.star-bottom {
  position: relative;
  display: block;

}
.star-top:before,
.star-top:after,
.star-bottom:before,
.star-bottom:after {
  content: '';
  width: 48px;
  height: 48px;
  background: black;
  border-radius: 50%;
  position: absolute;
}
/*CSS3 pseudo class for positioning curves*/

.star-top:before {
  top: -24px;
  left: -24px;
}
.star-top:after {
  bottom: -24px;
  left: 24px;
}
.star-bottom:before {
  top: 24px;
  left: -24px;
}
.star-bottom:after {
  top: 24px;
  left: 24px;
}
/*CSS3 keyframes for glittering effect*/

@-webkit-keyframes glitter {
  0% {
  
    opacity: 1;
  }
  25% {
    
    opacity: 0;
  }

  75% {
    
    opacity: 0;
  }
  100% {
    
    opacity: 1;
  }
}
@-moz-keyframes glitter {
  0% {
    
    opacity: 1;
  }
  25% {
    
    opacity: 0;
  }

  75% {
    
    opacity: 0;
  }
  100% {
    
    opacity: 1;
  }
}







/*glitter end*/












@media screen and (max-width: 2340px){
.v2buttonrow {

width:90%;

}
.v2buttonrow button {
font-size:3.5vw;
}


.article p{
font-size:3em;
    color:white;
   
    -webkit-text-stroke: 0.14em black;
paint-order: stroke fill;
}






@media screen and (max-width: 1700px){
#desktoparticle {
    display:none;
}
#midarticle {
    display:block;

}
.article {
max-height: 90%;
bottom: 4em;
}


}
@media screen and (max-width: 900px){

.v2buttonrow button {


    
   -webkit-text-stroke: 0.02em white; }

.star {

 transform: scale( 0.30);
  -moz-transform: scale(0.30);
}



#header_bg {background-size:auto 100%;}
.v2nav {

height:17em;
}
.v2buttonrow {
 gap: 1vw;
height:40%;
}

*::-webkit-scrollbar {
display:none;
}

#soc {

font-size:0.9em;
}

#desktop {
    display:none;
}
#mobile {
    display:block;
}

.gameimg {
margin-left: 10px;
margin-right: 10px;
padding: 0;

}




.gameimg img {

max-width: 250%;
    display: block;
width: auto;
height: 40em;
min-height: auto;
}
#mobiletranslate1 {
   transform: translate(-30%, 0);
}

#mobiletranslate2 {
   transform: translate(-10%, 0);
}

#mobilescaletext {
    font-size: 10vw;
}

#mobilearticle {
display: block;
}

.article p {
font-size: 2.5em;
width: 80%;
display:block;
margin-right: auto;
margin-left: auto;
    color:black;

    -webkit-text-stroke: 0.09em white;
paint-order: stroke fill;
}

nav ul{
flex-direction: column;
top: 0%;
padding-bottom: 5em;
margin:2px;
font-size: 80%;

}
button {

height: clamp(60px, 10vw, 90px);
width: clamp(60px, 10vw, 90px);
padding:1px;
margin: 1px;
margin-right:4vw;
}

#midarticle {
    display:none;
}

}




}


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

.v2buttonrow button {


      color:black;
   -webkit-text-stroke: 0.04em white; }

#darken {
transform: scaleY(1.05);
opacity:0.6;
}
#burn {

transform: scaleY(1.10);

}

.gameimg img {


height: 35em;

}



.star {

 transform: scale( 0.25);
  -moz-transform: scale(0.25);
}


.article p {
font-size: 1.8em;}

.v2nav {

height:14em;
}

.v2buttonrow {height:4em;     z-index:4;
    width:99%;}
.v2buttonrow button { }

#mobilespace {
    display:block;
}
.loopover img {

height:30%;
right:0;

}

#mobiletranslate1 {
   transform: translate(-50%, 0);
}

nav ul{
    flex-direction: column;

}
}


/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/** {
  scrollbar-width: thin;
  scrollbar-color: #BDCB00 #000000;
}*/

/* Chrome, Edge and Safari */
/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/** {
  scrollbar-width: thin;
  scrollbar-color: #000000 #000000;
}*/

/* Chrome, Edge and Safari */