style.css

*{
    margin: 0;
    padding: 0;
    font-family: 'DotGothic16', sans-serif;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
    border-radius: 15px;
    box-sizing: border-box;
}

:root{
    --color-primario: #00ff00;
    --color-secundario: #000000;
    --color-SecOpac: #000000b3;
    --color-terciario: #ffffff;
    --color-cuarto: #00e696;
    --color-quinto: #aaffaa;
    --color-sexto: #beffbe66;
    --color-error: #ffcc00 ;
}

::placeholder {
    text-align: center;
    color: var(--color-sexto);
}

::selection{
    background-color:var(--color-cuarto);
    color: var(--color-secundario);

}

textarea{
    resize: none;
}

textarea:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

button:focus-visible{
    outline: -webkit-focus-ring-color auto 0px;
}

::-webkit-scrollbar{
    width: 7px;
    background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-secundario);
    border-radius: 20px;
    border: 2px solid var(--color-primario);
}

/*AQUI INICIA MI BODY*/
#body {
    box-sizing: border-box;
    font-family: 'DotGothic16', sans-serif;
    font-size: 3vw;
    background-color: var(--color-secundario);
}

#pagina{
    background:none;
    min-height: 100vh;
    height: 100%;
    width: 98vw;
    margin: 0 .8vw;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(11, 1fr);

    grid-template-areas:"logo logo logo mostrar mostrar"
                        "logo logo logo mostrar mostrar"
                        "logo logo logo mostrar mostrar"
                        "logo logo logo mostrar mostrar"
                        "ingresar ingresar ingresar mostrar mostrar"
                        "ingresar ingresar ingresar mostrar mostrar"
                        "ingresar ingresar ingresar mostrar mostrar"
                        "ingresar ingresar ingresar mostrar mostrar"
                        "btn btn btn mostrar mostrar"
                        "btn btn btn mostrar mostrar"
                        "footer footer footer mostrar mostrar";
}

/*ESTE ES MI FONDO*/
#canvas {
    position: absolute;
    background-color: var(--color-primario);
    border: none;
    border-radius: 0px;
    width: 99vw;
    height: 100vh;
    margin: 0 .5vw;
    padding: 0%;
}

/*ESTE ES MI LOGO*/

.logo{
    grid-area: logo;
    height: 100%;
    width: 100%;
}

.logo h1 a{
    display: inline-block;
    background: var(--color-SecOpac);
    font-size: 2em;
    padding: .15em .54em .45em .54em;
    text-decoration:none;
    border-radius:180px;
    border: 3px solid var(--color-quinto);
    box-shadow: none;
    animation: logo 4s linear infinite;
}

@keyframes logo{
    0%{
        margin: 5% 0 0 3%;
        color: var(--color-quinto);
        text-shadow: 0px 0px 12px var(--color-primario), 0px 0px 8px var(--color-primario), 0px 0px 5px var(--color-primario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 10px var(--color-primario), inset 0px 0px 8px var(--color-primario);
    }
    
    50%{
        margin: 6% 0 0 3%;
        color: #5f5;
        text-shadow: none;
        box-shadow: none;
        border: 3px solid #5f5;
    }
    
    100%{
        margin: 5% 0 0 3%;
        color: var(--color-quinto);
        text-shadow: 0px 0px 12px var(--color-primario), 0px 0px 8px var(--color-primario), 0px 0px 5px var(--color-primario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 10px var(--color-primario), inset 0px 0px 8px var(--color-primario);
    }
}

/*BOTON DE BORRAR*/

#borrar{
    box-sizing: border-box;
    background: var(--color-secundario);
    position: absolute;
    color: var(--color-primario);
    scale: 1.2;
    border:none;
    border-radius: 20px;
    margin-left: 50%;
    padding: 3px;
}

#borrar:hover{
    cursor: pointer;    
    color: var(--color-quinto);
    text-shadow: 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), 0px 0px 5px var(--color-primario);
}

#borrar:active{
    background-color: rgba(0, 0, 0, 0);
}

/*ESTE ES INGRESAR TEXTO*/

#secText{
    grid-area: ingresar;
    width: 100%;
    height: 100%;
    margin: 0;
    gap: 10px;
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#secText label{
    box-sizing: border-box;
    color: var(--color-error);
    font-size: .4em;
    text-align: center;
    background-color: #111;
    border: 2px solid #444;
    border-radius: 90px;
    padding: 5px;
    width: 70%;
    margin: 0 auto;
}

#ingTextAqui{
    box-sizing: border-box;
    font-family: 'DotGothic16', sans-serif;
    text-align: center;
    color: var(--color-primario);
    font-size: .7em;
    padding: .5em;
    margin: 0 auto;
    width: 90%;
    height: 50%;
    background-color:var(--color-SecOpac);
    border: 2px solid var(--color-primario);
    border-radius: 8px;
}

/*BOTON DE REPARAR*/

