* {
    box-sizing: border-box;
}

:root {
    --grisoscuro: #222222;
    --grisoscuro2: #262626;
    --grisoscurotrasparente: rgba(38, 38, 38, 0.911);
    --negro: #0f0f0f;
    --rojo: #d30d08;
    --rojotransparente: rgba(211, 11, 8, 0.452);
    --grisclaro: #ebebeb;
    --grisclaro2: #eeeeee;
    --grisclaro3: #d3d3d3;
    --grisclaro4: #707070;
    --blanco: #ffffff;
    --anchogeneral: 1140px
}

body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background-color: var(--negro);
    padding: 12px;
}


header form {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 4px;
}

header input,
header select {
    width: 100%;
    font-size: 1.2em;
}

header input[type="submit"] {
    background-color: var(--rojo);
    color: var(--blanco);
    border: 0px;
    border-radius: 3px;
    padding: 4px;
}

h1{
    color: var(--grisclaro4);
    text-align: center;
    margin: 0px;
    padding-bottom: 10px;
}


main {
    padding-right: 10px;
}

main ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

main i {
    color: var(--rojotransparente);
}

main h2 i {
    color: var(--rojo);
}

main h2 {
    background-color: var(--grisoscuro2);
    color: var(--grisclaro);
    padding: 6px;
    border-radius: 0px 0px 20px 0px;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

main h2 div:last-child {
    text-align: right;
    padding-right: 15px;
}

main>ul ul {
    margin: 15px;
    display: none;
}