@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) {
    .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(4vw, 56px);
        color: #40441F;
    }

    .subsection {
        width: 100%;
        display: flex;
        justify-content: space-around;
        gap: 20px;
    }

    .description-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20px;
        border-radius: 30px;
        background-color: #B4BBAB;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.15);
    }

    .description-container p, ul {
        font-size: min(2vw, 22px)!important;
        line-height: min(2.4vw, 30px)!important;
        margin-bottom: 20px!important;
        color: #474E0D;
    }

    ul {
        padding-left: 40px!important;
    }

    li {
        list-style: disc;
    }

    .table {
        border: 0;
        border-collapse: separate;
        border-radius: 30px;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }
    
    .table tr:last-child td {
        white-space: pre;
    }

    .table td, .table th {
        font-size: min(2vw, 22px);
        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;
    }

    .thumbnail-container {
        overflow: hidden;
        flex-shrink: 0;
        border-radius: 30px;
        background-color: #DFDFDF;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.15);
    }

    .thumbnail {
        height: 80vh;
        margin-top: -50px;
    }

    .photo-inspector-button {
        position: relative;
        width: fit-content;
        top: 20px;
        left: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        border-style: solid;
        border-width: 2px;
        border-radius: 30px;
        border-color: #40441F;
        padding: 10px;
        transition: all 0.2s;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .photo-inspector-button:hover {
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 1);
    }

    .icon-magnifier {
        height: 1.5em;
        width: 1.5em;
        filter: brightness(0) saturate(100%) invert(22%) sepia(59%) saturate(388%) hue-rotate(27deg) brightness(93%) contrast(91%);
    }

    .text-magnifier {
        color: #40441F;
        font-size: min(2vw, 22px)
    }

    .button-container {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .button {
        width: 350px;
        padding: 15px 40px;
        border-radius: 30px;
        font-size: max(1.8vw, 22px);
        text-align: center;
        text-decoration: none;
        color: #FFFFFF;
        background-color: #687852;
        transition: all 0.2s;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .button:hover {
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 1);
    }

    .images-container {
        border-radius: 30px;
    }

    .image {
        width: 100%;
        border-radius: 30px;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.15);
    }

    .photo-inspector-blur {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        z-index: 1;
    }

    .photo-inspector-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        z-index: 2;
        padding: 2.5%;
    }

    .photo-inspector-container .icon {
        height: 1.5em;
        width: 1.5em;
        filter: brightness(0) saturate(100%) invert(22%) sepia(59%) saturate(388%) hue-rotate(27deg) brightness(93%) contrast(91%);
    }

    .back-button, .previous-button, .next-button {
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        border-style: solid;
        border-width: 2px;
        border-radius: 30px;
        border-color: #40441F;
        background-color: #f5f5f7;
        padding: 10px 20px;
        transition: all 0.2s;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .back-button:hover, .previous-button:hover, .next-button:hover {
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 1);
    }

    .back-button p, .previous-button p, .next-button p {
        font-size: min(2vw, 22px);
        color: #40441F;
    }

    .current-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5vw;
        margin-top: 20px;
    }

    .current-image {
        height: 80vh;
        border-radius: 30px;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .counter-text {
        text-align: center;
        margin-top: 20px;
        font-size: min(2vw, 22px);
        color: #40441F;
    }

}

/* Mobile */
@media only screen and (max-width: 800px) {
    .section {
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 20px auto;
        margin-top: 89px;
        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(6vw, 34px);
        color: #40441F;
    }

    .subsection {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 20px;
    }

    .description-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20px;
        border-radius: 30px;
        background-color: #B4BBAB;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.15);
    }

    .description-container p, ul {
        font-size: min(5vw, 34px)!important;
        line-height: min(6vw, 32px)!important;
        margin-bottom: 20px!important;
        color: #474E0D;
    }

    ul {
        padding-left: 40px!important;
    }

    li {
        list-style: disc;
    }

    .table {
        border: 0;
        border-collapse: separate;
    }

    .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: #f5f5f7;
    }

    .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;
    }

    .thumbnail-container {
        border-radius: 30px;
        background-color: #B4BBAB;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.15);
    }

    .photo-inspector-button {
        display: none;
    }

    .thumbnail {
        width: 100%;
        border-radius: 30px;
    }

    .button-container {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .button {
        width: 350px;
        padding: 15px 30px;
        border-radius: 30px;
        font-size: min(5vw, 34px);
        text-align: center;
        text-decoration: none;
        color: #FFFFFF;
        background-color: #687852;
        transition: all 0.2s;
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 0.6);
    }

    .section-button:hover {
        box-shadow: 0 0 15px -6px rgba(0, 0, 0, 1);
    }

    .images-container {
        background-color: #B4BBAB;
        padding: 20px;
        border-radius: 30px;
    }

    .image {
        width: 100%;
        border-radius: 30px;
    }

    .photo-inspector-blur {
        display: none;
    }

    .photo-inspector-container {
        display: none;
    }
}