:root {
    font-size: 10px;
    --purpleLight: #CC79BD;
    --purpleDark: #97598C;
    --cyanLight: #B0D3CC;
    --cyanDark: #6D9B90;
    --black: #0B0A07;
    --swiper-pagination-color: #6D9B90;
    --swiper-theme-color: #6D9B90;
}
* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    background:
        linear-gradient(-90deg, rgba(11,10,7,.05) 1px, transparent 1px),
        linear-gradient(rgba(11,10,7,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(11,10,7,.04) 1px, transparent 1px),
        linear-gradient(rgba(11,10,7,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f2f2f2;
    background-size:
        8px 8px,
        8px 8px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}

/** Site splash screen container */
#splash-screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding-bottom: 120px;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    backdrop-filter: blur(5px);
}
#splash-screen.fade-out {
    animation-name: fade-out;
    animation-duration: 0.5s;
}
@keyframes fade-out {
    from {opacity: 1;}
    to {opacity: 0;}
}
/* Title Wrapper */
#splash-screen > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
/* Title text */
#splash-screen h1 {
    margin: 0;
    font-size: 6rem;
    text-align: center;
    color: var(--black);
}
#splash-screen span {
    padding: 0.75rem;
    font-size: 3rem;
    border-radius: 0.5rem;
    background-size: 200% 200%;
    transition: background-position 1s;
    background-image: linear-gradient(to right, var(--cyanLight) 50%, rgba(209, 209, 209, 0.521) 0);
    background-position: right;
    cursor: pointer;
    transition: background 0.25s;
}
#splash-screen span:hover {
    font-weight: bold;
    background-position: left;
}
#splash-screen span a {
    color: var(--black);
    text-decoration: none;
}

/* Fullscreen container */
#fullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
#fullscreen * {
    /* box-shadow: 0 0 5px var(--purpleLight); */
}
/** Grid container for stacked items */
#grid-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    margin: 0 auto 0 auto;
    width: auto;
    height: auto;
    transform: scale(0.75);
    transition: all 0.5s;
}
#grid-container.zoom {
    transform: scale(1);
}
#grid-container > * {
    grid-area: 1 / 1 / 2 / 2;
}
/* Images in container */
#grid-container > img {
    display: block;
    max-width:100%;
    max-height:95vh;
}
/* Screen div with sizing */
#screen {
    margin: 2.7% 18.9% 0 19.5%;
    height: 58.8%;
    background-color: white;
    box-shadow: inset 0 0 20px rgb(182, 182, 182);
}

/** Nav buttons */
#nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 30vh auto;
    width: 80%;
    opacity: 0;
    transition: opacity 0.5s;
}
#nav-buttons.fade-in {
    opacity: 1;
}
/* Actual button */
#nav-buttons span {
    font-size: 16vh;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    color: var(--cyanDark);
    transition: all 0.12s;
}
#nav-buttons span:hover {
    color: var(--cyanLight);
}

/** SWIPER STUFF */
.swiper {
    width: 49vw;
    height: calc((9 / 16) * 49vw);
    background-color: white;
    box-shadow: inset 0 0 20px rgb(182, 182, 182);
    opacity: 0;
    transition: opacity 0.5s;
}
.swiper.fade-in {
    opacity: 1;
}
.swiper-slide {
    display: grid;
    padding: 15px;
    background-image: url(./assets/wallpaper_optimized.jpg);
    background-size: cover;
    font-size: 3rem;
}
.swiper-slide p {
    margin: 0;
}

@media (max-width:720px) {
    :root {
        font-size: 6px;
    }
    #nav-buttons {
        width: 85%;
        margin: 0 auto 50px auto;
    }
}
@media (max-width:400px) {
    :root {
        font-size: 3px;
    }
}

/* ################# */
/* # Swiper slides # */
/* ################# */
#slide1 {
    grid-template-columns: 2fr 1fr;
}
#slide1 img {
    max-height: 100%;
    max-width: 100%;
    align-self: end;
}
#slide2, #slide3, #slide5 {
    grid-template-rows: 1fr 200px;
}
#slide2 img, #slide3 img, #slide5 img {
    justify-self: right;
    max-height: 100%;
    max-width: 100%;
}
#slide4 {
    background-image: none;
    background-color: whitesmoke !important;
    color: var(--black) !important;
    transition: filter 0.5s ease 0.2s !important;
}
.invert {
    filter: invert(1) hue-rotate(180deg);
}
#slide6 ul {
    grid-template-rows: 1fr;
    margin: 0;
    font-size: 2.5rem;
}