:root {
    --main-color: #09050b;
    --pulse-color: #64037e;
    --pulseL-color: #9504bd;
    --second-color: #180c1d;
    --text-CTA: #770e0e;
    --text-color: #f4d4f5;
    --time-transition: 0.3s;

}

body {
    background-color: var(--main-color);
    background-image: url("../Images/stars-1869692_1920s.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-attachment: fixed;
    background-blend-mode: color-dodge;
    width: 90%;
    margin: auto;
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr 4fr;
    color: var(--text-color);
}

.CGU {
    grid-template-columns: 1fr;
}

.miniGames {
    grid-template-columns: 1fr;
}

.miniGames article {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr;
}

.miniGames section {
    margin: 0;
}

h1,
h2,
h3 {
    font-family: 'Roboto Mono', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

p {
    line-height: 1.5em;
    padding: 0.5em 0;
}

header {
    grid-column: 1/3;
    text-align: center;
}

article {
    border-radius: 5px;
}


article section {
    background-color: var(--second-color);
    filter: drop-shadow(1);
    padding: 1.5em;
    margin: 2em;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 3px 0 #0006;
    transition: filter var(--time-transition), transform var(--time-transition);
}

body:not(.miniGames) article section:hover:nth-of-type(odd) {
    filter: hue-rotate(10deg) brightness(1.3) saturate(2);
    transform: skewY(1deg) rotate(-0.5deg);
}

body:not(.miniGames) article section:hover:nth-of-type(even) {
    filter: hue-rotate(-10deg) brightness(1.5) saturate(4);
    transform: skewY(-1deg) rotate(0.5deg);
}

a:not(.disabled) {
    text-decoration: none;
    color: var(--text-color);
}

.embed {
    position: sticky;
    top: 0;
}

.disabled {
    text-decoration: line-through;
}

aside {
    height: 3em;
    grid-column: 1/2;
    height: 100vh;
    position: relative;
}

aside nav {
    height: 100%;
    position: fixed;
}

aside nav ul {
    list-style: none;
    display: grid;
    margin: auto;
    width: 100%;
    height: 100%;
    padding: 0;
    grid-template-rows: repeat(5, 1fr);
}

nav li {
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
}

a:not(.disabled),
.clickable:not(.disabled) {
    padding: 1em 0x;
    transition: filter 0.1s, text-shadow var(--time-transition);
    text-shadow: 0 0 2px #c161dc;
    font-size: 1.05em;
}

a:hover:not(.disabled),
.clickable:hover:not(.disabled) {
    text-shadow: 4px 0 2px #26242e, -4px 0 2px #273130, 1px 3px 2px #181f16, -2px -3px 2px #405968;
    filter: hue-rotate(4000deg);
    transition: filter 30s, text-shadow var(--time-transition);
    cursor: pointer;
}

.intense {
    text-shadow: 0 2px 3px var(--pulseL-color), 0 -2px 8px var(--pulseL-color);
}

footer {
    grid-column: 2/3;
    height: 80px;
}

footer ul {
    list-style: none;
    height: 100%;
    margin: auto;
    padding: 1em;
}

@media screen and (max-width:600px) {
    body {
        grid-template-columns: 1fr;
    }

    aside {
        display: none;
    }

    footer {
        grid-column: 1/2;

    }

    footer ul {
        padding: 0;
        margin: auto;
    }
}