#reparar{
    box-sizing: border-box;
    visibility:hidden;
    text-align: center;
    color: var(--color-primario);
    font-size: .6em;
    letter-spacing: 3px;
    background-color: var(--color-SecOpac);
    border-radius: 10px;
    border: 2px solid var(--color-primario);
    margin: 0 auto;
    padding: 0;
    width: 86%;
}

#reparar:hover{
    background-color: black;
    border: 2px solid var(--color-terciario);
    box-shadow: 0px 0px 15px var(--color-error), 0px 0px 10px var(--color-error), 0px 0px 5px var(--color-error), inset 0px 0px 5px var(--color-error), inset 0px 0px 3px var(--color-error);
    color: var(--color-terciario);
    text-shadow: 0px 0px 15px var(--color-error), 0px 0px 10px var(--color-error), 0px 0px 5px var(--color-error);
    scale: 1;
}

#reparar:hover .material-symbols-outlined{
    text-shadow: 0px 0px 15px var(--color-error), 0px 0px 10px var(--color-error), 0px 0px 5px var(--color-error);
    color: var(--color-terciario);
}

#reparar:active{
    background-color:rgba(255, 204, 0,.2);
    border:2px solid #ff0;
}

/*ESTO SON MIS BOTONES DE ENCRIPTAR*/

.botones{
    grid-area: btn;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    margin: 0;
}

.boton{
    box-sizing: border-box;
    font-family: 'DotGothic16', sans-serif;
    color: var(--color-primario);
    font-size: .6em;
    text-align: center;
    padding: 1%;
    width: 40%;
    height: 60%;
    background-color: var(--color-SecOpac);
    margin: 0;
    border:2px solid var(--color-primario);
    letter-spacing: 3px;
    transition: box-shadow 2s, text-shadow 5s, color 5s, border 2s, scale .5s;
    transition-timing-function: ease;
}

button:hover{
    color: var(--color-terciario);
    text-shadow: 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), 0px 0px 5px var(--color-primario);
    border: 2px solid var(--color-terciario);
    box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 5px var(--color-primario), inset 0px 0px 3px var(--color-primario);
    cursor: pointer;
    scale: 1.1;
    background-color: var(--color-SecOpac);
}

button:active{
    background-color:rgba(0, 255, 0,.2);
    border:2px solid var(--color-primario);
}

/*ESTE ES MI MENSAJE CIFRADO*/

.mensaje{
    grid-area: mostrar;
    width: 100%;
    height: 90%;
    margin: 5% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background:var(--color-SecOpac);
    animation: neon 2s infinite alternate;
}

#msg{
    box-sizing: border-box;
    background:none;
    font-family: 'DotGothic16', sans-serif;
    text-align: center;
    font-size: .7em;
    color: var(--color-primario);
    border: none;
    padding: .5em;
    width: 100%;
    min-height: 80%;
    cursor: default;
}

