@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

:root {
    --bg-main: #CED6E0;
    --text-main: #2F3137;
    --text-light: #CED6E0;
    --accent-1: #55648C;
    --accent-2: #CD90B9;
    --transparent-1: #55648c7c;
    --transparent-2: #cd90b988;
}

.dark-mode {
    --bg-main: #2F3137;
    --text-main: #CED6E0;
    --text-light: #CED6E0;
    --accent-1: #55648C;
    --accent-2: #000418;
    --transparent-1: #55648c7c;
    --transparent-2: #2f31378f;
}

.dark-mode .banner ~ * img {
    filter: brightness(0.65), contrast(1.1);
    opacity: 0.8;
}

.dark-mode .banner ~ * video {
    filter: brightness(0.65), contrast(1.1);
    opacity: 0.8;
}

.dark-mode header img,
.dark-mode footer img {
    filter: none;
}

* {
    margin: 0px;
}

hr {
    margin: 0px;
    padding: 0px;
    visibility: hidden;
}

.absolute {
    position: fixed !important;
    top: 0px;
    background-color: rgba(188, 132, 169, 0);
    z-index: 5;
}

.frost-backdrop {
    backdrop-filter: blur(16px);
}

.flow-to-pink::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%, 95%,
        var(--accent-2) 100%
    );
    pointer-events: none; /* allow clicks through */
}

.semi-transparent {
    opacity: 0.5
}

.ground-backdrop {
    background-image: url("../../assets/media/img/bgtiles/groundtile.png");
    background-repeat: repeat;
}

.ground-backdrop h2 {
    color: var(--text-light);
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

header {
    padding-top: 20px;
    padding-bottom: 20px;
}

.left {
    float: left
}

.right {
    float: right
}

.banner {
    margin-top: 50px;
}

#trailer-container {
    cursor: pointer;
}

#trailer-container img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#trailer-container:hover img {
    transform: scale(1.03);
    opacity: 0.9;
}

.banner ~ * {
    padding: 25px;
}

body {
    background-color: var(--accent-2);
    color: var(--text-main);
    font-family: IBM Plex Mono;
}

footer {
    position: relative;
    display: flex;
    width: 100%;

    background-image: url("../../assets/media/img/bgtiles/groundtile.png");
    background-repeat: repeat;
    color: var(--bg-light) !important;
}

header ~ * {
    background-color: var(--bg-main);
}

h2 {
    font-size: xx-large;
}

h1, h2 {
    padding: 20px;
    font-family: Pixelify Sans;
    text-align: center;
}

h3 {
    color: var(--text-light);
}

.alt-row-1-t > h3 {
    color: var(--text-light);
}

.alt-row-2-t > h3 {
    color: var(--text-main);
}

h3, h4 {
    padding: 5px;
    font-family: Pixelify Sans;
    text-align: center;
}

p {
    padding: 5px;
    padding-bottom: 25px;
}

.vertical-split-container {
    position: relative;
    display: flex;
    width: 100%;
    padding: 5px;
    padding-bottom: 45px;
    align-items: stretch;
    gap: 5px;
}

.feed {
    position: relative;
    flex: 1;
    padding-left: 10vw;
    padding-right: 10vw;
}

.left-side,
.right-side {
    position: relative;
    flex: 1;
    padding: 5px;
}

.left-side-large {
    position: relative;
    flex: 2;
}

.right-side-small {
    position: relative;
    flex: 1;
}

.image-container {
    position: relative;
    padding: 15px;
    text-align: center;
    z-index: 0;
}

.showcase-element {
    position: relative;
    height: 45vh;
    object-fit: cover;
}

.image-caption {
    position: absolute;
    bottom: 8px;
    left: 25%;
    color: gray;
    z-index: 1;
}

.background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.centered-container {
    position: relative;
    width: 100%;
}

.column-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: stretch;
    padding-left: 15px;
    padding-right: 15px;
    gap: 5px;
}

.single-column {
    width: 65%;
    margin: auto;
}

.responsive-iframe {
    position: relative;
    width: 100%;
    height: 40vw;
}

.alt-row-1 {
    position: relative;
    background-color: var(--accent-1);
    color: #CED6E0;
    text-align: left;
}

.alt-row-2 {
    position: relative;
    background-color: var(--accent-2);
    text-align: right;
}

.alt-row-1-t {
    position: relative;
    background-color: var(--transparent-1);
    color: var(--text-light);
    text-align: left;
}

.alt-row-2-t {
    position: relative;
    background-color: var(--transparent-2);
    color: var(--text-main);
    text-align: right;
}

.news-container {
    position: relative;
    padding: 15px;
}

.news-element {
    position: relative;
    width: 100%;
    padding: 15px;
    height: auto;
    max-height: 250px;
    object-fit: cover;
}

.carousel {
    object-fit: contain;
}

.carousel-item img {
    object-fit: scale-down;
    max-height: 700px;
}

.carousel-control-prev,
.carousel-control-next {
    mix-blend-mode: difference;
}

/* All images and screenshots are pixelated, remove AA. */
img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    width: 64px;
    height: 64px;
}

#left-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;  
    position: relative;
    flex: 1;
    padding: 5px;
}

#right-footer {
    position: relative;
    flex: 1;
    padding: 5px;
}