:root {
    /* Light mode colours */
    --text: #1f5151;
    --background: #feffeb;
    --bg: url(./images/bg.webp);
    --colour1: #d5edab;
    --colour2: #66cc86;
    --colour3: #3d8567;
    --shadow: #1f515141;
    --shadow2: #0000003d;
    --glow: #f7fff3;
    --utau: #ffc5f3;
    --utauborder: #f0a2c9;
    --diffsinger: #bfc5ff;
    --diffsingerborder: #b5a6ee;

    /* Carousel link variables */
    --footlink-width: 88px;
    --footlink-height: 31px;
    --carousel-duration: 60s;
    --link-amount: 35;

    /* Cloud background animation variable */
    --cloud-duration: 50s;

    /* Links light mode icons */
    --bluesky: url(./images/links/bluesky.webp);
    --twitter: url(./images/links/twitter.webp);
    --telegram: url(./images/links/telegram.webp);
    --tumblr: url(./images/links/tumblr.webp);
    --instagram: url(./images/links/instagram.webp);
    --newgrounds: url(./images/links/newgrounds.webp);
    --cara: url(./images/links/cara.webp);
    --vgen: url(./images/links/vgen.webp);
    --youtube: url(./images/links/youtube.webp);
    --niconico: url(./images/links/niconico.webp);
    --bilibili: url(./images/links/bilibili.webp);
    --kofi: url(./images/links/kofi.webp);
}

* {
    margin: 0;
    padding: 0;
}