@keyframes neon {
    0%{
        border: 2px solid var(--color-terciario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 15px var(--color-primario), inset 0px 0px 8px var(--color-primario);
    }
    
    5.9%{
        border: 2px solid var(--color-terciario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 15px var(--color-primario), inset 0px 0px 8px var(--color-primario);
        filter: brightness(0.7);
    }
    
    6%{
        border: 2px solid var(--color-terciario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 15px var(--color-primario), inset 0px 0px 8px var(--color-primario);
        filter: brightness(1);
    }
    
    9.9%{
        border: 2px solid var(--color-terciario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 15px var(--color-primario), inset 0px 0px 8px var(--color-primario);
        filter: brightness(0.9);
    }
    
    10%{
        border: 2px solid var(--color-terciario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 15px var(--color-primario), inset 0px 0px 8px var(--color-primario);
        filter: brightness(1);
    }
    
    100%{
        border: 2px solid var(--color-terciario);
        box-shadow: 0px 0px 25px var(--color-primario), 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), inset 0px 0px 15px var(--color-primario), inset 0px 0px 8px var(--color-primario);
        filter: brightness(1);
    }
}

/*IMAGEN*/

#imagen{
    position: absolute;
    opacity: .4;
    width: 12vw;
    height: 12vw;
    margin: 0% 0% 0% 20px;
    visibility: visible;
}

/*AQUI ES LA PARTE DE BONTON DE COPIAR*/

.copiar{
    box-sizing: border-box;
    background-color: var(--color-SecOpac);
    font-family: 'DotGothic16', sans-serif;
    color: var(--color-primario);
    font-size: .6em;
    text-align: center;
    padding: 1%;
    margin: 0;
    border:2px solid var(--color-primario);
    transition: box-shadow 2s, text-shadow 1s, color .5s, border .5s, width 1s;
    transition-timing-function: ease-out;
    width: 40%;
    height: 8%;
}

.copiar:hover{
    width: 50%;
    scale: 1;
}

/*PIE DE PAGINA*/

.foot{
    grid-area: footer;
    background:none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.foot a img{
    background: var(--color-secundario);
    height: 1em;
    width: 1em;
}

.foot a:hover{
    transition: all .5s;
    scale: 1.3;
}

.foot a:active{
    background-color: var(--color-secundario);
}

.foot p{
    background: var(--color-SecOpac);
    padding: 5px;
    color: var(--color-quinto);
    font-size: .6em;
    letter-spacing: 3px;
    text-shadow: 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), 0px 0px 5px var(--color-primario);
    animation: copy .5s infinite alternate;
}

.foot p span{
    color: var(--color-quinto);
    font-size: 1em;
    text-shadow: 0px 0px 15px var(--color-primario), 0px 0px 10px var(--color-primario), 0px 0px 5px var(--color-primario);
    animation: parpadear 1.8s infinite alternate;
}

.foot p:hover{
    cursor:default;
}

@keyframes copy {
    to{
        filter: brightness(.9);
    }
}

@keyframes parpadear{
    0%{
        filter:  brightness(.9);
    }

    9%{
        filter: brightness(.9);
    }

    10%{
        filter: brightness(0);
    }

    12%{
        filter: brightness(.9);
    }
    
    20%{
        filter: brightness(0);
    }
    
    30%{
        filter: brightness(.9);
    }
    
    100%{
        filter: brightness(.9);
    }
}

/*ESTA ES LA VIEWPORTDE TABLET*/
@media screen  and (max-width:1024px) and (min-height: 700px){

    #body{
        font-size: 4vw;
    }
    
    #pagina{
        height: 150vh;
        width: 98vw;
        margin: 0 .8vw;
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(14, 1fr);
    
        grid-template-areas:"logo logo"
                            "logo logo"
                            "ingresar ingresar"
                            "ingresar ingresar"
                            "ingresar ingresar"
                            "ingresar ingresar"
                            "ingresar ingresar"
                            "btn btn"
                            "mostrar mostrar"
                            "mostrar mostrar"
                            "mostrar mostrar"
                            "mostrar mostrar"
                            "mostrar mostrar"
                            "footer footer";
    }
    

    #canvas{
        height: 150vh;
    }

    /*BOTON DE BORRAR*/

    #borrar{
        margin: 8% 0% 0% 80%;
        scale: 1.5;
    }
    
    /*INGRESAR TEXTO*/
    
    #secText label{
        font-size: .5em;
        width: 80%;
    }
    
    #ingTextAqui{
        font-size: 1.2em;
    }

    #reparar{
        font-size: .8em;
    }
    
    #reparar .material-symbols-outlined{
        scale: 1.4;
    }
    
    /*MENSAJE SECRETO*/
    
    .mensaje{
        height: 100%;
        width: 90%;
        margin: 0 5%;
    }
    
    #msg{
        font-size: 1.2em;
    }
    
    /*BOTON DE COPIAR*/
    
    .copiar{
        height: 10%;
    }
    
    /*IMAGEN*/
    
    #imagen{
        margin: 10% 0% 0% 20px;
        width: 20vw;
        height: 20vw;
    }
}

/*ESTA ES LA VIEWPORT DE CELULAR*/
@media screen  and (max-width:600px){

    #body {
        font-size: 4vw;
    }
    
    #pagina{
        height: 155vh;
        width: 98vw;
        margin: 0 .8vw;
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(16, 1fr);
        
        grid-template-areas:"logo logo"
        "logo logo"
        "ingresar ingresar"
        "ingresar ingresar"
        "ingresar ingresar"
        "ingresar ingresar"
        "btn btn"
        "btn btn"
        "mostrar mostrar"
        "mostrar mostrar"
        "mostrar mostrar"
        "mostrar mostrar"
        "mostrar mostrar"
        "mostrar mostrar"
        "footer footer"
        "footer footer";
    }
    
    #canvas{
        height: 155vh;
    }
    
    /*BOTON DE BORRAR*/
    
    #borrar{
        margin: -20% 0% 0% 80%;
    }
    
    /*INGRESAR TEXTO*/
    
    #secText label{
        font-size: .7em;
        width: 85%;
    }

    #ingTextAqui{
        font-size: 1.2em;
    }

    #reparar{
        font-size: .9em;
    }
    
    #reparar .material-symbols-outlined{
        scale: .9;
    }
    
    /*BOTONES DE ENCRIPTADO*/
    
    .botones{
        flex-direction: column;
    }
    
    .boton{
        width: 85%;
        height: 25%;
        padding: 0%;
        font-size: .9em;
    }
    
    /*MENSAJE SECRETO*/

    .mensaje{
        height: 99%;
        width: 90%;
        margin: 0 5%;
    }
    
    #msg{
        font-size: 1.2em;
    }
    
    /*BOTON DE COPIAR*/

    .copiar{
        height: 90%;
        margin: 0% 0% 5% 0%;
        font-size: 1.2em;
        padding: 0%;

    }
    
    /*IMAGEN*/

    #imagen{
        margin: 0% 0% 0% 20px;
        width: 40vw;
        height: 40vw;
    }

    /*PIE DE PAGINA*/

    .foot{
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 5%;
        margin: 1%;
    }

    .foot a img{
        width: 2.5em;
        height: 2.5em;
    }
    
    .foot a:hover{
        scale: 1.2;
    }

    .foot p{
        font-size: 1.2em;
    }
}