/*------
fuentes
----*/

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*----global css----*/
:root {
    --font: #e5e5e5;
    --white:#ffffff;
    --Dark-blue:#0a3871;
    --greey: #c5c5c5c5;
    --Medium-Gray: #67808e;
    --RGBA: rgba(0,0,0,0.08);
    --white-blue: #d8dfe8;
    --medium-blue:#0a38718a;
    --Grey: #343a40;
    --Gree: #495057;

}

/*----selector universal, todas las propiedades generales de nuestra aplicacion---*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Work Sans", sans-serif;
    text-decoration: none;
    background: var(--white);
}

::selection {
    background: var(--Dark-blue);
    color: var(--white);
}


body {
    height: 100%;
}

img {
    max-width: 100%;
}

/*---encabezad----*/

header {
    position: absolute;
    margin: 40px 0px 0px 40px
}

header .logo {
    display:flex;
    align-items: flex-start;
    width: 120px;
    height: 48px;
}

/*---main-----*/

main {
    display: flex;
    flex-direction: row;
    background: url(../images/portada.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.encriptador {
    width: 660%;
    margin: 168px 0px 0px 140px;
    background: transparent;

}

.encriptar  {
    width: 660px;
    height: 288px;
    font-weight: 400;
    font-size: 32px;
    line-height: 48px;
    outline:none;
    border:1px solid var(--greey);
    border-radius:15px;
    resize: none;
}

.encriptar::placeholder,:focus {
    color: var(--Dark-blue);
}

.encriptador-aviso {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 8;
    position: absolute;
    top: 500px;

}

.texto-aviso {
    width: 100%;
    font-style: normal;
    font-weight: 400px;
    font-size: 18px;
    line-height: 150%;
    opacity: o,8;
    color: var(--Medium-Gray);
}

.encriptador-contenedor {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    position: absolute;
    top: 526px;
}

.btn-encriptar {
    width: 328px;
    height: 67px;
    padding: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: var(--white);
    background: var(--Dark-blue);
    border: 1px solid var(--Dark-blue) ;
    border-radius:24px;
    cursor: pointer;
    box-shadow: 0px 20px 29px -5px var(--RGBA);

}

.btn-encriptar:active {
    box-shadow: inset 2px 2px 4px var(--font),
    inset -3px -4px 8px var(--Dark-blue);
    color: var(--white-blue);
}

.btn-desencriptar {
    width: 328px;
    height: 67px;
    padding: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: var(--Dark-blue);
    background: var(--white-blue);
    border: 1px solid var(--Dark-blue) ;
    border-radius:24px;
    cursor: pointer;
    box-shadow: 0px 20px 29px -5px var(--RGBA);

}

.btn-copiar:active, 
.btn-desencriptar:active {
    box-shadow: inset 2px 2px 4px var(--Dark-blue),
    inset -3px -4px 8px var(--font);
    color: var(--medium-blue);
}

.tarjeta {
    width: 270px;
    height: 580px;
    background: var(--font);
    box-shadow: 10px 24px 32px -8px var(--Grey);
    position:relative;
    margin-top: 40px;
    border-radius: 32px;
    text-align: center;
}

.tarjeta-contenedor {
    width: 250px;
    margin: auto;
    margin-top: 50%;
    background: var(--font);

}

.img-muñeco {
    background: var(--font);

}

.text-uno {
    font-style:normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
    text-align: center;
    color: var(--Grey);
    background: var(--font);
}

.texto-dos {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    color: var(--Medium-Gray);    
    background: var(--font);
}

.evaluar {
    width: 100%;
    height: 485px;
    position: absolute;
    padding: 20px;
    top: 0;
    left: 0;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    color:var(--Gree);
    background: transparent;
    border-top-right-radius: 32px;
    border-top-left-radius: 32px;
    border: none;
    resize: none;    
}

.evaluar:focus {
    outline: none;

}

.btn-copiar {
    width: 224px;
    height: 67px;
    margin: 23px;
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
    padding: 24px;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    background: var(--white-blue);
    border: 1px solid var(--Dark-blue);
    border-radius: 20px;
    cursor: pointer;

}

.btn-encriptar:hover,
.btn-desencriptar:hover,
.btn-copiar:hover {
    transform: scale(0.97);
}

/*---footer---*/

footer {
    margin-top: 15px;
    padding: 10px;
    border-top: 2px solid var(--font);
    color: var(--Grey);
    text-align: center;
    height: 5px;
    font-size: 20px;
    font-weight: 700;
    color: var(--Grey);
}


.linkedin:hover {
    color: var(--font);
    opacity: 0.8;

}

.git:hover {
    color:var(--font);
    opacity: 0.6;
}

/*---media---*/

@media(max-width:1250px) {
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .encriptador {
        margin: 168px ppx 0px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .encriptador-contenedor {
        display: flex;
        align-items: center;
        position: inherit;

    }

    .encriptador-aviso {
        position: inherit;
        margin: 15px;

    }

    .tarjeta {
        width: 665px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .tarjeta-contenedor {
        display: block;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: absolute;
        bottom: 20%;
        font-size: 24px;
        font-weight: 700;

    }

    .img-muñeco {
        display: none;

    }

    .btn-copiar {
        position: inherit;
        width: 100%;

    }

    .evaluar {
        width: 100%;
        height: 210px;
        padding: 10px;
    }


}

@media(max-width:720px) {
    header .logo { 
        width: 100%;
        background: var(--white);
        padding:2px;
    }
    
    .encriptar {
        width: 90%;
        font-size: 24px;

    }

    .encriptador-contenedor {
        display: grid;
        gap: 21px;

    }
    
    .tarjeta {
        width: 90%;
    }

    .copyright {
        font-size: 20px;
    }
}