@-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: 650;
    
        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;

}

*::-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%;
}

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


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

}


#burn {
mix-blend-mode:darken;
height: 101%;
}

#darken {
mix-blend-mode: lighten;
opacity: 0.7;
min-width: 60em;
z-index: 5;
pointer-events: none;

}

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

}

#whitebg {
    background-color:white;
}


.article {

width: 50em;
height: 45em;
position:absolute;

z-index: 2;
bottom: 1em;
right: 4em;
margin-right: 5em;
max-width: 50%;
max-height: 90%;

}

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

#mobilearticle {
right: 0;
position:relative;
display: none;
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 100%;
transform: translate(0, -8%);
background-color: white;
z-index: 1;



}

.article p{
padding: 0;
    color:black;
    font-size: 4em;
    line-height: 0.8;
    text-align:center;
    -webkit-text-stroke: 0.09em white;
paint-order: stroke fill;
}


#kofi {
    height: 200%;
    padding: 10px;
}

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

@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;

}


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{
transform: skew(160deg, -10deg);
 color: white;

 font-family:"Chiller";
text-decoration:none;
margin-left: 1px;
font-size: 10em;
-webkit-text-stroke: 0.05em black;
paint-order: stroke fill;
}

nav a:hover{

 color: black;


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


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 -2px 0px white) 
    drop-shadow(2px -2px 0px white) 
    drop-shadow(2px 2px 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;
}

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

.article {
max-width: 30vw;
height: auto;
margin:2vw;
}

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

.loopover img {

transform: translate(20em, 0);

}

@media screen and (max-width: 2000px){
nav ul{
flex-direction: row;
top: 0%;
padding-top:4em;
margin:2px;
}


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


.loopover {
z-index: 2;
height:auto;
width:auto;
position:absolute;
display:block;
mix-blend-mode:darken;
overflow: visible;
bottom:15em;

min-width:100%;
}

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



transform: translate(-20em,-100px);
}
}
@media screen and (max-width: 850px){


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



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

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

}


.loopover {
z-index: 6;
height:auto;
width:auto;
position:relative;
display:block;
mix-blend-mode:darken;
overflow: visible;
bottom:15em;

min-width:100%;
}

.loopover img {
z-index: 2;
display:block;
position:absolute;
max-height:110%;
right:100px;
width: auto;
height:auto;
transform: translate(0,0);
}


.gameimg img {

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

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

#mobilescaletext {
    font-size: 11vw;
}

#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;
}

}



/* 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 */