:root {
    /* Light Theme */
    --theme-color: rgb(243, 243, 243);
    --theme-color-hover: rgb(230, 230, 230);
    --sidebar-color: rgb(216, 224, 209);
    --sidebar-color-hover: rgb(200, 210, 195);
    --sidebar-ui-color: rgb(174, 221, 129);
    --sidebar-font-color: rgb(21, 26, 34);
    --sidebar-active-color: rgb(107, 194, 53);
    --text-color: rgb(21, 26, 34);
    --text-color-secondary: rgb(60, 65, 70);
    --border-color: rgb(200, 200, 200);
    --border-radius: 8px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
    --window-width: 100vw;
    --window-height: 100vh;
}

/* Dark Theme */
[data-theme="dark"] {
    --theme-color: rgb(30, 35, 40);
    --theme-color-hover: rgb(40, 45, 50);
    --sidebar-color: rgb(45, 50, 55);
    --sidebar-color-hover: rgb(55, 60, 65);
    --sidebar-ui-color: rgb(120, 180, 80);
    --sidebar-font-color: rgb(220, 225, 230);
    --sidebar-active-color: rgb(140, 200, 90);
    --text-color: rgb(220, 225, 230);
    --text-color-secondary: rgb(180, 185, 190);
    --border-color: rgb(60, 65, 70);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.covert {
    display: none;
}

html, body {
    color: var(--text-color);
    background-color: var(--theme-color);
    font-family: "Lato", sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    transition: var(--transition);
}

body {
    overflow-y: hidden;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--theme-color-hover);
    border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb {
    background: var(--sidebar-ui-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-active-color);
}

.sidebar {
    top: 0;
    width: calc(var(--window-height) / 12);
    background-color: var(--sidebar-color);
    position: fixed;
    height: 100%;
    overflow-y: hidden;
    box-shadow: var(--shadow);
    z-index: 100;
    transition: var(--transition);
}

.sidebar svg {
    color: var(--sidebar-font-color);
    height: calc(var(--window-width) / 12);
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 8px 0;
    .svgBg {
        fill: var(--sidebar-color);
        transition: var(--transition);
    }
    .svgText {
        fill: var(--sidebar-active-color);
        transition: var(--transition);
    }
}

.sidebar svg:hover {
    transform: scale(1.05) rotate(3deg);
}

.sidebar svg.active {
    .svgBg {
        fill: var(--sidebar-active-color);
    }
    .svgText {
        fill: var(--sidebar-color);
    }
}

.sidebar svg:hover:not(.active) {
    .svgBg {
        fill: var(--sidebar-color-hover);
    }
    .svgText {
        fill: var(--sidebar-active-color);
    }
}

.content {
    margin-left: calc(var(--window-height) / 12);
    height: 100%;
    display: flex;
    flex-grow: 1;
    transition: var(--transition);
}

.content > div {
    position: absolute;
    width: calc(100% - var(--window-height) / 12);
    height: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.content > div.covert {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    z-index: 1;
}

.content > div:not(.covert) {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
}

iframe {
    border: 0;
    width: 100%;
    height: 100%;
}

.iframeContainer {
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: var(--transition);
}

.settingPage {
    padding: 20px;
    overflow-y: scroll;
    background-color: var(--theme-color);
    transition: var(--transition);
}

.settingPage svg {
    .svgBg {
        transition: var(--transition);
        fill: var(--theme-color-hover);
    }
    .inputBall {
        transition: var(--transition);
        cx: 25;
        fill: var(--theme-color);
        stroke: var(--border-color);
        stroke-width: 2;
    }
}

.switch {
    display: none;
}

.switch:checked + label > .switchIcon {
    .svgBg {
        fill: var(--sidebar-active-color);
    }
    .inputBall {
        cx: 75;
        fill: white;
        stroke: none;
    }
}

.switchIcon {
    width: 50px;
    height: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.switchIcon:hover {
    transform: scale(1.05);
}

@media only screen and (orientation: portrait) {
    .sidebar {
        width: 100%;
        height: calc(var(--window-width) / 8);
        position: relative;
    }
    .sidebar svg {
        width: calc(var(--window-height) / 8);
        height: 100%;
        float: left;
    }
    .content {
        margin-left: 0;
        height: 87.5%;
    }
    .menuContainer {
        width: max-content;
    }
}

@media only screen and (orientation: landscape) {
    .sidebar a {
        text-align: center;
        float: none;
    }
    .menuContainer {
        display: grid;
    }
}