@font-face {
    font-family: "Roboto Slab";
    src: url('../fonts/Roboto_Slab.ttf')
    format('truetype');
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
    background-color: #f5f5f7;
}

body {
    margin: 0;
    font-family: 'Roboto Slab', sans-serif!important;
    box-sizing: border-box;
}

/* Desktop */
@media only screen and (min-width: 800px) {
    .sub-title {
        text-align: center;
        font-size: 3.5vw;
        color: #525B28;
    }

    .section {
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 20px auto;
        padding: 20px;
        border-radius: 30px;
        background-color: #A6B099;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .section-title {
        font-size: min(3vw, 56px);
        color: #40441F;
    }

    .table {
        border: 0;
        border-collapse: separate;
        border-radius: 30px;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .table td, .table th {
        font-size: 1.5vw;
        color: #333;
        overflow: hidden;
        word-break: normal;
        text-align: center;
        vertical-align: top;
        min-width: 50px;
    }

    .table td {
        padding: 10px 10px;
        background-color: #EAEAEA;
    }

    .table td:nth-child(even) {
        border-style: solid;
        border-width: 0 1px 0 1px;
        border-color: #ccc;
    }

    .table th {
        padding: 10px 1px;
        color: #fff;
        background-color: #687852;
    }

    .table th:first-child{
        border-radius: 30px 0 0 0;
    }

    .table th:last-child{
        border-radius: 0 30px 0 0;
    }

    .table tr:last-child td:first-child {
        border-radius: 0 0 0 30px;
    }

    .table tr:last-child td:last-child {
        border-radius: 0 0 30px 0;
    }
}

/* Mobile */
@media only screen and (max-width: 800px) {
    .sub-title {
        text-align: center;
        font-size: 3.5vw;
        color: #525B28;
    }

    .section {
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 20px auto;
        padding: 20px;
        border-radius: 30px;
        background-color: #A6B099;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .section-title {
        font-size: min(3vw, 56px);
        color: #40441F;
    }

    .table {
        border: 0;
        border-collapse: separate;
        border-radius: 30px;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .table td, .table th {
        font-size: min(2.5vw, 34px)!important;
        color: #333;
        overflow: hidden;
        word-break: normal;
        text-align: center;
        vertical-align: top;
    }

    .table td {
        padding: 10px 10px;
        background-color: #EAEAEA;
    }

    .table td:nth-child(even) {
        border-style: solid;
        border-width: 0 1px 0 1px;
        border-color: #ccc;
    }

    .table th {
        padding: 10px 1px;
        color: #fff;
        background-color: #687852;
    }

    .table th:first-child{
        border-radius: 30px 0 0 0;
    }

    .table th:last-child{
        border-radius: 0 30px 0 0;
    }

    .table tr:last-child td:first-child {
        border-radius: 0 0 0 30px;
    }

    .table tr:last-child td:last-child {
        border-radius: 0 0 30px 0;
    }
}