html.dark body,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark span,
html.dark li,
html.dark a,
html.dark button,
html.dark label,
html.dark small,
html.dark strong,
html.dark em,
html.dark figcaption,
html.dark blockquote,
html.dark dt,
html.dark dd {
    color: #ffffff !important;
}

html.dark input,
html.dark textarea,
html.dark select {
    color: #ffffff !important;
}

/* Global responsive baseline */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* Phone */
@media (max-width: 767px) {
    .text-7xl {
        font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
    }

    .text-6xl {
        font-size: clamp(2rem, 8.2vw, 3rem) !important;
    }

    .text-5xl {
        font-size: clamp(1.8rem, 7.2vw, 2.5rem) !important;
    }

    .text-4xl {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    }

    .text-3xl {
        font-size: clamp(1.3rem, 5.8vw, 1.75rem) !important;
    }

    .text-2xl {
        font-size: clamp(1.1rem, 5.2vw, 1.45rem) !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .p-8 {
        padding: 1rem !important;
    }

    .p-10,
    .p-12 {
        padding: 1.25rem !important;
    }

    .gap-12 {
        gap: 1.5rem !important;
    }

    #side-menu {
        width: min(88vw, 20rem) !important;
        padding: 1.25rem !important;
        overflow-y: auto !important;
    }

    #side-menu nav {
        gap: 1rem !important;
    }

    #side-menu nav a {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
    }

    #side-menu nav a img,
    #side-menu nav a span img {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .text-7xl {
        font-size: clamp(2.8rem, 6vw, 4rem) !important;
    }

    .text-6xl {
        font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
    }

    #side-menu {
        width: min(68vw, 22rem) !important;
        overflow-y: auto !important;
    }
}