:root {
    --accent: #F03228;
    --base: #000000;
    --primary: #FFFFFF;
    --primary50: #FFFFFF50;
    --secondary: #247BA0;
    --info: #E3B505;
}
[data-theme="light"] {
    --accent: #F03228;
    --base: #FFFFFF;
    --primary: #000000;
    --primary50: #00000050;
    --secondary: #247BA0;
    --info: #E3B505;
}

@font-face {
    font-family: sensation;
    src: url("../assets/fonts/Sansation-Regular.ttf");
}

@font-face {
    font-family: din-pro;
    src: url("../assets/fonts/dinpro.otf");
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    transition: background-color .5s ease, color .5s ease;
}

p {
    color: var(--primary);
    font-family: sensation;
    font-weight: 400;
}

h1 {
    color: var(--primary);
    font-family: sensation;
    font-weight: 700;
}

h2 {
    color: var(--primary);
    font-family: sensation;
    font-weight: 550;
}

h3 {
    color: var(--primary);
    font-family: sensation;
    font-weight: 450;
}

.themeSwitch {
    aspect-ratio: 1.5/1;
    width: 15%;
    border: 2px solid var(--primary50);
    border-radius: 50px;
    padding: 1.5%;
    transition: .5s ease;
    display: flex;
    align-items: center;
    justify-content: left;

    .themeSwitchToggle {
        aspect-ratio: 1/1;
        height: 100%;
        border-radius: 50%;
        background-color: var(--primary);
        opacity: .5;
    }
}
.themeSwitchOn {
    background-color: var(--accent);
    justify-content: right;

    .themeSwitchToggle {
        opacity: 1;
    }
}

@media (orientation: landscape) {
    html {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #222222;
        width: 100%;
        height: 100%;

        body {
            aspect-ratio: 9/16 !important;
            width: initial;
            height: 97.5svh;
        }
    }
}

body {
    width: 100%;
    height: 100svh;
    background-color: #000000;

    header {
        width: 100%;
        height: 10%;
        z-index: 1000;
        background-color: #000000;
    }

    #content {
        width: 100%;
        height: 81%;
        background-color: var(--base);

        overflow-y: scroll;
        overflow-x: hidden;

        &::-webkit-scrollbar {
            display: none;
        }

        main {
            min-height: 100%;
        }

        footer {
            padding: 2.5% 1.5%;
            background-color: #000000;

            p {
                color: #FFFFFF;
                font-family: sensation;

                a {
                    text-decoration: none;
                    color: var(--accent);
                    font-weight: 400;
                }
            }
        }
    }

    nav {
        /*border-top: var(--primary50) solid 2px;*/
        width: 100%;
        height: 9%;
        z-index: 1000;
        background-color: var(--accent);
    }
}