/* Fonts */
@font-face {
    font-family: "SpaceGrotesk";
    src: url(./fonts/SpaceGrotesk.ttf);
}
@font-face {
    font-family: "GNKillGothicU";
    src: url(./fonts/GNKillGothicU.ttf);
}
html {
    font-family: "SpaceGrotesk", sans-serif;
    line-height: 1.5;
}
/* Page title */
h1 {
    background: linear-gradient(0deg, var(--colour2), var(--colour1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px var(--colour3);
    paint-order: stroke;
    background-clip: text;
    font-family: "GNKillGothicU", sans-serif;
    font-weight: initial;
    font-size: 60px;
    text-align: center;
}
/* Page title subtitle */
h2 {
    background: linear-gradient(0deg, var(--colour2), var(--colour1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px var(--colour3);
    paint-order: stroke;
    background-clip: text;
    font-family: "GNKillGothicU", sans-serif;
    font-weight: initial;
    font-size: 25px;
    letter-spacing: 20px;
    margin-top: -10px;
    text-align: center;
}
/* Content subtitle */
h3 {
    color: var(--text);
    text-align: center;
    font-size: 25px;
}

a {
    text-decoration: none;
}

body {
    min-height: 100vh;
    color: var(--text);
    display: grid;
    grid-template-columns: auto 1fr;
    overflow-x: hidden;
}

/* Main alignment */
main {
    padding: min(30px, 7%);
    margin: 0 auto;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Paragraph margins */
main p {
    color: var(--colour3);
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
}

hr {
    height:2px;
    border-width: 0;
    background-color: var(--colour3);
}
main hr {
    width: 100%;
    margin: 30px
}

button {
    background-color: var(--background);
    border: 2px solid var(--colour3);
    border-radius: 10px;
    padding: 10px;
    font-family: "GNKillGothicU", sans-serif;
    font-size: medium;
    font-weight: 600;
    color: var(--colour3);
    -webkit-text-stroke: 1px var(--background);
    display: flex;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 150ms ease;
}
button:hover {
    background-color: var(--colour1);
    box-shadow: 0 5px 10px 0px var(--shadow);
    transition: all 150ms ease;
    transform: translateY(-5px)
}
button:active {
    background-color: var(--colour2);
    box-shadow: 0 0px 0px 0px;
    transition: all 150ms ease;
    transform: translateY(0px)
}

/* Default content container */
.container {
    border: 2px solid var(--colour3);
    box-shadow: 0 0 10px 0px var(--shadow);
    border-radius: 1em;
    background-color: var(--background);
    margin-bottom: 20px;
    padding: min(3em, 15%);
    max-width: 700px;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bottom-page-spacer {
    margin-bottom: 20px; 
    opacity: 0;
}
.top-page-spacer {
    display: none;
}

/* ===== BACKGROUND ===== */
.bg {
    background-image: var(--bg);
    background-color: var(--background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    position: fixed;
    overflow: hidden;
    z-index: -1;
}
.bg-cloud {
    width: 100%;
    height: 100%;
}
.cloud1, .cloud2, .cloud3, .cloud4, .cloud5, .cloud6 {
    position: absolute;
    bottom: 0;
    user-select: none;
    -webkit-user-drag: none;
}
.cloud1 {
    animation: cloud1 var(--cloud-duration) linear infinite;
}
.cloud2 {
    animation: cloud2 var(--cloud-duration) linear infinite;
}
.cloud3 {
    animation: cloud3 var(--cloud-duration) linear infinite;
}
.cloud4 {
    animation: cloud4 var(--cloud-duration) linear infinite;
}
.cloud5 {
    animation: cloud5 var(--cloud-duration) linear infinite;
}
.cloud6 {
    animation: cloud6 var(--cloud-duration) linear infinite;
}
@keyframes cloud1 {
  from {
    transform: translate(0%);
  }
    to {
    transform: translate(100%);
  }
}
@keyframes cloud2 {
  from {
    transform: translate(-100%);
  }
  to {
    transform: translate(0%);
  }
}
@keyframes cloud3 {
  from {
    transform: translate(100%);
  }
  to {
    transform: translate(200%);
  }
}
@keyframes cloud4 {
  from {
    transform: translate(200%);
  }
  to {
    transform: translate(300%);
  }
}
@keyframes cloud5 {
  from {
    transform: translate(300%);
  }
  to {
    transform: translate(400%);
  }
}
@keyframes cloud6 {
  from {
    transform: translate(400%);
  }
  to {
    transform: translate(500%);
  }
}
/* ===== BACKGROUND END ===== */

/* ===== UTAU ===== */
.utau-container {
    display: flex;
    border: 2px solid var(--colour3);
    box-shadow: 0 0 10px 0px var(--shadow);
    border-radius: 1em;
    margin: 20px 10px 0px 10px;
    max-width: 375px;
    overflow: hidden;
    transition: all 200ms ease;
    position: relative;
}
.utau-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #fff);
}
.utau-container:hover {
    box-shadow: 0 0 30px 5px var(--glow);
    border: 4px solid #ffffff;
    transition: all 200ms ease;
    transform: scale(1.05)
}
.utau-container:hover .utau-hover {
    opacity: 1;
    transition: all 200ms ease;
}
.utau-container:active {
    box-shadow: 0 0 30px 5px var(--glow);
    border: 4px solid #ffffff;
    transition: all 200ms ease;
    transform: scale(.95)
}
.utau-image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}
.utau-hover {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 200ms ease;
}
.utau-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
}
.utau-info-bottom {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    line-height: 25px;
    p {
        text-align: left;
        -webkit-text-stroke: 4px var(--background);
        paint-order: stroke;
    }
    h3 {
        text-align: left;
        font-size: clamp(25px, 3vw, 35px);
        -webkit-text-stroke: 4px var(--background);
        paint-order: stroke;
    }
}
.utau-info-top {
    margin: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}
.utau-label {
    display: inline-flex;
    border-radius: 0.5em;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: bold;
    -webkit-text-stroke: 0.5px var(--shadow2);
    text-shadow: 0 1px 2px var(--shadow2);
    box-shadow: 0 2.5px 2.5px 0px var(--shadow2);
}
.utau-list {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 50% 50%;
}
/* ===== UTAU END ===== */

/* ===== UST ===== */
.ust-list-container {
    border: 2px solid var(--colour3);
    box-shadow: 0 0 10px 0px var(--shadow);
    border-radius: 1em;
    background-color: var(--background);
    max-width: 700px;
    width: 85%;
    margin: 5px;
    padding: 0;
    align-items: center;
    overflow: hidden;
    transition: all 200ms ease;
    h1 {
        background: linear-gradient(0deg, var(--colour2), var(--colour1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1.5px var(--colour3);
        paint-order: stroke;
        background-clip: text;
        font-family: "GNKillGothicU", sans-serif;
        font-weight: initial;
        font-size: 25px;
        text-align: unset;
    }
    h3 {
        margin: 0px;
        color: var(--colour3);
        text-align: unset;
        font-size: 15px;
    }
}
.ust-list-container:hover {
    box-shadow: 0 0 30px 5px var(--glow);
    border: 4px solid #ffffff;
    transition: all 200ms ease;
    transform: scale(1.02)
}
.ust-list-contents {
    display: grid;
    grid-template-columns: 152px auto;
    grid-template-areas:
        'img title'
        'img subtitle'
        'img subsubtitle'
        'buttons buttons';
    align-items: center;
}
.ust-img {
    border-right: 2px solid var(--colour3);
    height: 150px;
    grid-area: img;
    img {
        height: 150px;
        user-select: none;
        -webkit-user-drag: none;
    }
}
.ust-title {
    margin-left: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    grid-area: title;
}
.ust-subtitle {
    margin-left: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    grid-area: subtitle;
}
.ust-subsubtitle {
    margin-left: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    grid-area: subsubtitle;
}
.ust-buttons {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
    padding-bottom: 12px;
    gap: 5px;
    border-top: 2px solid var(--colour3);
    grid-area: buttons;
}
/* ===== UST END ===== */

/* ===== INDEX ===== */
.index-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
    max-width: 700px;
    margin: 40px;
    img {
        width: 100%;
        height: 100%;
        user-select: none;
        -webkit-user-drag: none;
    }
    a {
        width: 50%;
        height: 50%;
        transition: all 200ms ease;
    }
    a:hover {
        transform: scale(1.05);
        filter: brightness(1.1);
    }
    a:active {
        transform: scale(.95);
        filter: brightness(.9);
    }
    /* Mobile scaling */
    @media (max-height: 700px) {
        width: 80vh;
        max-width: 80vw;
    }
}
/* ===== INDEX END ===== */

/* ===== COMM ===== */
.terms-container {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--shadow);
    backdrop-filter: blur(5px);
    opacity: 1;
    transition: opacity 300ms ease;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
}
.terms-container.agreed {
    opacity: 0;
    pointer-events: none;
}
.terms {
    border: 2px solid var(--colour3);
    box-shadow: 0 0 10px 0px var(--shadow);
    border-radius: 1em;
    background-color: var(--background);
    padding: min(3em, 15%);
    max-width: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    h3 {
        font-size: 20px;
    }
    button {
        padding: 20px;
        padding-left: 40px;
        padding-right: 40px;
        font-size: large;
    }
}
.comm-container {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
    gap: 10px;
    margin: 20px;
    margin-top: 0px;
}
.comm-image {
    border: 2px solid var(--colour3);
    box-shadow: 0 0 10px 0px var(--shadow);
    border-radius: 1em;
    overflow: hidden;
    transition: all 200ms ease;
    cursor: pointer;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
        -webkit-user-drag: none;
    }
}
.comm-image:hover {
    box-shadow: 0 0 30px 5px var(--glow);
    border: 2px solid #ffffff;
    transition: all 200ms ease;
    transform: scale(1.05);
}
.comm-image:active {
    box-shadow: 0 0 30px 5px var(--glow);
    border: 2px solid #ffffff;
    transition: all 200ms ease;
    transform: scale(.95);
    filter: brightness(.9);
}
.popup-container {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--shadow);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.popup-container span {
    position: fixed;
    top: 10px;
    right: 160px;
    -webkit-text-stroke: 2px var(--colour1);
    paint-order: stroke;
    text-shadow: 0px 0px 5px var(--text);
    font-size: 40px;
    font-weight: bolder;
    user-select: none;
    color: var(--colour3);
    cursor: pointer;
}
.popup-container span:hover {
    transition: all 200ms ease;
    transform: scale(1.25);
}
.popup-container span:active {
    transform: scale(.75);
}
.popup-image {
    margin: 200px;
    opacity: 1;
    img {
        max-width: 1080px;
        width: 100%;
        max-height: 80vh;
        height: 100%;
        object-fit: cover;
        box-shadow: 0 0 30px 5px var(--shadow);
    }
}
/* ===== COMM END ===== */

/* ===== LINKS ===== */
.link-container {
    border: 2px solid var(--colour3);
    box-shadow: 0 0 10px 0px var(--shadow);
    border-radius: 1em;
    background-color: var(--background);
    margin: 20px 10px 0px 10px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 200ms ease;
    hr {
        margin-top: 0;
        margin-bottom: 10px;
    }
    img {
        max-width: 100%;
        max-height: 100%;
    }
    h1 {
        font-size: 22.5px;
        -webkit-text-stroke: 1.5px var(--colour3);
        paint-order: stroke;
    }
    h3 {
        font-size: 12.5px;
        color: var(--colour3);
        margin-bottom: 15px;
        text-align: center;
    }
}
.link-container:hover {
    background-color: var(--colour1);
    box-shadow: 0 0 30px 5px var(--glow);
    border: 2px solid #ffffff;
    transition: all 200ms ease;
    transform: scale(1.05)
}
.link-container:active {
    background-color: var(--colour2);
    box-shadow: 0 0 30px 5px var(--glow);
    border: 2px solid #ffffff;
    transition: all 200ms ease;
    transform: scale(.95)
}
.link-list {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}
/* ===== LINKS END ===== */

/* ===== THEMES ===== */
.dark-mode {
    color-scheme: dark;
    --text: #feffeb;
    --background: #1f2e2e;
    --colour1: #1f5151;
    --colour2: #66cc86;
    --colour3: #d5edab;
    --shadow: #000000b7;
    --glow: #cfffb3;
    --bg: url(./images/bg-dark.webp);
    --bluesky: url(./images/links/bluesky-dark.webp);
    --twitter: url(./images/links/twitter-dark.webp);
    --telegram: url(./images/links/telegram-dark.webp);
    --tumblr: url(./images/links/tumblr-dark.webp);
    --instagram: url(./images/links/instagram-dark.webp);
    --newgrounds: url(./images/links/newgrounds-dark.webp);
    --cara: url(./images/links/cara-dark.webp);
    --vgen: url(./images/links/vgen-dark.webp);
    --youtube: url(./images/links/youtube-dark.webp);
    --niconico: url(./images/links/niconico-dark.webp);
    --bilibili: url(./images/links/bilibili-dark.webp);
    --kofi: url(./images/links/kofi-dark.webp);

    background-color: var(--background);
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Styles for the sun and moon icons */
.sun-icon, .moon-icon {
    width: 24px;
    height: 24px;
}
/* Hide moon icon by default */
.moon-icon {
    display: none;
}
/* Swap icon in dark mode */
.dark-mode .sun-icon {
    display: none;
}
.dark-mode .moon-icon {
    display: inline-block;
}
/* ===== THEMES END ===== */

/* ===== CAROUSEL ===== */
/* Carousel container */
.footer {
    border-top: 2px solid var(--colour3);
    box-shadow: 0px 5px 30px var(--shadow);
    box-sizing: border-box;
    background-color: var(--background);
    padding: 10px;
    height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
/* Actual carousel */
.carousel {
    width: 90%;
    max-width: 1640px;
    height: var(--footlink-height);
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    /* Gradient mask at edges */
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1) 20%,
        rgba(0,0,0,1) 80%,
        rgba(0,0,0,0)
    );
}
.carousel-image {
    width: var(--footlink-width);
    height: var(--footlink-height);
    position: absolute;
    /* Spaces out links when viewport is too wide */
    left: max(calc(var(--footlink-width) * var(--link-amount)), 100%);
    /* Scroll animation */
    animation-name: scrollLeft;
    animation-duration: var(--carousel-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    cursor: pointer;
}
.carousel-image a img {
    user-select: none;
    -webkit-user-drag: none;
}
@keyframes scrollLeft {
    to {
        left: calc(-1 * var(--footlink-width));
    }
}
.carousel:hover .carousel-image {
    animation-play-state: paused;
}
/* Distributes links */
.item1 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 1) * -1);
}
.item2 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 2) * -1);
}
.item3 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 3) * -1);
}
.item4 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 4) * -1);
}
.item5 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 5) * -1);
}
.item6 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 6) * -1);
}
.item7 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 7) * -1);
}
.item8 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 8) * -1);
}
.item9 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 9) * -1);
}
.item10 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 10) * -1);
}
.item11 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 11) * -1);
}
.item12 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 12) * -1);
}
.item13 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 13) * -1);
}
.item14 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 14) * -1);
}
.item15 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 15) * -1);
}
.item16 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 16) * -1);
}
.item17 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 17) * -1);
}
.item18 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 18) * -1);
}
.item19 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 19) * -1);
}
.item20 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 20) * -1);
}
.item21 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 21) * -1);
}
.item22 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 22) * -1);
}
.item23 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 23) * -1);
}
.item24 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 24) * -1);
}
.item25 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 25) * -1);
}
.item26 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 26) * -1);
}
.item27 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 27) * -1);
}
.item28 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 28) * -1);
}
.item29 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 29) * -1);
}
.item30 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 30) * -1);
}
.item31 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 31) * -1);
}
.item32 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 32) * -1);
}
.item33 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 33) * -1);
}
.item34 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 34) * -1);
}
.item35 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 35) * -1);
}
.item36 {
    animation-delay: calc(var(--carousel-duration) / var(--link-amount) * (var(--link-amount) - 36) * -1);
}
/* ===== CAROUSEL END ===== */

