@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DBarlow%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B0%2C900%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800%3B1%2C900%26display%3Dswap");

:root {
    --background-color: #121212;
    --panel-color: #444444;
    --detail-color: #D32344;
    --text-color: white;
    --peg-color: #222222;
    --tint-color: rgba(0, 0, 0, 0.7);
    --spacing: max(1vw, 1vh, 10px);
    --spacing-small: max(0.5vw, 0.5vh, 5px);
    --border: 5px;
    --transition-time: 0.2s;
    --gallery-size: 450px;
}

* {
    font-family: 'Barlow', sans-serif;
    color: var(--text-color);
    margin: 0px;
    font-weight: 300;
}

p {
    font-size: 1.15rem;
}

::selection {
    color: var(--background-color);
    background: var(--text-color);
    padding: 0px;
}

.h-list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    align-items: center;
    gap: var(--spacing);
}

.v-list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: start;
    gap: var(--spacing);
}

.box-em {
    background-color: var(--detail-color);
    padding: var(--spacing);
}

.box-reg {
    background-color: var(--panel-color);
    padding: var(--spacing);
    text-align: justify;
}

.gmtk-2021 {
    /* font-weight: bold; */
    background-image: linear-gradient(#03FFC7, #2BBEC3);
}

.gmtk-2022 {
    /* font-weight: bold; */
    background-image: linear-gradient(#FF9C00, #FF0900);
}

.feature {
    /* font-weight: bold; */
    background-image: linear-gradient(#D32344, #D32344);
}

.development {
    /* font-weight: bold; */
    background-image: linear-gradient(#444444, #444444);
}

.playable {
    /* font-weight: bold; */
    background-image: linear-gradient(#116C78, #116C78);
}

/* #region Links */

a:link>span {
    color: var(--text-color);
    transition: color var(--transition-time) ease, background var(--transition-time) ease;
}

a:visited>span {
    color: var(--text-color);
}

a:focus>span {
    color: var(--text-color);
}

a:hover>span {
    color: var(--background-color);
    background: var(--text-color);
}

a:active>span {
    color: var(--background-color);
    background: var(--text-color);
}

/* #endregion */

/* #region Scrollbar */

::-webkit-scrollbar {
    width: var(--border);
}

::-webkit-scrollbar-track {
    /* border-radius: var(--border); */
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    /* border-radius: var(--border); */
    background: var(--detail-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}

/* #endregion */