:root {
    --primary-color: #1e90ff;
    --background-color: rgb(239, 242, 227);
    --error-background: rgb(255, 174, 174);
    --error-border: rgb(75, 0, 0);
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    overflow-x: hidden;
    overflow-y: auto;

}

.container {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.7em;
    width: 95%;
    height: 90%;
    margin-top: 2%;
    margin-right: 1%;
}

.notices{
    font-size:0.7em;
    background-color: rgb(241, 241, 88);
    padding:1%;
}

.row {
    width: 90%;
    margin-left: 2%;
    height: 10%;
    margin-top: 5%;
}

.row input {
    height: 90%;
    width: 30%;
    text-align: center;
    margin-right: 5%;
    border: 1px solid var(--primary-color);
    font-size: 0.8em;
}

button {
    border: none;
    text-align: center;
    width: 100%;
    margin-left: 0%;
    height: 10%;
    font-size: 1em;
    margin-top: 5%;
    cursor: pointer;
}

#addRow {
    display: block;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

#calcolaMedia {
    background-color: var(--primary-color);
    color: var(--background-color);

}

hr {
    border: 1px solid var(--primary-color);
    opacity: 0.4;
}

.final-vote-value {
    font-weight: bold;
}

.error-row {
    display: none;
    background-color: var(--error-background);
    border: 1px solid var(--error-border);
    width: 100%;
    font-size: 5vw;
    height: auto;
}

@media only screen and (min-width: 500px) {
    .container {
        width:40%;
        max-width:400px;
        margin-left:35%;
    }

    .error-row {
        font-size:1em;
    }
}