@charset "UTF-8";

/* esconder scrollbar corretamente (MOBILE + DESKTOP) */
html, body{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none;
}

/* ======================= */

body{
margin:0;
padding:0;
height:100vh;

background-image:url("./imagens/backgoundArkania005.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

font-family:monospace;
color:white;
overflow:auto;
}

/* fundo com ruído */
body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url("./imagens/tile01.gif");
opacity:0.50;
animation:noise 0.20s infinite;
pointer-events:none;
}

/* scanlines */
body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:repeating-linear-gradient(
transparent 0px,
transparent 2px,
rgba(255,255,255,0.05) 3px
);
pointer-events:none;
}

/* animação do ruído */
@keyframes noise{
0%{transform:translate(0,0)}
10%{transform:translate(-5%,-5%)}
20%{transform:translate(-10%,5%)}
30%{transform:translate(5%,-10%)}
40%{transform:translate(-5%,15%)}
50%{transform:translate(-10%,5%)}
60%{transform:translate(15%,0)}
70%{transform:translate(0,10%)}
80%{transform:translate(-15%,0)}
90%{transform:translate(10%,5%)}
100%{transform:translate(5%,0)}
}

/* container central */
.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}

/* imagem */
.imagem-central{
width:320px;
animation:glitch 0.98s infinite;
}

/* glitch */
@keyframes glitch{
0%{transform:translate(0) scale(1);}
10%{transform:translate(-6px,2px) skewX(5deg);}
20%{transform:translate(6px,-2px) scaleX(1.05);}
30%{transform:translate(-4px,3px) skewY(4deg);}
40%{transform:translate(4px,-3px);}
50%{transform:scaleY(1.08);}
60%{transform:translate(-5px,2px);}
70%{transform:translate(5px,-2px) skewX(-5deg);}
80%{transform:scaleX(0.25);}
90%{transform:translate(-3px,1px);}
100%{transform:translate(0) scale(1);}
}

/* botão */
.entrar{
display:block;
margin-top:80px;
font-size:18px;
text-decoration:none;
color:white;
}

.entrar:hover{
opacity:0.6;
}

/* rodapé */
footer{
position:fixed;
bottom:10px;
width:100%;
text-align:center;
font-size:12px;
opacity:0.7;
}

/* desktop */
@media (min-width: 1024px){
.imagem-central{
width:500px;
}
}