* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 1rem;
}
:root {
    --color1: #780000;
    --color2: #c1121f;
    --color3: #003049;
    --color4: #669bbc;
    --color5: #fdf0d5;
    --spacing1: 1rem;
    --spacing2: 1.5rem;
    --spacing3: 2rem;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing1);
    padding-top: var(--spacing3);
    color: var(--color3);
    text-align: center;
}
/*PANEL PRINCIPAL Y TODOS SUS ELEMENTOS*/
section {
    background-color: var(--color5);
    max-width: 80vw;
    padding: var(--spacing1);
    display: flex;
    justify-content: center;
    gap: var(--spacing1);
    flex-wrap: wrap;
    text-align: center;
}
article {
    margin: var(--spacing1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing1);
    color: var(--color5);
    padding: var(--spacing2);
}
#red-team {
    background-color: var(--color1);
}
#blue-team {
    background-color: var(--color3);
}
#red-score {
    background-color: var(--color2);
    width: 100%;
    padding: var(--spacing2) 0;
    font-size: var(--spacing3);
    user-select: none;
}
#blue-score {
    background-color: var(--color4);
    width: 100%;
    padding: var(--spacing2) 0;
    font-size: var(--spacing3);
    user-select: none;
}
#sets-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#set-box-container {
    display: flex;
    gap: var(--spacing1);
}
.num-sets {
    color: var(--color5);
    padding: var(--spacing1);
    border-radius: 0.5rem;
}
#num-set-red-team {
    background-color: var(--color2);
}
#num-set-blue-team {
    background-color: var(--color4);
}
/*TABLA Y DE MÁS*/
table,
tr,
th,
td {
    padding: 0.2rem calc(var(--spacing3) * 0.6);
    border: 1px solid var(--color3);
    border-collapse: collapse;
    border-radius: 0;
    background-color: var(--color5);
}
th {
    color: var(--color5);
    background-color: var(--color3);
}
button {
    padding: 0.2rem var(--spacing3);
    border-radius: 0.2rem;
    color: var(--color5);
    background-color: var(--color2);
    border-color: var(--color1);
}
i {
    margin-top: var(--spacing3);
}
@media (max-width: 830px) {
    section {
        flex-direction: column;
        width: 80%;
    }
}