body {
    min-height: 100vh;
}

body > .content {
    padding: 10px;
}

body, .modal-card-body {
    background-color: hsl(0, 0%, 21%);
    color: hsl(0, 0%, 96%);
}

.footer, .modal-card-head {
    background-color: hsl(0, 0%, 29%);
    color: hsl(0, 0%, 96%);
}

strong {
    color: hsl(0, 0%, 86%);
}

a {
    color: hsl(216, 73%, 72%);
}

input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.content {
    max-width: 1034px;
    margin: 0 auto;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .label, .modal-card-title {
    color: hsl(0, 0%, 96%);
}

.check-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.check-container label {
    text-align: center;
}

.age_division-field .check-container label {
    width: 33%;   
}

.format-field .check-container label {
    width: 49%;   
}

.check-container input[type="radio"]:checked + label {
    background-color: hsl(171, 100%, 41%);
    border-color: transparent;
    color: #fff;
}

.radio:hover {
    color: hsl(0, 0%, 96%);
}

#form .control:not(:last-child) {
    margin-bottom: 20px;
}

.field.is-horizontal {
    display: flex;
    align-items: center;
}

.trainer_data-section, .pokemon-section > div, .trainers-section > div, .energy-section > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.trainer_data-section > *, .pokemon-section > * > *, .trainers-section > * > *, .energy-section > * > * {
    width: 48%;
}

.form-section h4, .form-section h6, .age_division-field, .format-field {
    width: 100%;
}

.birth_date_day-field, .birth_date_month-field, .birth_date_year-field, .set-field, .coll-field, .reg-field {
    width: 31%;
}

.pokemon_qty-field, .trainer_qty-field, .energy_qty-field {
    width: 18%;
}

.pokemon_name-field, .trainer_name-field, .energy_name-field {
    width: 78%;
}

#top {
    display: none;
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    font-size: 70px;
}

@media (max-width: 1500px) {
    .pdf-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pdf-container > * {
        margin: 2px 4px;
    }

    .field.is-horizontal {
        display: block;
    }
}