/* ===== SIDEBAR ===== */
/* Sidebar container */
#sidebar {
    box-sizing: border-box;
    box-shadow: 0 0 30px 0px var(--shadow);
    border-right: 2px solid var(--colour3);
    background-color: var(--background);
    height: calc(100vh - 50px);
    width: 250px;
    padding: 5px;
    z-index: 2;
    position: sticky;
    top: 0;
    align-self: start;
    overflow: hidden;
    text-wrap: nowrap;
    padding-bottom: 80px; /* reserve space for bottom contents */
}
/* Removes sidebar bullet-points */
#sidebar ul {
    list-style: none;
}
#sidebar ul hr {
    margin-bottom: 10px;
}
/* Sidebar logo formatting */
#sidebar > ul > li:first-child {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    transition: all 150ms ease;
    .logo-image {
        width: 190px;
        user-select: none;
        -webkit-user-drag: none;
    }
}
/* Highlight current page in sidebar */
#sidebar ul li.active a {
    color: var(--colour2);
    svg {
        fill: var(--colour2);
    }
}
#sidebar ul li div.active a {
    color: var(--colour2);
    svg {
        fill: var(--colour2);
    }
}
/* Sidebar content formatting */
#sidebar a, #sidebar .dropdown-button, #sidebar .theme-toggle {
    border-radius: .5em;
    padding: .85em;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 1em;
    /* Hover exit ease out animation */
    transition: background-color, padding 200ms ease-out;
}

