body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
}

:root {
    --bg-color: #191a1e;
    --text-color: whitesmoke;
    --font-size-base: 16px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-base);
}

@font-face {
    font-family: 'Oswald';
    /*src: url('Media/FontOgnico/ognico-black_fontlot52ea.otf') format('opentype'); *!*/
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    /*src: url('Media/FontOgnico/ognico-bold_fontlotd694.otf') format('opentype'); *!*/
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: 'Oswald', sans-serif;
}

:root {
    --bg-color: #191a1e;
    --panel-bg: #121215;
    --box-bg: #1c1c1c;
    --text-main: whitesmoke;
    --text-muted: lightgray;

    --base-font-size: 16px;
}

html[data-theme="light"] {
    --bg-color: #f0f0f0;
    --panel-bg: #ffffff;
    --box-bg: #e4e4e4;
    --text-main: #121215;
    --text-muted: #444444;
}

/* --- ACCESSIBILITY OVERRIDES --- */

/* Kills all transitions and animations */
html[data-animations="disabled"] * {
    transition: none !important;
    animation: none !important;
}

/* Kills the 3D hover scale on tech badges and project cards */
html[data-hover="disabled"] * {
    transform: none !important;
    box-shadow: none !important;
}

/* Kills smooth scrolling in the scroll container */
html[data-scroll="disabled"] .SectionRight {
    scroll-behavior: auto !important;
}

/* (Future hook for hiding/pausing your videos when disabled) */
html[data-autoplay="disabled"] .PortfolioVideo {
    /* You can use JS to check this attribute and pause them permanently */
    display: none;
}

/* (Future hook for forcing standard cursor) */
html[data-cursor="disabled"] * {
    cursor: auto !important;
}




body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-size: var(--base-font-size);
}


.Main {
    display: flex;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    overscroll-behavior: none;
}


.badge-godot {
    border-color: rgba(71, 140, 191, 0.5);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgba(71, 140, 191, 0.25) 100%);
}
@media (hover: hover) {
    .badge-godot:hover {
        border-color: rgba(71, 140, 191, 1);
        box-shadow: 0 4px 12px rgba(71, 140, 191, 0.4);
    }
}

.badge-js {
    border-color: rgba(247, 223, 30, 0.4);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgba(247, 223, 30, 0.2) 100%);
}
@media (hover: hover) {
    .badge-js:hover {
        border-color: rgba(247, 223, 30, 1);
        box-shadow: 0 4px 12px rgba(247, 223, 30, 0.3);
    }
}

.badge-flutter {
    border-color: rgba(69, 209, 253, 0.4);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgba(69, 209, 253, 0.2) 100%);
}
@media (hover: hover) {
    .badge-flutter:hover {
        border-color: rgba(69, 209, 253, 1);
        box-shadow: 0 4px 12px rgba(69, 209, 253, 0.4);
    }
}

.badge-rust {
    border-color: rgba(222, 165, 132, 0.4);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgba(222, 165, 132, 0.2) 100%);
}
@media (hover: hover) {
    .badge-rust:hover {
        border-color: rgba(222, 165, 132, 1);
        box-shadow: 0 4px 12px rgba(222, 165, 132, 0.3);
    }
}

.badge-html {
    border-color: rgb(215 7 1 / 0.47);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgb(117 1 0 / 0.47) 100%);
}
@media (hover: hover) {
    .badge-html:hover {
        border-color: rgb(255 5 5);
        box-shadow: 0 4px 12px rgb(215 7 1 / 0.47);
    }
}

.badge-css {
    border-color: rgb(0 41 191 / 0.47);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgb(0 23 117 / 0.47) 100%);
}
@media (hover: hover) {
    .badge-css:hover {
        border-color: rgb(1 87 234);
        box-shadow: 0 4px 12px rgb(0 41 191 / 0.47);
    }
}

.badge-solo {
    border-color: rgb(215 7 1 / 0.47);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgb(117 1 0 / 0.47) 100%);
}
@media (hover: hover) {
    .badge-solo:hover {
        border-color: rgb(255 5 5);
        box-shadow: 0 4px 12px rgb(215 7 1 / 0.47);
    }
}

.badge-group {
    border-color: rgb(0 41 191 / 0.47);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgb(0 23 117 / 0.47) 100%);
}
@media (hover: hover) {
    .badge-group:hover {
        border-color: rgb(1 87 234);
        box-shadow: 0 4px 12px rgb(0 41 191 / 0.47);
    }
}

.badge-thesis {
    border-color: rgb(255 222 54 / 0.95);
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 30%, rgb(255 218 2 / 0.47) 100%);
}
@media (hover: hover) {
    .badge-thesis:hover {
        border-color: rgb(255 226 93);
        box-shadow: 0 4px 12px rgb(255 222 54 / 0.95);
    }
}