@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
:root {
    --body-background: #060520;
    --header-background: #060520;
    --header-text: #ffffff;
    --page-text: #ffffff;
    --header-nav-text: #FFFFFFCC;
    --header-nav-text-hover: #FFFFFF;
    --header-slider-gradient-1: #FFFFFF0D;
    --header-slider-gradient-2: #FFFFFF80;
    --header-slider-gradient-3: #FFFFFF0D;
}
/* Light theme */
@media (prefers-color-scheme: light) {
    :root {
        --body-background: #ffffff;
        --header-background: #ffffff;
        --header-text: #060520;
        --page-text: #060520;
        --header-nav-text: #060520CC;
        --header-nav-text-hover: #060520;
        --header-slider-gradient-1: #0605200D;
        --header-slider-gradient-2: #06052080;
        --header-slider-gradient-3: #0605200D;
    }
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --body-background: #060520;
        --header-background: #060520;
        --header-text: #ffffff;
        --page-text: #ffffff;
        --header-nav-text: #FFFFFFCC;
        --header-nav-text-hover: #FFFFFF;
        --header-slider-gradient-1: #FFFFFF0D;
        --header-slider-gradient-2: #FFFFFF80;
        --header-slider-gradient-3: #FFFFFF0D;
    }
}
html {
    background-color: var(--body-background);
}
body {
    padding: 0;
    margin: 0;
    background-color: var(--body-background);
    color: var(--page-text);
    overflow: hidden;
}
#content-frame {
    width: 100vw;
    height: 100vh;
    border: none;
    overflow: hidden;
}
/* Slider */
input[type="radio"] {
    opacity: 0;
}
.slider, .sliderMenu{
    width: 260px;
    height: 26px;
    display: grid;
    justify-content: center;
    align-self: center;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    border-top: solid 1px transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, var(--header-slider-gradient-1), var(--header-slider-gradient-2), var(--header-slider-gradient-3)) 1;
}

.slider label, .sliderMenu label {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#left, #leftMenu {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row: 1/2;
}
#right, #rightMenu {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 1/2;
}
#dev, #devMenu {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 1/2;
}
label[for="dev"], label[for="devMenu"] {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 1/2;
}
#space, #spaceMenu {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row: 1/2;
}
label[for="space"], label[for="spaceMenu"] {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row: 1/2;
}
#science, #scienceMenu {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row: 1/2;
}
label[for="science"], label[for="scienceMenu"] {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row: 1/2;
}
.slider label picture img, .sliderMenu label picture img {
    opacity: 0.2;
}
.slider input:checked + label picture img, .sliderMenu input:checked + label picture img {
    opacity: 1;
}


/* PC */
@media (min-width: 1240px) {
    header {
        background-color: var(--header-background);
        color: var(--header-text);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        font-family: 'Pixelify Sans', sans-serif;
        font-weight: 400;
        word-wrap: break-word;
        min-height: 76px;
        width: 100%;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to right, var(--header-slider-gradient-2), var(--header-slider-gradient-1), var(--header-slider-gradient-2)) 1;
        position: fixed;
        top: 0;
        z-index: 1000;
    }

    header .first {
        grid-column: 1 / 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .second {
        grid-column: 2 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .third {
        grid-column: 3 / 4;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .classicnav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        text-decoration: none;
    }
    .classicnav a {
        text-decoration: none;
        color: var(--header-nav-text);
        padding: 0% 5%;
        font-size: 20px;
        transition: 0.3s;
    }
    .classicnav a:hover {
        color: var(--header-nav-text-hover);
        transition: 0.3s;
    }
    header picture {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header picture img{
        max-width: 200px;
    }
    .burger {
        display: none;
    }
}

/* Tablet */
@media (min-width: 834px) and (max-width: 1239px) {
    header {
        background-color: var(--header-background);
        color: var(--header-text);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        font-family: 'Pixelify Sans', sans-serif;
        font-weight: 400;
        word-wrap: break-word;
        min-height: 76px;
        width: 100%;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to right, var(--header-slider-gradient-2), var(--header-slider-gradient-1), var(--header-slider-gradient-2)) 1;
        position: fixed;
        top: 0;
        z-index: 1000;
    }
    header .first {
        grid-column: 1 / 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .second {
        grid-column: 2 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .third {
        grid-column: 3 / 4;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .classicnav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        text-decoration: none;
    }
    .classicnav a {
        text-decoration: none;
        color: var(--header-nav-text);
        padding: 0% 5%;
        font-size: 18px;
        transition: 0.3s;
    }
    .classicnav a:hover {
        color: var(--header-nav-text-hover);
        transition: 0.3s;
    }
    header picture {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header picture img{
        max-height: 25px;
    }
    .burger {
        display: none;
    }
    label picture img {
        opacity: 0.2;
    }
    input:checked + label picture img {
        opacity: 1;
    }
}

/* Mobile */
@media (max-width: 833px) {
    .classicnav {
        display: none;
    }
    .third {
        display: none;
    }
    header {
        background-color: var(--header-background);
        color: var(--header-text);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        font-family: 'Pixelify Sans', sans-serif;
        font-weight: 400;
        word-wrap: break-word;
        min-height: 76px;
        width: 100%;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to right, var(--header-slider-gradient-2), var(--header-slider-gradient-1), var(--header-slider-gradient-2)) 1;
        position: fixed;
        top: 0;
        z-index: 1000;
    }
    header .first {
        grid-column: 1 / 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .second {
        grid-column: 2 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
    }
    .menunav {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
    }
    .menunav a {
        text-decoration: none;
        color: var(--header-nav-text);
        padding: 15% 0%;
        font-size: 18px;
        transition: 0.3s;
    }
    .menunav a:hover {
        color: var(--header-nav-text-hover);
        transition: 0.3s;
    }
    header picture {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header picture img{
        max-height: 25px;
    }
    #burger {
        display: none;
    }
    #burger label picture img {
        opacity: 1;
    }
    #burger + #hamburger #active {
        display: none;
    }
    #burger + #hamburger #nonactive {
        display: block;
    }
    #burger:checked + #hamburger #nonactive {
        display: none;
    }
    #burger:checked +#hamburger #active {
        display: block;
    }
    #burger ~ .menu {
        display: none;
    }
    #burger:checked ~ .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 77px;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--header-background);
        z-index: 1000;
    }
    #burger:checked ~ .menu .sliderMenu {
        margin: 10% 0%;
    }

    .slider label picture img {
        opacity: 0.2;
    }
    .slider input:checked + label picture img {
        opacity: 1;
    }
}