/* Puts dropdown next to UTAU link */
#sidebar a, #sidebar .dropdown-button {
    display: inline-flex;
}
#sidebar .dropdown-button {
    margin-left: 0;
    display: none; /* ------ DELETE WHEN UTAU PAGES ARE FINISHED ------ */
}

/* Dropdown + Theme toggle Style */
.dropdown-button, .theme-toggle {
    width: auto;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

/* Colour button SVGs */
#sidebar svg {
    flex-shrink: 0;
    fill: var(--colour3);
}
/* Change colour on hover and click */
#sidebar a:hover, #sidebar .dropdown-button:hover, #sidebar .theme-toggle:hover {
    background-color: var(--colour1);
    transition: all 150ms ease;
    /* Don't apply button animation */
    box-shadow: none;
    transition: all 150ms ease;
    transform: translateY(0px)
}
#sidebar a:active, #sidebar .dropdown-button:active, #sidebar .theme-toggle:active {
    background-color: var(--colour2);
}
/* Indent when hovered */
#sidebar > ul > li > a:hover{
    padding-left: 25px;
}
#sidebar > ul > li > span > a:hover{
    padding-left: 25px;
}
/* Different animations for logo */
#sidebar > ul > li:first-child:hover {
    padding-left: 0px;
    transition: all 150ms ease;
    transform: scale(1.1);
}
#sidebar > ul > li:first-child:active {
    padding-left: 0px;
    transition: all 150ms ease;
    transform: scale(.95);
}
/* Hide dropdown contents by default */
#sidebar .sub-menu {
    display: grid;
    grid-template-rows: 0fr;
    /* Dropdown collapse/uncollapse animation */
    transition: 300ms ease-in-out;

    > div {
        overflow: hidden;    
    }
}
/* Show dropdown contents */
#sidebar .sub-menu.show {
    grid-template-rows: 1fr;
}
/* Rotate dropdown SVG on click */
.dropdown-button svg {
    transition: 200ms ease;
}
.rotate svg:last-child {
    rotate: 180deg;
}
/* Indent dropdown contents */
#sidebar .sub-menu a {
    padding-left: 2.5em;
}
/* Dropdown Style */
.dropdown-button {
    margin-left: auto;
    padding: 1em;
    border: none;
    border-radius: .5em;
    background: none;
    cursor: pointer;

    svg {
        transition: rotate 200ms ease-in-out;
    }
}
/* Sidebar footer (hr + theme toggle + credit) */
#sidebar .sidebar-footer {
    position: absolute;
    bottom: 0px;
    padding-top: 10px;
    padding-bottom: 9px;
    background: var(--background);
}
#sidebar .footer-hr {
    position: absolute;
    bottom: 60px;
    height: 2px;
    background: var(--colour3);
    left: 5px;
    right: 5px;
    width: unset;
}
#sidebar .sidebar-footer .footer-row {
    display: flex;
    align-items: center;
    gap: 4.8em;
    justify-content: flex-end;
}
#sidebar .sidebar-footer .footer-row .credit {
    margin-right: 16px;
    color: var(--colour3);
    font-size: small;
}
#sidebar .fumo {
    width: 50px;
    position: absolute;
    bottom: 60px;
    right: 10px;
    user-select: none;
    -webkit-user-drag: none;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#sidebar .fumo:hover {
    animation: shake 300ms linear infinite;
    animation-play-state: running;
}
/* ===== SIDEBAR END ===== */

