body {
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 35px;
}

label {
    display: block;
}

input.access {
    background-color: #FCE2CC;
}

button.access:disabled{
    border: #FCE2CC 0px solid;
    background-color: #3f493e;
    color: #a8988a;
}

button.access{
    border: #FCE2CC 1px solid;
    background-color: #1E3C1D;
    color: #FCE2CC;
}

button {
    cursor: pointer;
}
button:disabled {
    cursor: not-allowed;
}

#overlay {
    /* display: none; */
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fondo {
    width: 100vw;
    height: 100vh;
    background-color: #132318;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fondo-index {
    background-image: url("img/home.svg");
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
    color: white;
}

.fondo-02 {
    background-image: url("img/02-pc-olentzero.svg");
    color: white;
}

.fondo-03 {
    background-image: url("img/03-danger.svg");
    color: white;
}

.fondo-04 {
    background-image: url("img/04-hacker-desktop.svg");
    color: white;
}

.fondo-05 {
    background-image: url("img/05-hacker-tiktok.svg");
    color: white;
}

.fondo-06 {
    background-image: url("img/06-hacker-web.svg");
    color: white;
}

.fondo-07 {
    background-image: url("img/07-hacker-login.svg");
    color: white;
}

.fondo-08 {
    background-image: url("img/08-hacker-recuperar.svg");
    color: white;
}

.fondo-09 {
    background-image: url("img/09-lista-usuarios.svg");
    color: white;
}

.fondo-10 {
    background-image: url("img/10-envio-datos.svg");
    color: white;
}

.fondo-11 {
    background-image: url("img/11-datos-enviados.svg");
    color: white;
    color: #FCE2CC;
}

.fondo-pc {
    background-image: url("img/pc.svg");
    background-size: 65%;
    background-repeat: no-repeat;
    color: #FCE2CC;
}

.formulario{
    width: 60%;
}

#cerrar{
    position: absolute;
    top: 150px;
    right: 300px;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: rgb(245, 86, 86);
}

.mini{
    font-size: 0.3em;
    position: absolute;
    bottom: 150px;
    left: 600px;
    color: rgb(245, 86, 86);
}

.popup{
    display: none;
    padding-top: 15%;
    text-align: center;
    width: 80vw;
    height: 80vh;
    background-color: red;
    color: snow;
    font-size: 2em;
}

.popup a{
    color: yellow;
    text-decoration: underline;
}

@keyframes texto {
    0%   {color: rgb(253, 43, 43);}
    15%  {color: rgb(255, 115, 0);}
    25%  {color: rgb(255, 238, 0);}
    35% {color: green;}
    50% {color: cyan;}
    75% {color: blue;}
    100% {color: purple;}
}

.nintendo{
    font-size: 1.5em;
    animation-name: texto;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    color: green;
}


.fondo-pc video.hacking-pc{
    height: 100vw;
    display: block;
}

.hacking{
    display: flex;
    align-items: center;
    text-align: center;
    width: 80vw;
    height: 80vh;
    border: #1EFC06 1px solid;
    border-radius: 5px;
    background-color: #202020;
    font-size: 1.5em;
}

.hacking a, .hacking #cerrar{
    color: #1EFC06;
}

.usertiktok{
    display: flex;
    width: 80vw;
    height: 80vh;
    border: #1EFC06 1px solid;
    border-radius: 5px;
    background-image: url("img/hacker.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #202020;
    color: #1EFC06;
    font-size: 1em;
}

.tiktok{
    display: flex;
    align-items: center;
    text-align: center;
    width: 80vw;
    height: 80vh;
    border: #1EFC06 1px solid;
    border-radius: 5px;
    background-image: url("img/fondo_tiktok.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #202020;
    color: #1EFC06;
    font-size: 1em;
}

.usertiktok a, .tiktok a{
    color: #1EFC06;
    font-weight: 700;
}

.hackerweb{
    display: flex;
    margin: 0px auto;
    align-items: center;
    text-align: center;
    width: 50vw;
    height: 50vh;
    border: #1EFC06 1px solid;
    border-radius: 5px;
    background-color: #202020;
    font-size: 1em;
}

.fondo-pc-hacker{
    background-image: url("img/pc_hacker.svg");
    color: #FCE2CC;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    display: flex;
}

.intra{
    position: absolute;
    top: 50px;
    right: 50px;
    background-color: #1EFC06;
    border-radius: 5px;
    height: 50px;
    width: 200px;
    text-align: center;
    justify-content: center;
}

.intra a{
    margin: auto;
    color: #202020;
    font-size: 0.8em;
}

.login{
    width: 100vw;
    height: 100vh;
    background-color: #202020;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login label, .login span{
    color: #1EFC06;
}

.login input, textarea{
    border:  #1EFC06 solid 1px;
    border-radius: 5px;
    background-color: #202020;
    width: 100%;
    color: #1EFC06;
}

.login a{
    color: #1EFC06;
}

.login button{
    padding: 10px 20px;
    background-color: #1EFC06;
    color: #202020;
    border: 0px;
}

.login h1{
    color: #1EFC06;
    animation-name: texto;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.eskerrak{
    text-align: center;
}

.zorionak{
    color: #FCE2CC;
    font-size: 2em;
}