@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@title: Cormorant, serif;
@text: Nunito, sans-serif;
@logo: Monoton, serif;
@sombreado: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

/* Colores en Hex */
@color-1-dark: #030226;
@color-2-medium-dark: #090740;
@color-3-medium: #65648C;
@color-5-light: #D9BFA9;
@color-4-medium-light: #8C5D5D;

/* Colores en Hex */
@green: #66CDAA;
@morado: #43038c;
@gris-oscuro: #414141;
@gris-claro: #525252;
@blanco:white;
* {
    box-sizing: border-box;
    margin: 0 auto;
    text-decoration: none;
}

/* ocultar barras de scroll */
body::-webkit-scrollbar {
    display: none;

}

body {
    height: 100vh;

}

.grow:hover {
    transform: scale(1.01);
    transition: 60ms ease;
    overflow: hidden;
}

//------------ESTRUCTURA---------//
body {
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-columns: repeat(2, 1fr);
    //grid-auto-rows: minmax(auto, auto);
    grid-template-areas:
        "header header"
        "main main"
        "footer footer"
    ;
}

/*----HEADER------*/
header {
    grid-area: header;
    background-color: @gris-oscuro;
    border: 1px solid @gris-claro;
    border-width: 2px;
    z-index: 9;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 10vh;
    min-height: 52px;
    //background-color: @color-3-medium;
    box-shadow: 0 0 8px rgba(0, 0, 0, 1);


    .title {
        font-size: x-large;
        text-align: center;
        color: @green;
        font-size: 1.9em;
        font-family: Monoton, serif;
        text-size-adjust: 100%;
    }

    .social {
        text-align: center;
        color: @green;
    }

    .social a {
        display: inline-flex;
        margin-left: 10px;
        color: @green;

    }

    .social>a:hover {
        font-size: 17px;
        color: lighten(@green, 20%)
    }
}






main {
    grid-area: main;
    width: 100%;
    height: 80vh;
    background-color: @gris-claro;
    border: 1px solid @gris-oscuro;
    border-width: 2px;

    form {
        margin-top: 5%;
        width: 50%;
        background: @gris-oscuro;
        margin-left: auto;
        margin-right: auto;
        padding: 1%;
        border-radius: 5px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        height: 60%;





        .sectionRegister {
            margin-top: 2%;
            text-align: center;
            color: @green;
            *{
                box-sizing: border-box;
            }

            .sectionRegister p {
                font-size: 10px;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            }

            .sectionRegister input {
                height: 2%;
                width: 100%;
                
            }
        }

        .dataRegister>input {
            color: blanchedalmond;
            margin-top: 2%;
            margin-left: 35%;
            height: 35px;
            width: 30%;
            background-image: linear-gradient(315deg, @green 0%, @green 74%);
            overflow: hidden;
            border: 1px solid black;
            margin-bottom: 10px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            -webkit-transition-duration: 0.8s;
                /* Safari */
                transition-duration: 0.8s;

                &:hover {
                    background-color: lighten(@green, 15%);
                    color: @gris-oscuro;
                }

        }

        .dataRegister>a {
            text-align: center;
            font-size: 12px;
        }
    }
}
p{
    padding: 10px;
}

/*----FOOTER------*/
footer {
    grid-area: footer;
    position: relative;
    bottom: 0;
    height: 10vh;
    box-shadow: 0 0 8px rgba(0, 0, 0, 1);
    background-color: @gris-oscuro;
    width: 100%;
    display: flex;

    color: @green;

    a {
        text-decoration: none;

        &:link,
        &:visited,
        &:hover,
        &:active {
            text-decoration: none;
            color: @green;
        }
    }

    div {
        align-self: center;

    }
}