* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
}


p {
    text-align: center;
}

h1 {
    text-align: center;
}

td {
    width: 5%;
    font-size: 0.66em;
    height: 7.14vh;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 4px;
}

.nometal {
    background-color: rgb(179, 214, 107);
    border-radius: 5%;
}

.nobre {
    background-color: rgb(106, 176, 222);
    border-radius: 5%;
}

.alcalinos {
    background-color: rgb(244, 200, 96);
    border-radius: 5%;
}

.alcalinosterr {
    background-color: rgb(239, 228, 91);
    border-radius: 5%;
}

.semimetal {
    background-color: rgb(111, 196, 188);
    border-radius: 5%;
}

.halogenio {
    background-color: rgb(168, 223, 243);
    border-radius: 5%;
}

.outrometal {
    background-color: rgb(162, 199, 211);
    border-radius: 5%;
}

.metaltrans {
    background-color: rgb(241, 176, 176);
    border-radius: 5%;
}

.lantanideos {
    background-color: rgb(152, 216, 225);
    border-radius: 5%;
}

.actinideos {
    background-color: rgb(226, 189, 217);
    border-radius: 5%;
}

.diminuicao {
    height: 2vh;
}

.legenda {
    text-align: left;
    font-size: 0.9em;
}

.quadnometal {
    color: rgb(179, 214, 107);
    font-size: 1.5em;
}

.quadmetalc {
    color: rgb(244, 200, 96);
    font-size: 1.5em;
}

.quadmetalsemi {
    color: rgb(111, 196, 188);
    font-size: 1.5em;
}

.quadmetaloutro {
    color: rgb(162, 199, 211);
    font-size: 1.5em;
}

.quadlanta {
    color: rgb(152, 216, 225);
    font-size: 1.5em;
}

.quadnobre {
    color: rgb(106, 176, 222);
    font-size: 1.5em;
}

.quadmetalalcter {
    color: rgb(239, 228, 91);
    font-size: 1.5em;
}

.quadhalo {
    color: rgb(168, 223, 243);
    font-size: 1.5em;
}

.quadmetaltrans {
    color: rgb(241, 176, 176);
    font-size: 1.5em;
}

.quadacti {
    color: rgb(226, 189, 217);
    font-size: 1.5em;
}

.troca {
    font-size: 1.5em;
    text-align: center;
    color: rgba(44, 44, 44, 0.966);
}

.title {
    font-size: 1.5em;
    font-weight: bold;
    color: black;
    text-align: center;
}