/* Destined to be included in most pages, unless I change everything in 2 months. */

@import url("/styles/reset.css");
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@1,300..800&display=swap'); 

/* If you want the other font (Recursive) it's here. */
/* @import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL@-15..0,300..800,1&display=swap'); */

:root {
    font-family: "Shantell Sans", cursive;
    font-size: normal;
    color: rgb(255, 255, 255);
    background-color: black;
}

/* == Background == */

html, body {
    height: 100%;
}
.bg {
    overflow: auto;
    position: static;
    height: 100%;
    background-attachment: fixed;
    background-image: url("../bg.webp");
    animation: parallax 120s linear infinite;
}
.bg2 {
    overflow: auto;
    position: static;
    height: 100%;
    background-attachment: fixed;
    background-image: url("../bg2.webp");
    animation: parallax 40s linear infinite;
}
@keyframes parallax {
    0% {
        background-position: 0px 0px;
    }
    100% { 
        background-position: 0px 512px; 
    }
}

/* == Layout == */

.layout-grid {
    display: grid;
    margin: 0 min(4em,3vw);
    gap: 1em;
    justify-items: center;

    @media (max-width: 600px) {
        margin: 0px;
    }
}

.outer-box {
    background-color: rgba(0, 0, 0, 0.767);
    border: 15px solid;
    border-image: url("../squiggle_border.png") 8;
    border-image-repeat: repeat;
    padding: 20px;
    image-rendering: crisp-edges;
    * { image-rendering: auto; }
    
    @media (max-width: 600px) {
        width: 100%;
        border-left: none;
        border-right: none;
    }
}

nav {
    margin: auto;
    width: fit-content;
    margin-bottom: 1em;
}

/* == Elements == */

h1, h2, h3, h4, h5, h6 {
    margin: auto;
    width: fit-content;

    /* Rainbow effect copied from .rainbow */
    background: linear-gradient(90deg in oklch longer hue, oklch(100% 80% 20), oklch(100% 80% 20) 100%);
    background-clip: text;
    color: transparent;
    background-size: 200%;
    animation: looping 2s linear infinite;
}
h1 { font-size: 3.0em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.0em; }
h6 { font-size: 1.0em; }

.rainbow {
    background: linear-gradient(90deg in oklch longer hue, oklch(100% 80% 20), oklch(100% 80% 20) 100%);
    background-clip: text;
    color: transparent;
    background-size: 200%;
    
    .looping {
        animation: looping 2s linear infinite;
    }
}
@keyframes looping {
    0% {
        background-position: 0cm 0%;
    }
    100% { 
        background-position: 200% 0%; 
    }
}

a {
    color: #b9cfd0;
}
a:hover {
    background: linear-gradient(90deg in oklch longer hue, oklch(100% 80% 20), oklch(100% 80% 20) 100%);
    background-clip: text;
    color: transparent;
    background-size: 200%;
    animation: looping 0.3s linear infinite;
    font-style: oblique;
    font-weight: bold;
}
a:visited {
    color: #cab9d0;
}

p + p {
    margin-top: 1em;
}

li {
    margin-left: 1.5em;
    list-style: disc;
}

/* TODO : MOVE THIS */
.gallery-row {
    display: flex;
    justify-content: center;
}