/* Reset & Base Styles */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    font-family: var(--font);
    background-color: var(--background);
    width: 100dvw;
    height: 100dvh;
}

/* Header Style */
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    box-shadow: 0 0 0 var(--border-width) var(--border);
    padding: 0 var(--content-width);
}

.header-full-desktop {
    display: flex;
    gap: var(--nav-gap);
}

.header-full-mobile {
    display: none;
}
.header-full-mobile label svg {
    margin-top: 1dvh;
    width: 8dvh;
    height: 8dvh;
    fill: var(--primary-text);
    padding: 1dvh;
}

.header-full-mobile label svg:hover {
    cursor: pointer;
}

@media (orientation: portrait) {
    .header-full-desktop {
        display: none;
    }

    .header-full-mobile {
        display: flex;
    }
}

.logo {
    font-size: var(--font-size-logo);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: var(--primary-text);
}

.lang-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-header);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: var(--primary-text);
    gap: var(--header-lang-gap);
}

.lang-btn:hover {
    cursor: pointer;
}

.lang-btn-svg {
    width: var(--header-lang-svg-size);
    height: var(--header-lang-svg-size);
}

/*  Language Sidebar Toggle (Checkbox Hack) */
#language-sidebar-id {
    display: none;
}

#language-sidebar-checkbox-id:checked ~ #language-sidebar-id {
    display: flex;
}

/*  Menu  Sidebar Toggle (Checkbox Hack) */
#menu-sidebar-id {
    display: none;
}

#menu-sidebar-checkbox-id:checked ~ #menu-sidebar-id {
    display: flex;
}

/* Sidebar Container Styles */
aside {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.5);
    width: 100dvw;
    height: 100dvh;
}

/* The dark clickable background part of the sidebar (left side) */
.aside-darkzone {
    display: block;
    width: 50%;
    height: 100%;
}

@media (orientation: portrait) {
    .aside-darkzone {
        width: 0%;
    }
}

/* Sidebar Slide-In Animations */
@keyframes sidebarAnimationDesktop {
    from {
        width: 0dvw;
    }

    to {
        width: 50dvw;
    }
}

@keyframes sidebarAnimationMobile {
    from {
        width: 0dvw;
    }

    to {
        width: 100dvw;
    }
}

/* Sidebar Content */
.sidebar {
    display: flex;
    flex-direction: column;
    font-size: 2.25dvh;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    background-color: var(--background);
    color: var(--primary-text);
    height: 100dvh;
    animation: sidebarAnimationDesktop 0.3s forwards;
    overflow: hidden;
}


@media (orientation: portrait) {
    .sidebar {
        animation: sidebarAnimationMobile 0.3s forwards;
    }
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 8.8dvh; /* Using the same height as for the header does not work */
    box-shadow: 0 0 0 0.14dvh var(--border);
    padding: 0 3dvh;
}

.sidebar-header label svg {
    margin-top: 1dvh;
    width: 6dvh;
    height: 6dvh;
    border-radius: 50%;
    fill: var(--primary-text);
    padding: 1dvh;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-header label svg:hover {
    cursor: pointer;
    box-shadow: 0 0 0 0.14dvh var(--border);
    background-color: var(--surface);
}

/* Sidebar Body */
.sidebar-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 0.14dvh var(--border);
    padding: 3dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1.5dvh 3dvh;
    margin: 1dvh 0;
    border-radius: 4dvh;
    gap: 1.25dvh;
    text-decoration: none;
    color: var(--primary-text);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-btn svg {
    width: 4dvh;
    height: 4dvh;
}

.sidebar-btn-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1dvh;
}

.sidebar-btn-svg {
    width: 4dvh;
    height: 4dvh;
}

.sidebar-btn:hover {
    cursor: pointer;
    box-shadow: 0 0 0 0.14dvh var(--border);
    background-color: var(--surface);
}

.sidebar-btn-active {
    justify-content: space-between;
    box-shadow: 0 0 0 0.14dvh var(--border);
}