/* Page Loader */
#preloader {
    background: var(--colour1) url(images/load.gif) no-repeat center;
    align-items: center;
    justify-content: center;
    background-size: 10%;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    position: fixed;
    /* Places above everything */
    z-index: 9999;
}

/* Mobile Styling */
@media(max-width: 800px) {
    body {
        grid-template-columns: 1fr;
    }
    h1 {
        font-size: 35px;
        -webkit-text-stroke: 1.5px var(--colour3);
        paint-order: stroke;
    }
    h2 {
        font-size: 15px;
        -webkit-text-stroke: 1px var(--colour3);
        paint-order: stroke;
    }
    main {
        padding: 2em 1em 2em 1em;
        max-width: auto;
    }
    .container p {
        margin-left: 40px;
        margin-right: 40px;
    }
    .container {
        padding-left: min(1em, 15%);
        padding-right: min(1em, 15%);
    }
    .top-page-spacer {
        display: block;
        margin-bottom: 0px; 
        opacity: 0;
    }
    /* Move carousel to top */
    .footer {
        height: 35px;
        top: 0;
        border-top: none;
        border-bottom: 2px solid var(--colour3);
    }
    .utau-list {
        grid-template-columns: 100%;
    }
    .ust-list-contents {
        grid-template-columns: 102px auto;
    }
    .ust-list-container h1 {
        font-size: 20px;
    }
    .ust-subtitle h3, .ust-subsubtitle h3 {
        font-size: 12px;
    }
    .ust-buttons {
        grid-template-columns: auto;
    }
    .ust-buttons button {
        padding: 5px;
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ust-img, .ust-img img {
        height: 100px;
    }
    .popup-container span {
        right: 30px;
        top: 35px;
    }
    .popup-image {
        margin: 0px;
    }
    .link-container {
        max-width: 150px;
        h1 {
            font-size: 20px;
        }
    }
    .link-list {
        grid-template-columns: 50% 50%;
    }

    /* ===== MOBILE SIDEBAR ===== */
    #sidebar {
        /* Moves sidebar to bottom */
        height: 60px;
        width: 100%;
        border-right: none;
        border-top: 2px solid var(--colour3);
        padding: 0;
        position: fixed;
        top: unset;
        bottom: 0;

        /* Remove desktop footer for mobile */
        .sidebar-footer {
            position: static;
            left: auto;
            right: auto;
            bottom: auto;
            padding: 0;
            margin: 0;
        }
        .sidebar-footer .footer-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            height: 100%;
        }

        /* Align icons side-by-side and center them */
        > ul {
            padding: 0;
            display: grid;
            grid-auto-columns: 60px;
            grid-auto-flow: column;
            align-items: center;
            justify-content: center;
            overflow-x: auto;
        }
        /* Align icons horizontally and center */
        ul li {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Makes boxes square and removes padding */
        ul a, ul .theme-toggle {
            width: 60px;
            height: 60px;
            padding: 0;
            border-radius: 0;
            justify-content: center;
        }
        /* Hide shit!! */
        ul li hr, ul li a span, ul li div span, ul li:first-child, ul .dropdown-button, ul .sub-menu, ul li div img, ul hr {
            display: none;
        }
        /* Don't indent when hovered */
        > ul > li > a:hover {
            padding-left: 0px;
        }
        > ul > li > span > a:hover {
            padding-left: 0px;
        }
    }
    /* ===== MOBILE SIDEBAR END ===== */

    #preloader {
        background-size: 25%;
    }
}