html{
    background-color: #000000;
    box-sizing: border-box;
    font-size: 62.5%; /** Reset para REMS - 62.5% = 10px de 16px **/
}
*, *:before, *:after {
    box-sizing: inherit;
}
body{
    font-family: 'Lato', sans-serif;
    font-size: 1.6rem;
    line-height: 2;
}

h1 {
    color: white;
    font-size: 3.8rem;
}

h2 {
    color: #ffffff;
    font-size: 3.4rem;
}

button {
    background-color: #01aad4;
    color: white;
    font-weight: 700;
    text-decoration: none;
    padding: 1rem 3rem;
    display: inline-block;
    text-align: center;
    border: none;
    border-radius: 1rem;
    display: block;
    transition: transform 0.2s ease-in;
}

button:hover {
    cursor: pointer;
    transform: translateY(-5px);
}

input:not([type="submit"], [type="checkbox"], [type="radio"]),
textarea,
select {
    padding: 1rem;
    display: block;
    width: 100%;
    background-color: #e1e1e1;
    margin-bottom: 2rem;
    border: none;
    border-radius: 1rem;
}

input[type="checkbox"], input[type="radio"]{
    max-width: 10%;
    max-height: 10%;
}

label {
    display: flex;
}

.panel {
    display: inline-block;
    background-color: #b1b1b1;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 1rem;
    min-width: 350px;
}

.display-results {
    padding: 1rem;
    display: block;
    width: 100%;
    background-color: #e1e1e1;
    margin-bottom: 2rem;
    border: none;
    border-radius: 1rem;
}

.calculate-button {
    align-items: center; 
    justify-content: center; 
    display: flex;
}

.stat-block {
    display: block;
    padding: 10px;
    margin: 5px;
}

.final-stats{
    display: block;
    background-color: #e1e1e1;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 1rem;
}

.move-select {
    border: none;
    border-radius: 1rem;
}

.move-info {
    border: none;
    border-radius: 1rem;
}

.times-hit {
    border: none;
    border-radius: 1rem;
}

.field-side{
    display: inline-block;
    padding: 5px 20px 5px 20px;
}