/* Francisco Nassif - Infozero - 2024 */
/* Escritorio */
.main-container{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:#212121;
    gap:10px;
}
.infozero a,a:visited,a:hover{
    font-family: Inter-SemiBold, Arial, sans-serif;
    font-size: 12px;
    color:#525252;
    text-decoration: none;
}

.container-a{
    background-color: white;
    padding: 40px;
    border-radius: 5px;
    display: flex;
    gap: 40px;
}
.container-a img{
    width: 350px;
    height: 350px;
}
.container-a form{
    width: 350px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:15px;
}
.container-a form label{
    font-family: Inter-SemiBold, Arial, sans-serif;
    font-size: 40px;
}
.container-a form #nota{
    font-family: Inter-Light, Arial, sans-serif;
    font-size: 12px;
}
.container-a form .values{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.container-a form .field{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.container-a form .field label{
    font-family: Inter-Regular, Arial, sans-serif;
    font-size: 18px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type=number] {
    -moz-appearance:textfield;
}

.container-a form .field input{
    font-family: Inter-Regular, Arial, sans-serif;
    font-size: 15px;
    height: 35px;
    color: #5c5c5c;
    outline: none;
    background-color: rgb(250, 250, 250);
    border: 1px solid rgb(211, 211, 211);
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
.container-a form .field input:hover{
    border: 1px solid #ff6f3c;
    cursor:pointer;
}
.container-a form .field input:focus{
    border: 2px solid #ff6f3c;
}
.container-a form .error{
    font-family: Inter-SemiBold, Arial, sans-serif;
    font-size: 13px;
    color: red;
}
.container-a form input[type=submit]{
    background-color: #ff6f3c;
    outline:none;
    border:none;
    height: 40px;
    border-radius: 5px;
    color:white;
    font-family: Inter-Light, Arial, sans-serif;
    font-size: 15px;
}
.container-a form input[type=submit]:hover{
    background-color: #fa6028;
    cursor:pointer;
}
.container-a form input[type=submit]:active{
    background-color: #e75520;
}

/* Dispositivos móviles grandes */
@media (max-width:1080px){
    .main-container{
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#212121;
        gap:3vw;
    }
    .infozero a,a:visited,a:hover{
        font-family: Inter-SemiBold, Arial, sans-serif;
        font-size: 3vw;
        color:#525252;
        text-decoration: none;
    }

    .container-a{
        background-color: white;
        padding: 4vw;
        padding-top: 6vw;
        padding-bottom: 6vw;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 75vw;
        gap: 40px;
    }
    .container-a img{
        width: 40vw;
        height: 40vw;
    }
    .container-a form{
        width: 70vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:5vw;
    }
    .container-a form label{
        font-family: Inter-SemiBold, Arial, sans-serif;
        font-size: 8vw;
    }
    .container-a form #title{
        text-align: center;
    }
    .container-a form #nota{
        font-family: Inter-Light, Arial, sans-serif;
        font-size: 3vw;
    }
    .container-a form .values{
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }
    .container-a form .field{
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }
    .container-a form .field label{
        font-family: Inter-Regular, Arial, sans-serif;
        font-size: 3.9vw;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type=number] {
        -moz-appearance:textfield;
    }

    .container-a form .field input{
        font-family: Inter-Regular, Arial, sans-serif;
        font-size: 3.5vw;
        height: 2.5em;
        color: #5c5c5c;
        outline: none;
        background-color: rgb(250, 250, 250);
        border: 1px solid rgb(211, 211, 211);
        border-radius: 5px;
        padding-left: 0.8em;
        padding-right: 0.8em;
    }
    .container-a form .field input:hover{
        border: 1px solid #ff6f3c;
        cursor:pointer;
    }
    .container-a form .field input:focus{
        border: 2px solid #ff6f3c;
    }
    .container-a form .error{
        font-family: Inter-SemiBold, Arial, sans-serif;
        font-size: 3.5vw;
        color: red;
    }
    .container-a form input[type=submit]{
        background-color: #ff6f3c;
        outline:none;
        border:none;
        height: 2.5em;
        border-radius: 5px;
        color:white;
        font-family: Inter-Light, Arial, sans-serif;
        font-size: 3.5vw;
    }
    .container-a form input[type=submit]:hover{
        background-color: #fa6028;
        cursor:pointer;
    }
    .container-a form input[type=submit]:active{
        background-color: #e75520;
    }
}