html, body {
    height: auto;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;

    background-color: white;
    color: black;
}

body.dark {
    background-color: #424242;
    color: white;
}


.main-button {
    box-sizing: border-box;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: black;
    transition: color 0.5s ease, background-color 0.5s ease;
    cursor: pointer;
}

.dark .main-button {
    color: #424242;
    background-color: white;
}

.sub-button {
    box-sizing: border-box;
    border: 1px solid black;     
    border-radius: 5px;
    color: black;
    background-color: white;
    transition: color 0.5s ease, background-color 0.5s ease;
    cursor: pointer;
}

.dark .sub-button {
    border: 1px solid white;
    color: white;
    background-color: #424242;
}


.hidden {
    display: none !important; 
}

.chosen {
    color: white;
    background-color: black;
    border: none;
}

.dark .chosen {
    color: #424242;
    background-color: white;
}

.table {
    width: 80%;
    max-width: 1000px;
    height: 650px;
    margin: 20px auto 0px auto;
    border-radius: 15px;
    overflow: hidden;
    box-sizing: padding-box;
    border: 2px solid lightgray;
}

.dark .table {
    border: 2px solid #757575;
}

.table__item {
    width: 100%;
    height: calc(650px/14);
    background-color: white;
    display: flex;    
}

.dark .table__item {
    background-color: #424242;
}

.table__item * {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;  
}

.dark .table__item * {
    color: white;
}

.odd {
    background-color: lightgray;
}

.dark .odd {
    background-color: #757575;
}


@media (hover: hover) {
    .main-button:hover {
       color: black;
        background-color:white;
        border: 1px solid black;
    }

    .dark .main-button:hover {
        color: white;
        background-color:#424242;
        border: 1px solid white;
    }

    .sub-button:hover {
        color: white;
        background-color: black;
        border: none;
    }

    .dark .sub-button:hover {
        color: #424242;
        background-color: white;
        border: none;
    }
}

@media (max-width: 1110px) {
.table {
    width: 90%;
}

.table__item * {
    font-size: 18px;  
}
}


@media (max-width: 480px) {
.table__item * {
    font-size: 16px;  
}

}