html,
body {
    max-width: 100%;
}

*,
*::before,
*::after {
    min-width: 0;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

@media (max-width: 420px) {
    html,
    body {
        overflow-x: hidden;
    }

    body {
        overflow-wrap: anywhere;
    }

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

    .px-8 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

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

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

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

    .gap-10,
    .gap-8 {
        gap: 1.25rem !important;
    }

    .py-24 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-20 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .py-16 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .text-8xl {
        font-size: 3.5rem !important;
        line-height: 1 !important;
    }

    .text-7xl {
        font-size: 3.125rem !important;
        line-height: 1.05 !important;
    }

    .text-6xl {
        font-size: 2.75rem !important;
        line-height: 1.08 !important;
    }

    .text-5xl {
        font-size: 2.35rem !important;
        line-height: 1.1 !important;
    }

    .text-4xl {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .rounded-3xl {
        border-radius: 1.25rem !important;
    }

    .w-72,
    .w-80,
    .w-96,
    .max-w-md,
    .max-w-lg,
    .max-w-xl,
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl {
        max-width: 100% !important;
    }

    .absolute.right-0.w-80 {
        right: -0.5rem !important;
        width: calc(100vw - 2rem) !important;
    }

    .fixed.w-72,
    .fixed.w-80,
    .fixed.w-96,
    [id="drawer"].w-72,
    [id="mobile-menu"].w-72 {
        width: min(18rem, 100vw) !important;
    }

    .columns-1,
    .columns-2,
    .columns-3,
    .columns-4 {
        column-gap: 1rem !important;
    }

    body.bg-cyberDark header .h-20 {
        gap: 0.75rem !important;
    }

    body.bg-cyberDark header .gap-3 {
        gap: 0.5rem !important;
    }

    body.bg-cyberDark header .gap-4 {
        gap: 0.5rem !important;
    }

    body.bg-cyberDark header .font-orbitron.text-lg {
        font-size: 0.8rem !important;
        line-height: 1rem !important;
    }

    body.bg-cyberDark header .text-\[8px\] {
        display: none !important;
    }

    body.bg-cyberDark #header-cart {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    body.bg-cyberDark #header-cart span:first-child {
        display: none !important;
    }

    body.bg-cyberDark header .w-10.h-10 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    body.theme-green #terminal-frame header > div:nth-child(2),
    body.theme-blue #terminal-frame header > div:nth-child(2),
    body.theme-orange #terminal-frame header > div:nth-child(2) {
        display: none !important;
    }

    body.theme-green #terminal-frame header,
    body.theme-blue #terminal-frame header,
    body.theme-orange #terminal-frame header {
        gap: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body.theme-green #terminal-frame footer > div:last-child span:not(#footer-clock),
    body.theme-blue #terminal-frame footer > div:last-child span:not(#footer-clock),
    body.theme-orange #terminal-frame footer > div:last-child span:not(#footer-clock) {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .grid-cols-2:not(.sm\:grid-cols-2):not(.md\:grid-cols-2):not(.lg\:grid-cols-2) {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .text-8xl {
        font-size: 3rem !important;
    }

    .text-7xl,
    .text-6xl {
        font-size: 2.5rem !important;
    }
}