:root {
    --main_color: #021f4f;
    --bg_color:#011637;
    --aux_color:#FCD543;
  }


body {
    position: relative;
    margin: 0;
    --s: 100px;  
    --c1: var(--main_color);
    --c2: var(--bg_color);
    
    --_g: 
        var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
        var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
    background:
        radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
        radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
        var(--c1);
    background-size: var(--s) var(--s);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    }



header {
    background-color: var(--main_color);
    padding-bottom: 2%;
    margin-bottom: 3%;       
}

img.logo {
    display: inline-block;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    vertical-align: middle;
}

@media (min-width:481px) {
    footer {
        margin-top: 10vw;
        margin-bottom: 5vw;
        

    }

    footer p {
        font-size: 10vw;
        font-family: Times, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 2.0vw;
        color: var(--aux_color);
    }

    #card {
        background-color: white;
        width:70%;

        padding: 3% 0 1% 0;
        vertical-align: middle;
    }

    #card_img {
        border-style: solid;
        border-color: black;
        border-width: thin;
        width: 90%;
    }

    #card_txt {
        margin-top: 3%;
        font-size: 1.5vw;
        color:black;
        margin-left: 5%;
        margin-right: 5%;
    }

    #personalizado {
        aspect-ratio: 2.5;
        width:10%;
        vertical-align: top;
    }

    #pass_div {
        display: block;
        margin-bottom: 5%;
        width: 70%;
    }

    #textarea {
        width: 80%;
        margin-right: 5%;
        aspect-ratio: 10;
    }

    .aligned {
        width: 75%;
        margin: 2% 2% 0 2%;
        display: inline-block;
    }

    .area_e_emb {
        width: 15%;
        aspect-ratio: 4/1;
        margin: 2%;
    }

    .ant_mostr_prox {
        width: 15%;
        aspect-ratio: 4/1;
        margin: 2%;
    }

    .colored_item {
        color:var(--aux_color);
        background-color: var(--main_color);
        border-color: var(--aux_color);
    }

    .text {
        font-family: Times, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 1.0vw;
        color:var(--aux_color);
    }



    .passfield {
        width: 40%;
        margin-top: 10vw;
        font-size: 1.5vw;
        display: block;
    }

    .passbutton {
        width: 15%;
        margin-top: 2vw;
        font-size: 1.5vw;
        display: block;
        aspect-ratio: 5;
    }

    .box * {
        margin: 1%;
    }

    .single_line {
        aspect-ratio: 15;
    }

    .button {
        aspect-ratio: 6;
        width: 50%;
    }

    .box {
        width: 50%;
    }

    #menu{
        list-style:none;
        padding:0;
        margin:0 66.5% 3vw 0;
        font-family: Times, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 1.0vw;
        border-spacing: 10vw;
        li {
                display:inline-block;
                border: thin solid var(--aux_color);
                background:var(--main_color);
                color:var(--aux_color);
                text-decoration: none;
                position:relative;
                line-height: 3vw;
                width: 20vw;
                text-align: center;
                &:hover{
                    background-color: #3d6fc3;
                }
                ul {
                    position:absolute;
                }
            }
            ul {
                border-top:0 solid #000000;
                list-style:none;
                        padding:0;
                        margin:0;
                li {
                    ul {
                    margin-top: -3.05vw;
                    margin-left: 100%;
                    }
                }
            }
            #drop-down{
            display:none;
            }
        }

}



@media (max-width:480px) {
    
    
    footer {
        margin: 20% 0 20% 0;
    }

    footer p {
        font-size: 20vw;
        font-family: Times, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 5vw;
        color: var(--aux_color);
    }

    
    #card {
        background-color: white;
        width:100%;
    
        padding: 5% 0 5% 0;
        vertical-align: middle;
    }
    
    #card_img {
        border-style: solid;
        border-color: black;
        border-width: thin;
        width: 95%;
    }
    
    #card_txt {
        margin-bottom: 1%;
        font-size: 3.75vw;
        color:black;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    /* .aligned {
        width: 100%;
        margin: 10% 0 0 0;
        display: inline-block;
    } */
    
    .area_e_emb {
        width: 30vw;
        height: 10vw;
        margin: 0;
        display: inline-block;
    }
    
    .ant_mostr_prox {
        width: 24vw;
        aspect-ratio: 4/1;
        margin: 0 0 3vw 0;
    }
    
    .colored_item {
        color:var(--aux_color);
        background-color: var(--main_color);
        border-color: var(--aux_color);
    }
    
    .text {
        font-family: Times, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 3vw;
        color:var(--aux_color);
    }
    
    
    
    .textfield {
        width: 80%;
    }

    .passfield {
        width: 80%;
        margin-top: 10vw;
        font-size: 5.0vw;
        display: block;
    }

    .passbutton {
        width: 30%;
        margin-top: 2vw;
        font-size: 2.0vw;
        display: block;
        aspect-ratio: 5;
    }
    
    .box * {
        margin: 1%;
    }
    
    .single_line {
        aspect-ratio: 15;
    }
    
    .button {
        aspect-ratio: 6;
        width: 50%;
    }
    
    .box {
        width: 100%;
    }

    #menu{
        list-style:none;
        padding:0;
        display: inline-block;
        margin:0 38vw 5vw 0;
        font-family: Times, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 3vw;
        li {
                display:inline-block;
                border: thin solid var(--aux_color);
                background:var(--main_color);
                color:var(--aux_color);
                text-decoration: none;
                position:relative;
                line-height: 10vw;
                width: 30vw;
                text-align: center;
                &:hover{
                    background-color: #3d6fc3;
                }
                ul {
                    position:absolute;
                }
            }
            ul {
                border-top:0 solid #000000;
                list-style:none;
                        padding:0;
                        margin:0;
                li {
                    ul {
                    margin-top: -10.3vw;
                    margin-left: 100%;
                    }
                }
            }
            #drop-down{
            display:none;
            }
        }
    
    
}