@charset "UTF-8";

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
}

body {
    max-width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;

}

main {
    border: 2px solid black;
    border-radius: 20px;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    justify-items: center;
}

main form {
  width: 350px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 20px;

}

main form div {
    width: 100%;
}


main form input {
    width: 100%;
    text-align: center;
}

main form label {
    font-weight: bolder;
    text-align: center;
    line-height: 31px;
}



form div#div-cx-nota1, div#div-cx-nota2{
    display: grid;
    grid-template-columns: 30% 70%;
}

form div#div-cx-resultado {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    justify-items: center;
}

#div-cx-resultado span:nth-child(1) {
    font-weight: bolder;
}

#div-cx-resultado span:nth-child(2){
    background-color: lightgray;
    width: 100%;
    padding: 5px 10px;
    text-align: center;
}

form div#div-cx-botoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

form button {
    padding: 5px 0px;
}

form button#btn-calcular {
    background-color: #33cc33;
    border: none;
    border-radius: 5px;
}

form button#btn-limpar-dados {
    background-color:  #0086b6;
    border: none;
    border-radius: 5px;
}



@media (max-width: 450px){

    body {
        background-color: lightgray;
    }
    
    main {
        background-color: white;
        border: none;
        width: 100vw;
    }


    form div#div-cx-botoes {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }
}