/* Button */
.btn {
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-bold);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: min(1.5dvh, 14px) min(3dvh, 28px);
    margin: min(1dvh, 10px) 0;
    border-radius: var(--border-radius);
    gap: min(1.25dvh, 12px);
    text-decoration: none;
    color: var(--primary-text);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
    cursor: pointer;
    box-shadow: 0 0 0 var(--border-width) var(--border);
    background-color: var(--surface);
}

/* Main root */
.main-root {
    display: flex;
    flex-direction: column;
    padding: 0 var(--content-width);
    height: calc(100dvh - var(--header-height));
    background-position: top center;
    background-image: var(--background-snake-gif);
    background-repeat: no-repeat;
    background-size: min(70dvw, 1100px);
    image-rendering: pixelated;
}

@media (orientation: portrait) {
    .main-root {
        background-position: top center;
        background-size: contain;
    }
}

.slogan-box {
    height: min(8dvh, 60px);
    margin-top: min(70dvh, 700px);
    overflow: hidden;
    color: var(--primary-text);
}

@keyframes sloganMove {
    0% {
        transform: translateY(-9%);
    }
    15%,
    25% {
        transform: translateY(-34%);
    }
    40%,
    50% {
        transform: translateY(-59%);
    }
    65%,
    75% {
        transform: translateY(-84%);
    }
    90%,
    100% {
        transform: translateY(-9%);
    }
}

.slogan-box ul {
    animation: sloganMove 8s infinite;
}

.slogan-box li {
    font-size: var(--font-size-logo);
    font-weight: var(--font-weight-bold);
    padding: min(10dvh, 74px) 0;
    display: flex;
    align-items: center;
    list-style: none;
}

/* Main Content */
.main-content {
    display: flex;
    flex-direction: column;
    padding: 0 var(--content-width);
    padding-bottom: 20dvh;
    height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    color: var(--primary-text);
    text-align: justify;
}

@media (orientation: portrait) {
    .main-content {
        text-align: start;
    }
}

.main-content section {
    margin-top: var(--section-margin-top);
}

.main-content strong {
    font-weight: var(--font-weight-bold);
}

.main-content a {
    text-decoration: none;
    color: var(--hyperlink-color);
}

.main-content a:hover {
    text-decoration: underline;
}

.main-content h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    padding: var(--main-content-padding);
}

.main-content h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    padding: var(--main-content-padding);
}

.main-content h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    padding: var(--main-content-padding);
}

.main-content hr {
    border: none;
    background: none;
    box-shadow: 0 0 0 var(--border-width) var(--border);
    margin-bottom: var(--hr-margin-bottom);
}

.main-content p {
    font-size: var(--font-size-p);
    font-weight: var(--font-weight-normal);
    padding-bottom: var(--p-padding-bottom);
}

.main-content address {
    font-size: var(--font-size-p);
    font-weight: var(--font-weight-normal);
    padding-bottom: var(--p-padding-bottom);
    font-style: normal;
}

.main-content ul {
    margin-left: var(--ul-margin-left);
    padding-bottom: var(--ul-padding-bottom);
}

.main-content ul li {
    font-size: var(--font-size-p);
    font-weight: var(--font-weight-normal);
    padding-bottom: var(--li-padding-bottom);
}

.main-content ul li::marker {
    font-size: var(--font-size-p);
}

.main-content .cards {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--cards-gap);
}

@media (max-width: 1200px), (orientation: portrait) {
    .main-content .cards {
        grid-template-columns: 100%;
    }
}

.main-content .cards li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 var(--border-width) var(--border);
    height: var(--cards-height);
    padding: 0 min(5dvh, 38px);
}

 .main-content .card-upper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

 .main-content .card-icon {
    margin-top: min(5dvh, 38px);
    margin-bottom: min(1dvh, 8px);
    width: min(20dvh, 148px);
    height: min(20dvh, 148px);
}

.main-content .card-lower {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 6dvh;
}

.main-content .btn {
    color: var(--primary-text);
}

.main-content .btn:hover {
    text-decoration: none;
}