/*
 * Copyright (c) 2023 GaT8n (https://twitch.tv/gat8n). All rights reserved. This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing. This software is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury.
 */

html[data-mode="home"] #header::before,
#colors:not(:hover, [data-hover="true"]) > span:not(.fa-palette),
html:not([data-wallpaper="spotify"]) #position,
html[data-mode="home"] #bracket,
html:not([data-mode="home"]) #illustration,
html:not([data-play="true"]) #controllers > span.fa-pause,
html[data-play="true"] #controllers > span.fa-eject,
html:not([data-match="0"]) #controllers > span.bracket,
html[data-match="0"] #controllers > span.clash,
.entrant.trophy:not([data-entry="0"]) > span::before,
html[data-over="true"][data-match="0"] #bracket > img,
.column[data-order="-1"] .entrant::after,
.column[data-order="1"] .entrant::after,
html:not([data-match="0"]) #header::before,
html:not([data-match="0"]) .controller.fa-step-backward,
html[data-match="0"]:not([data-expanded="true"]) .controller.fa-lock-open,
html:not([data-match="0"]) .controller.fa-lock-open,
html[data-match="0"][data-expanded="true"] .controller.fa-expand-alt,
.entrant.trophy > i.next,
.entrant.winner > i.next,
html:not([data-format="portrait"]) .entrant.looser:not(:hover) > i.next,
html:not([data-format="portrait"]) #footer .bracket,
.entrant[data-entry="0"] > i.next,
.entrant[data-entry="0"] > i.zoom,
.entrant.trophy > i.zoom,
html[data-mode="home"] #lottie,
html:not([data-match="0"]) #lottie,
html:not([data-mode="home"]) #home,
html:not([data-mode="home"]) .features,
html[data-ingame="true"] #recycle,
html:not([data-match="0"]) #recycle {
    display: none !important;
}

html {
    /*
    TODO: first color set
    --color-background: #2c3e50;
    --color-background-alt: #34495e;
    --color-winner: #f39c12;
    --color-error: #e74c3c;
    --color-error-alt: #c0392b;
    --color-cta: #16a085;
    --color-cta-alt: #1abc9c;
    */
    --color-white: #ecf0f1;
    --color-white-alt: #f1f2f6;
    --color-black: #130f0e;
    --color-text: var(--color-white);
    --color-background: #162432;
    --color-background-alt: #243248;
    --color-winner: #f39c12;
    --color-error: #e84118;
    --color-error-alt: #c23616;
    --color-cta: #27ae60;
    --color-cta-alt: #2ecc71;
    --color-spotify-green: #1DB954;
    --color-spotify-black: #191414;
    --color-pink: #cf6a87;
    --color-red: #b33939;
    --color-orange: #cd6133;
    --color-yellow: #e1b12c;
    --color-green: var(--color-cta);
    --color-bleen: #58B19F;
    --color-blue: #273c75;
    --color-violet: #63437A;
    --color-default: #162432;
    --pixel: calc(1rem / 16);
    --entrant-height: 2rem;
    --entrant-border: 0.25rem;
    --max-width: 100vw;
    --max-height: 100vh;
    --hover: 0.5;
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: monospace;
    overflow: hidden;
}

html[data-color="pink"]     {--color-background: var(--color-pink);}
html[data-color="red"]      {--color-background: var(--color-red); --color-error: var(--color-black);}
html[data-color="orange"]   {--color-background: var(--color-orange);}
html[data-color="yellow"]   {--color-background: var(--color-yellow);}
html[data-color="green"]    {--color-background: var(--color-green);}
html[data-color="bleen"]    {--color-background: var(--color-bleen);}
html[data-color="blue"]     {--color-background: var(--color-blue);}
html[data-color="violet"]   {--color-background: var(--color-violet);}

html[data-color="pink"] {
    --color-text: var(--color-white-alt);
    --color-winner: var(--color-blue);
}

html[data-color="orange"],
html[data-color="yellow"],
html[data-color="green"],
html[data-color="bleen"] {
    --color-text: var(--color-black);
    --color-winner: var(--color-white-alt);
}

html[data-color="orange"] #bracket > img,
html[data-color="yellow"] #bracket > img,
html[data-color="green"] #bracket > img,
html[data-color="bleen"] #bracket > img {
    filter: invert(1);
}

html, body, p {
    margin: 0;
    padding: 0;
}

html:not([data-format="portrait"], [data-mode="home"])[data-screen="unlock"][data-drag="false"][data-match="0"] {
    cursor: grab;
}

html:not([data-drag="true"]) #header,
html:not([data-drag="true"]) #controllers,
html:not([data-drag="true"]) #footer {
    cursor: default !important;
}

html[data-drag="true"] {
    cursor: grabbing;
}

body {
    height: 100vh;
    width: 100vw;
    user-select: none;
    position: relative;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    align-items: center;
    background-color: var(--color-background);
}

html[data-mode="home"] {
    overflow-y: auto !important;
}

#html:not([data-mode="home"]) body {
    overflow: hidden;
    max-height: 100vh;
    max-width: 100vw;
}

#bracket {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#background {
    background-image: url('bg.jpg');
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--color-background);
    filter: grayscale(100%);
    mix-blend-mode: multiply;
}

html[data-mode="home"] #illustration {
    background-image: url('bracket.png');
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

html[data-wallpaper="spotify"] #background {
    opacity: 0.33;
    filter: grayscale(100%) blur(var(--entrant-border));
}

html[data-wallpaper="spotify"][data-position="1"] #background {background-position: top left;}
html[data-wallpaper="spotify"][data-position="2"] #background {background-position: top center;}
html[data-wallpaper="spotify"][data-position="3"] #background {background-position: top right;}
html[data-wallpaper="spotify"][data-position="4"] #background {background-position: center left;}
html[data-wallpaper="spotify"][data-position="5"] #background {background-position: center center;}
html[data-wallpaper="spotify"][data-position="6"] #background {background-position: center right;}
html[data-wallpaper="spotify"][data-position="7"] #background {background-position: bottom left;}
html[data-wallpaper="spotify"][data-position="8"] #background {background-position: bottom center;}
html[data-wallpaper="spotify"][data-position="9"] #background {background-position: bottom right;}

/*region Home*/
#home {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    width: 100vw;
}

#form,
#form + p {
    position: absolute;
    width: calc(50% - 5 * var(--entrant-height));
}

#logo {
    position: absolute;
    margin: 0;
    left: calc(75% + 1.5 * var(--entrant-height));
    transform: translateX(-50%);
    bottom: 50%;
    height: 13vw;
    max-height: 32vh;
    z-index: 2;
}

#form {
    display: flex;
    bottom: calc(50% - 0.5 * var(--entrant-border) - 0.5 * var(--entrant-height));
    right: calc(50% + 4 * var(--entrant-height));
    z-index: 1;
}

#form + p {
    top: calc(50% - 0.5 * var(--entrant-border));
    left: calc(50% + 4 * var(--entrant-height));
    padding-top: calc(var(--entrant-height) / 2);
    font-size: 1vw;
    text-align: center;
    z-index: 1;
}

#error,
#source,
#go {
    outline: none;
    font-weight: bold;
    color: var(--color-text);
}

#error,
#source {
    height: var(--entrant-height);
    line-height: var(--entrant-height);
    padding: 0 calc(var(--entrant-border) * 4);
    border: none;
    border-bottom: var(--entrant-border) solid var(--color-background-alt);
}

html:not([data-format="portrait"]) #source {
    border-image: linear-gradient(90deg, var(--color-background-alt), transparent) 1;
}

#error,
#go {
    width: fit-content;
}

#error {
    order: -1;
    background-color: var(--color-error);
    border-radius: calc(var(--entrant-height) / 2) calc(var(--entrant-height) / 2) 0 0;
}

#error::after {
    content: attr(data-error);
}

#source {
    flex: 1;
    background-color: transparent;
    font-size: calc(var(--entrant-height) / 2);
    text-overflow: ellipsis;
}

#error,
#error + input,
#form.error #source {
    border-color: var(--color-error);
}

html:not([data-format="portrait"])  #error + input,
html:not([data-format="portrait"]) #form.error #source {
    border-image: linear-gradient(90deg, var(--color-error), transparent) 1;
}

#form::before {
    content: "\f304";
    padding-left: calc(var(--entrant-height) / 4);
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    border-bottom: var(--entrant-border) solid var(--color-background-alt);
    line-height: var(--entrant-height);
    width: calc(var(--entrant-height) * 0.5);
}

#form.error::before,
#form.empty::before {
    border-bottom: var(--entrant-border) solid var(--color-error);
}

#form.empty::before {
    color: var(--color-error);
    content: "\f071";
}

#source::placeholder {
    color: var(--color-text);
    opacity: 0.5;
    font-weight: normal;
    font-style: italic;
}

#form.empty #source::placeholder {
    color: var(--color-error);
    opacity: 1;
}

#go {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: calc(4 * var(--entrant-height));
    width: calc(4 * var(--entrant-height));
    line-height: calc(4 * var(--entrant-height));
    border-radius: 50%;
    background-color: var(--color-cta);
    color: var(--color-text);
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 0 0 var(--entrant-border) var(--color-cta-alt),
                0 0 0 calc(2 * var(--entrant-border)) var(--color-background-alt);
    transition: box-shadow 0.4s ease-in-out;
}

#go::before,
#go::after {
    position: absolute;
    height: 100%;
    top: 0;
    width: 100%;
}

#go::after {
    font-style: italic;
    font-family: monospace;
    transition: font-size 0.4s ease-in-out;
    left: 0;
    font-size: calc(var(--entrant-height) * 1.25);
    content: "GO";
}

#go::before {
    opacity: 0.25;
    display: block;
    font-size: calc(var(--entrant-height) * 2);
    margin-left: calc(1.5*var(--entrant-border));
}

#go:hover {
    box-shadow: inset 0 0 0 calc(2 * var(--entrant-height)) var(--color-cta-alt),
                0 0 0 var(--entrant-height) var(--color-background-alt);
}

#go:active {
    box-shadow: inset 0 0 0 calc(2 * var(--entrant-height)) var(--color-cta-alt),
                0 0 0 var(--entrant-border) var(--color-background-alt);
}

#form.error ~ #go {
    --color-cta-alt: var(--color-error);
    --color-cta: var(--color-error-alt);
}

#go:hover:not(:active)::after {
    font-size: calc(1.5 * var(--entrant-height));
}
/*endregion*/

#bracket > img {
    position: absolute;
    width: calc(var(--entrant-height) * 1.5);
    bottom: 50%;
}

html[data-match="0"] #bracket {
    padding: calc(var(--entrant-height) * 2) 0;
}

html:not([data-match="0"]) #bracket > img {
    top: 50%;
    transform: translateY(-50%) scale(2);
    z-index: -1;
    opacity: 0.25 !important;
}

html:not([data-match="0"])[data-side="-1"] #bracket > img {
    transform: translateY(-50%) scale(2);
}

html:not([data-match="0"])[data-side="1"] #bracket > img {
    transform: translateY(-50%) scale(-2);
}

html:not([data-match="0"])[data-side="0"] #bracket > img {
    transform: translateY(-50%) scale(2) rotate(90deg)
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 0;
    align-self: center;
}

.column[data-order="1"] {
    margin-left: calc(var(--entrant-border) * 2);
}

.column[data-order="-1"] {
    margin-right: calc(var(--entrant-border) * 2);
}

.entrant {
    opacity: 1;
    display: flex;
    position: relative;
    box-sizing: border-box;
    height: var(--entrant-height);
    width: calc(var(--entrant-height) * 4);
    border: calc(2 * var(--pixel)) solid;
    border-radius: calc(var(--entrant-height) / 2);
    margin: calc(var(--entrant-height) / 4) calc(var(--entrant-height) / 2);
    background-color: var(--color-background);
}

.column > .entrant.winner[data-side="-1"][data-winner="top"] {
    border-bottom-right-radius: 0;
}

.column > .entrant.winner[data-side="-1"][data-winner="bottom"] {
    border-top-right-radius: 0;
}

.column > .entrant.winner[data-side="1"][data-winner="top"] {
    border-bottom-left-radius: 0;
}

.column > .entrant.winner[data-side="1"][data-winner="bottom"] {
    border-top-left-radius: 0;
}

.entrant.winner,
.entrant::after {
    color: var(--color-winner);
}

.entrant.looser {
    border-color: transparent;
}

.entrant.looser > p {
    opacity: 0.2;
}

.entrant > span {
    user-select: none;
    opacity: 1 !important;
    display: block;
    --span-size: calc(var(--entrant-height) + var(--entrant-border));
    width: var(--span-size);
    min-width: var(--span-size);
    line-height: var(--span-size);
    height: var(--span-size);
    min-height: var(--span-size);
    font-size: var(--entrant-height);
    border-radius: 50%;
    color: var(--color-background);
    background-image: linear-gradient(to bottom, var(--color-text), var(--color-text));
    background-size: cover;
    background-position: center center;
    text-align: center;
    position: relative;
    box-shadow: 0 0 0 var(--entrant-border) var(--color-background);
    margin: calc(-1 * var(--entrant-border)) var(--entrant-border) var(--entrant-border) var(--entrant-border);
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: rotate(0) scale(0.8);
        opacity: 0.8;
    }
    20% {
        transform: rotate(10deg) scale(1);
        opacity: 1;
    }
    40% {
        transform: rotate(-5deg) scale(0.8);
        opacity: 0.8;
    }
    60% {
        transform: rotate(-15deg) scale(1);
        opacity: 1;
    }
    80% {
        transform: rotate(0) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: rotate(5deg) scale(1);
        opacity: 1;
    }
}

.entrant.looser > span::after,
html[data-format="portrait"] .entrant.looser > span::after {
    display: block !important;
    content: "" !important;
    background-color: var(--color-background);
    opacity: 0.75;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.entrant:not(.trophy):not([data-entry="0"]) > span:not(:hover)::before,
.column[data-order="-1"] .entrant.winner > span::before,
.column[data-order="1"] .entrant.winner > span::before {
    content: "";
}

.entrant.looser > span::before,
html[data-format="portrait"] .entrant:not(.trophy):not([data-entry="0"]) > span::before,
html[data-format="portrait"] .entrant:not(.trophy):not([data-entry="0"]) > span::after,
.entrant.trophy:not([data-entry="0"]) > span::after,
.entrant:not(.trophy):not([data-entry="0"]):hover > span::before,
.entrant:not(.trophy):not([data-entry="0"]):hover > span::after,
.entrant:not(.trophy):not([data-entry="0"]) > span:hover::before,
.entrant:not(.trophy):not([data-entry="0"]) > span:hover::after,
.column[data-order="-1"] .entrant.winner > span::before,
.column[data-order="1"] .entrant.winner > span::before,
.column[data-order="-1"] .entrant.winner > span::after,
.column[data-order="1"] .entrant.winner > span::after {
    display: block;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

html[data-format="portrait"] .entrant:not(.trophy, .looser):not([data-entry="0"]) > span::before,
.entrant:not(.trophy):not([data-entry="0"]):hover > span::before,
.entrant:not(.trophy):not([data-entry="0"]) > span:hover::before {
    font-size: calc(var(--entrant-height) * 0.5);
    content: "\f04b";
    z-index: 1;
}

.column[data-order="-1"] .entrant.winner > span::before,
.column[data-order="1"] .entrant.winner > span::before {
    font-size: calc(var(--entrant-height) * 0.5);
    content: "\f091";
    z-index: 1;
}

.entrant:not(.trophy):not([data-entry="0"]):hover > span::after,
.entrant:not(.trophy):not([data-entry="0"]) > span:hover::after,
html[data-format="portrait"] .entrant:not(.trophy, .looser):not([data-entry="0"]) > span::after {
    content: "";
    background-color: var(--color-text);
    opacity: var(--hover);
    border-radius: 50%;
}

html[data-format="portrait"] .entrant:not(.trophy, .looser):not([data-entry="0"]) > span::after {
    opacity: 0.25 !important;
}

.column[data-order="-1"] .entrant.winner > span::after,
.column[data-order="1"] .entrant.winner > span::after {
    content: "" !important;
    background-color: var(--color-winner) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px var(--color-background);
}

.entrant:not(.trophy)[data-entry="0"] > span {
    animation-name: rotate;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.entrant::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: calc(var(--entrant-height) * 1.5);
    height: 0;
}

.entrant.winner::after {
    border-color: inherit;
    min-height: calc((var(--entrant-height) / 2) - var(--entrant-border));
}

.entrant[data-side="-1"][data-winner="top"]::after {
    border-top-right-radius: 100%;
    box-shadow: var(--pixel) calc(-1 * (var(--entrant-border) / 2)) var(--color-winner),
                calc(var(--entrant-border) / 2) calc(-1 * var(--pixel)) var(--color-winner);
}

.entrant[data-side="1"][data-winner="top"]::after {
    border-top-left-radius: 100%;
    box-shadow: calc(-1 * var(--pixel)) calc(-1 * (var(--entrant-border) / 2)) var(--color-winner),
                calc(-1 * (var(--entrant-border) / 2)) calc(-1 * var(--pixel)) var(--color-winner);
}

.entrant[data-side="-1"][data-winner="bottom"]::after {
    border-bottom-right-radius: 100%;
    box-shadow: var(--pixel) calc(var(--entrant-border) / 2) var(--color-winner),
                calc(var(--entrant-border) / 2) var(--pixel) var(--color-winner);
}

.entrant[data-side="1"][data-winner="bottom"]::after {
    border-bottom-left-radius: 100%;
    box-shadow: calc(-1 * var(--pixel)) calc(var(--entrant-border) / 2) var(--color-winner),
                calc(-1 * (var(--entrant-border) / 2)) var(--pixel) var(--color-winner);
}

.entrant[data-side="-1"]::after {
    border-left: none;
    left: 100%;
}

.entrant[data-side="1"]::after {
    border-right: none;
    right: 100%;
}

.entrant[data-winner="top"]::after {
    top: calc(100% + (var(--entrant-border) / 2));
}

.entrant[data-winner="bottom"]::after {
    bottom: calc(var(--entrant-height) - (var(--entrant-border) / 2));
}

.entrant[data-side="-1"] {
    padding-right: calc(2 * var(--entrant-border));
}

.entrant[data-side="1"] {
    padding-left: calc(2 * var(--entrant-border));
}

.entrant[data-side="-1"] > span {
    margin-left: calc(-1 * var(--entrant-border));
}

.entrant[data-side="1"] > span {
    margin-right: calc(-1 * var(--entrant-border));
}

.entrant[data-side="1"] {
    flex-direction: row-reverse;
}

.entrant > p {
    flex: 1;
    font-size: calc(var(--entrant-height) / 3);
    font-weight: bold;
    max-width: calc(100% - var(--entrant-height) - var(--entrant-border));
    user-select: none;
}

html:not([data-match="0"]) .entrant > p::before {
    font-size: calc(var(--entrant-height) / 4);
}

html:not([data-match="0"]) .entrant > p::after {
    font-size: calc(var(--entrant-height) / 6);
}

.entrant[data-side="-1"] > p {
    text-align: left;
}

.entrant[data-side="1"] > p {
    text-align: right;
}

.entrant:not(.trophy):not([data-entry="0"]) {
    cursor: default;
}

.entrant:not(.trophy):not([data-entry="0"]) > span {
    cursor: pointer;
}

.entrant:not(.trophy)[data-entry="0"] > p::before,
.entrant:not(.trophy)[data-entry="0"] > p::after {
    content: "";
    opacity: 0;
    width: 0;
}

.entrant > p::before,
.entrant > p::after {
    opacity: 1;
    transition: 0.8s ease-in-out;
    transition-property: width;
    height: calc((var(--entrant-height) - (var(--entrant-border) * 2)) / 2);
    line-height: calc((var(--entrant-height) - (var(--entrant-border) * 2)) / 2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
}

.entrant > p::before {
    margin-top: calc(var(--entrant-border) * 0.5);
}

.entrant > p::after {
    margin-bottom: calc(var(--entrant-border) * 0.5);
    opacity: var(--hover);
    --transform-y: calc(-0.5 * var(--entrant-border));
    transition-delay: 0.8s;
}

.entrant:not(.trophy) > p::after {
    transform: translateY(var(--transform-y));
}

.entrant[data-side="-1"] > i.zoom {
    left: calc(50% - (var(--entrant-height) * 0.25));
}

.entrant[data-side="1"] > i.zoom {
    right: calc(50% - (var(--entrant-height) * 0.25));
}

.entrant > i.zoom {
    position: absolute;
    color: var(--color-text) !important;
    text-shadow: 0 0 calc(var(--entrant-height) / 2) var(--color-background);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    font-size: calc(var(--entrant-height) * 1.5);
    height: calc(var(--entrant-height) + 2 * var(--entrant-border));
    width: calc(var(--entrant-height) + 2 * var(--entrant-border));
    line-height: var(--entrant-height);
    z-index: 10;
    display: flex;
    align-items: flex-end;
}

html:not([data-match="0"]) .entrant > i.zoom {
    font-size: calc(var(--entrant-height) * 0.75);
    align-items: center;
    justify-content: center;
}

html:not([data-match="0"]) .entrant[data-side="-1"] > i.zoom {
    right: 0 !important;
    left: unset;
}

html:not([data-match="0"]) .entrant[data-side="-1"] > i.zoom::before {
    content: "\f050";
}

html:not([data-match="0"]) .entrant[data-side="1"] > i.zoom {
    left: 0 !important;
    right: unset;
}

html:not([data-match="0"]) .entrant[data-side="1"] > i.zoom::before {
    content: "\f049";
}

.entrant > i.next:hover ~ i.zoom,
.entrant > span:hover ~ i.zoom,
.entrant:not(:hover) > i.zoom {
    opacity: 0;
}

.entrant:hover i.zoom,
.entrant > p:hover + i.zoom {
    opacity: 0.2;
}

.entrant > i.zoom:hover {
    opacity: 0.6;
}

.entrant > i.next {
    position: absolute;
    top: 50%;
    text-align: center;
    line-height: calc(var(--entrant-height) * 0.75);
    height: calc(var(--entrant-height) * 0.75);
    width: calc(var(--entrant-height) * 0.75);
    font-size: calc(var(--entrant-height) * 0.5);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

.entrant > i.next::before {
    animation-delay: -1s;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

.entrant:not(.looser) > i.next::before {
    position: absolute;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: center left;
}

.column[data-order="-1"] .entrant:hover > i.next::before,
.column[data-order="1"] .entrant:hover > i.next::before {
    position: absolute;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: bottom left;
    animation-name: check-thumb;
}

.column:not([data-order="-1"]):not([data-order="1"]) .entrant:not(.looser):nth-child(even):hover > i.next::before {
    animation-name: check-top;
}

.column:not([data-order="-1"]):not([data-order="1"]) .entrant:not(.looser):nth-child(odd):hover > i.next::before {
    animation-name: check-bottom;
}

@keyframes check-thumb {
    0% {
        transform: rotate(0deg) translateX(-50%) translateY(0);
    }
    20% {
        transform: rotate(-10deg) translateX(-50%) translateY(-10%);
    }
    40% {
        transform: rotate(10deg) translateX(-50%) translateY(20%);
    }
    50% {
        transform: rotate(-5deg) translateX(-50%) translateY(0);
    }
    60% {
        transform: rotate(15deg) translateX(-50%) translateY(20%);
    }
    70% {
        transform: rotate(0deg) translateX(-50%) translateY(0);
    }
    100% {
        transform: rotate(0deg) translateX(-50%) translateY(0);
    }
}

@keyframes check-bottom {
    0% {
        transform: rotate(0deg) translateX(-50%);
    }
    20% {
        transform: rotate(-10deg) translateX(-60%);
    }
    40% {
        transform: rotate(10deg) translateX(-30%);
    }
    50% {
        transform: rotate(-5deg) translateX(-50%);
    }
    60% {
        transform: rotate(15deg) translateX(-30%);
    }
    70% {
        transform: rotate(0deg) translateX(-50%);
    }
    100% {
        transform: rotate(0deg) translateX(-50%);
    }
}

@keyframes check-top {
    0% {
        transform: rotate(0deg) translateX(-50%);
    }
    20% {
        transform: rotate(10deg) translateX(-60%);
    }
    40% {
        transform: rotate(-10deg) translateX(-30%);
    }
    50% {
        transform: rotate(5deg) translateX(-50%);
    }
    60% {
        transform: rotate(-15deg) translateX(-30%);
    }
    70% {
        transform: rotate(0deg) translateX(-50%);
    }
    100% {
        transform: rotate(0deg) translateX(-50%);
    }
}

.column:not([data-order="-1"]):not([data-order="1"]) .entrant.looser > i.next::before {
    position: absolute;
    transform: translateX(-50%) rotate(0deg);
}

.column:not([data-order="-1"]):not([data-order="1"]) .entrant.looser > i.next:hover::before {
    animation-name: nope;
    animation-delay: -1s;
    transform-origin: bottom center;
}

@keyframes nope {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    40% {
        transform: translateX(-50%) rotate(-5deg);
    }
    50% {
        transform: translateX(-50%) rotate(10deg);
    }
    60% {
        transform: translateX(-50%) rotate(-10deg);
    }
    70% {
        transform: translateX(-50%) rotate(10deg);
    }
    80% {
        transform: translateX(-50%) rotate(-5deg);
    }
    90% {
        transform: translateX(-50%) rotate(5deg);
    }
    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}

.column[data-order="-1"] .entrant > i.next::before,
.column[data-order="1"] .entrant > i.next::before {
    content: "\f164";
}

html[data-match="0"][data-bracket="2"] .column[data-order="-1"] .entrant:not(.looser) .next,
html[data-match="0"][data-bracket="2"] .column[data-order="1"] .entrant:not(.looser) .next {
    border: calc(var(--entrant-border) / 2) solid;
}

html[data-match="0"][data-bracket="2"] .column[data-order="-1"] .entrant:not(.looser),
html[data-match="0"][data-bracket="2"] .column[data-order="1"] .entrant:not(.looser) {
    transform: scale(2);
}

html[data-match="0"][data-bracket="2"]:not([data-format="portrait"]) .column[data-order="-1"] .entrant:not(.looser),
html[data-match="0"][data-bracket="2"]:not([data-format="portrait"]) .column[data-order="1"] .entrant:not(.looser) {
    border: var(--pixel) solid;
}

html[data-match="0"][data-bracket="2"] .column[data-order="-1"] {
    margin-right: calc(var(--entrant-height) * 4);
}

html[data-match="0"][data-bracket="2"] .column[data-order="1"] {
    margin-left: calc(var(--entrant-height) * 4);
}

.entrant:not(.looser) > i.next {
    color: var(--color-background);
    background-color: var(--color-text);
    border: var(--entrant-border) solid var(--color-background);
}

.entrant.looser > i.next::before {
    content: "\f0a6";
}

.entrant.looser > i.next {
    color: var(--color-text);
    opacity: 0.5;
}

.entrant > i.next:hover {
    color: var(--color-winner);
    opacity: 1;
}

.entrant.looser > i.next:hover {
    color: var(--color-error);
}

.entrant[data-side="-1"] > i.next {
    transform: translateY(-50%) translateX(75%);
    right: 0;
}

.column:not([data-order="1"], [data-order="-1"]) .entrant[data-side="-1"]:not(.looser):nth-child(odd) > i.next {
    transform: translateY(-50%) translateX(75%) rotate(30deg);
}

.column:not([data-order="1"], [data-order="-1"]) .entrant[data-side="-1"]:not(.looser):nth-child(even) > i.next {
    transform: translateY(-50%) translateX(75%) rotate(-30deg);
}

.entrant[data-side="1"] > i.next {
    transform: translateY(-50%) translateX(-75%) scaleX(-1);
    left: 0;
}

.column:not([data-order="1"], [data-order="-1"]) .entrant[data-side="1"]:not(.looser):nth-child(odd) > i.next {
    transform: translateY(-50%) translateX(-75%) scaleX(-1) rotate(30deg);
}

.column:not([data-order="1"], [data-order="-1"]) .entrant[data-side="1"]:not(.looser):nth-child(even) > i.next {
    transform: translateY(-50%) translateX(-75%) scaleX(-1) rotate(-30deg);
}

.column:not([data-order="1"]) .entrant[data-side="1"].looser > i.next {
    transform: translateY(-50%) translateX(-75%) scaleX(1);
    left: 0;
}

.entrant.trophy {
    width: fit-content;
    /*max-width: calc(var(--entrant-height) * 10);*/
    position: absolute;
    z-index: -1;
    bottom: calc(50% + var(--entrant-height) * 3 - var(--entrant-border) * 2);
    height: calc(2 * var(--entrant-height));
    border-radius: var(--entrant-height);
    margin: 0;
}

.entrant.trophy > p {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--entrant-height) * 2) 0 calc(var(--entrant-height) / 2);
    text-align: center;
    font-size: calc((2 / 3) * var(--entrant-height));
}

.entrant.trophy[data-entry="0"] > p::after {
    opacity: 1;
}

.entrant.trophy > p > a.icon {
    color: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    --icon-size: calc(var(--entrant-height) * 1.5);
    height: calc(var(--icon-size) - var(--entrant-border));
    width: calc(var(--icon-size) - var(--entrant-border));
    font-size: var(--icon-size);
    --icon-gap: calc(var(--entrant-height) * 0.25);
    top: var(--icon-gap);
    right: var(--icon-gap);
    border-radius: 50%;
    opacity: 0.25;
    outline: none;
}

.entrant.trophy > p > a.icon:hover {
    color: var(--color-spotify-green);
    background-color: var(--color-spotify-black);
    opacity: 1;
    box-shadow: 0 0 0 calc(var(--icon-gap) + var(--pixel)) var(--color-text);
}

.entrant.trophy > p::before,
.entrant.trophy > p::after {
    margin: unset;
    height: var(--entrant-height);
    line-height: var(--entrant-height);
    opacity: 1 !important;
}

.entrant.trophy > span {
    position: absolute;
    z-index: 1;
    width: calc(var(--entrant-height) * 6 - 2 * var(--entrant-border));
    min-width: calc(var(--entrant-height) * 6 - 2 * var(--entrant-border));
    height: calc(var(--entrant-height) * 6 - 2 * var(--entrant-border));
    top: calc(var(--entrant-height) * 2 - 2 * var(--entrant-border));
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.entrant.trophy > span::before {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    font-size: calc(var(--entrant-height) * 4 + var(--entrant-border));
    line-height: calc(var(--entrant-height) * 6);
    z-index: 1;
}

/*region Controllers*/
#controllers {
    user-select: none;
    position: absolute;
    display: flex;
    align-items: center;
    --height: calc(var(--entrant-height) * 2);
    --size: calc(var(--height) / 2);
    height: var(--height);
    width: calc(var(--height) * 3);
    border-radius: calc(var(--size) + var(--entrant-border));
    bottom: calc(var(--entrant-height) * 4);
    background-color: var(--color-text);
    border: var(--entrant-border) solid var(--color-background);
    left: 50%;
    transform: translateX(-50%);
}

#controllers > span {
    cursor: pointer;
    height: var(--height);
    width: var(--height);
    line-height: var(--height);
    font-size: var(--size);
    text-align: center;
    border-radius: 50%;
}

#controllers > span.fa-search-minus,
#controllers > span.fa-search-plus,
#controllers > span.fa-step-backward,
#controllers > span.fa-step-forward {
    color: var(--color-cta);
    left: calc(var(--height) / 2);
}

#controllers > span.fa-sitemap,
#controllers > span.fa-eject {
    color: var(--color-winner);
}

#controllers > span.fa-pause {
    color: var(--color-error);
}

#controllers > span:not(:hover) {
    color: var(--color-background);
}

#recycle {
    background-color: var(--color-background);
    transition: box-shadow  0.3s ease-in-out, color  0.3s ease-in-out;
}

#recycle:hover {
    box-shadow: inset 0 0 0 calc(1 * var(--entrant-height)) var(--color-text),
                0 0 0 var(--entrant-border) var(--color-background) !important;
}

#recycle.fa-recycle {
    color: var(--color-white) !important;
    box-shadow: inset 0 0 0 calc(1 * var(--entrant-height)) var(--color-cta),
                0 0 0 var(--entrant-border) var(--color-background);
}

#recycle.fa-recycle:hover {
    color: var(--color-cta) !important;
}

#recycle.fa-random {
    box-shadow: inset 0 0 0 calc(1 * var(--entrant-height)) var(--color-winner),
                0 0 0 var(--entrant-border) var(--color-background);
}

#recycle.fa-random:hover {
    color: var(--color-winner) !important;
}

#colors {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--entrant-height) * 1.5);
    border-radius: calc(var(--entrant-height) * 0.75);
    left: calc(var(--entrant-height) * 0.5);
    bottom: calc(var(--entrant-height) * 0.25);
    padding: 0;
    margin: 0;
}

#colors[data-hover="true"],
#colors:hover {
    background-color: var(--color-text);
}

#colors[data-hover="true"] > .fa-palette,
#colors:hover > .fa-palette {
    color: var(--color-background) !important;
    opacity: 1 !important;
}

#colors > .fa-palette {
    order: 1;
    margin: calc(var(--entrant-height) * 0.25);
}

#colors > span:not(.fa-palette) {
    opacity: 1;
    margin: calc(var(--entrant-height) * 0.25)
            calc(var(--entrant-height) * 0.25)
            0
            calc(var(--entrant-height) * 0.25);
}

#colors > span:not(.fa-palette):hover::before {
    content: "\f192"
}

#footer .fa-images {
    position: absolute;
    left: calc(var(--entrant-height) * 2);
}

#position {
    cursor: pointer;
    position: absolute;
    height: calc(1.5 * var(--entrant-height));
    width: calc(1.5 * var(--entrant-height));
    left: calc(4 * var(--entrant-height));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    margin: 0;
    padding: 0;
}

#position > .fa-border-none {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--entrant-height) * 1.35);
    opacity: 0.2;
}

#position > .fa-square {
    font-size: calc(var(--entrant-height) / 4);
    height: calc(var(--entrant-height) * 1.5 / 3);
    width: calc(var(--entrant-height) * 1.5 / 3);
    line-height: calc(var(--entrant-height) * 1.5 / 3);
    text-align: center;
    opacity: 0;
    z-index: 1;
}

#position > .fa-square:hover {
    color: var(--color-winner);
    opacity: 1;
    font-weight: bold !important;
}

#header,
#footer {
    position: fixed;
    height: calc(var(--entrant-height) * 2);
    align-self: stretch;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    z-index: 10;
    width: 100vw;
    left: 0;
}

#header {
    top: 0;
    box-shadow: rgba(0,0,0,0.25) 0 var(--entrant-border) var(--entrant-border);
}

#header::before {
    content: "\f0c8";
    font-size: calc(1.5 * var(--entrant-height));
    font-weight: bold;
    opacity: 0.1;
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: calc(0.25 * var(--entrant-height));
    color: var(--color-text);
    z-index: -1;
    text-align: center;
    width: calc(2 * var(--entrant-height));
}

#footer {
    bottom: 0;
    box-shadow: rgba(0,0,0,0.25) 0 calc(var(--entrant-border) * -1) var(--entrant-border);
}

#header > p {
    opacity: 0.33;
}

.controller {
    font-size: var(--entrant-height);
    line-height: var(--entrant-height) !important;
    height: var(--entrant-height);
    width: var(--entrant-height);
    margin: 0 calc(var(--entrant-height) / 2);
    opacity: 0.2;
    transition: 0.1s ease-in-out;
    user-select: none;
    text-decoration: none;
    color: var(--color-text);
}

html[data-mode="home"] .controller {
    font-size: calc(var(--entrant-height) * 0.75);
}

.controller.fa-twitter:hover {
    color: #3498db;
}

.controller.fa-instagram:hover {
    color: #f39c12;
}

.controller.fa-twitch:hover {
    color: #9b59b6;
}

.controller::before,
.controller::after {
    cursor: pointer;
}

.controller:hover {
    color: var(--color-winner);
    opacity: 1 !important;
}

html[data-volume="0"] .controller[data-volume="0"],
.controller[data-volume="0"]:hover,
.controller.fa-step-backward:hover {
    color: var(--color-error);
}

#selector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--entrant-height);
    border: none;
    color: var(--color-text);
    outline: none;
    user-select: none;
    font-size: calc(var(--entrant-height) * 0.75);
    font-weight: bold;
    text-align: center;
    padding-right: var(--entrant-height);
    background: transparent;
    z-index: 1;
}

#selector + i {
    height: var(--entrant-height);
    line-height: var(--entrant-height);
    width: 0;
    --translate: calc(-1 * var(--entrant-height));
    transform: translateX(var(--translate));
    color: var(--color-text);
    font-size: calc(var(--entrant-height) * 0.75);
}

#selector optgroup {
    background: var(--color-background);
    font-size: calc(var(--entrant-height) * 0.5);
    text-align: left;
}

#selector option {
    background: var(--color-background);
    font-size: calc(var(--entrant-height) * 0.75);
}

.controller.fa-caret-square-right {
    display: flex;
}

.controller.fa-caret-square-right::after {
    content: " Next";
    font-family: monospace;
    font-size: calc(var(--entrant-height) * 0.75);
    font-style: italic;
    line-height: var(--entrant-height);
    text-indent: calc(var(--entrant-height) / 2);
}

.controller.fa-lock-open {
    font-size: calc(0.75 * var(--entrant-height));
}

.controller.fa-question,
.controller.fa-step-backward,
.controller.fa-lock-open,
.controller.fa-expand-alt {
    text-align: center;
    position: absolute;
}

.controller.fa-step-backward {
    left: calc(var(--entrant-height) * 0.25);
}

.controller.fa-question,
.controller.fa-lock-open,
.controller.fa-expand-alt {
    right: calc(var(--entrant-height) * 0.25);
}

.controller.fa-lock-open {
    opacity: 0.3;
}

.controller.fa-expand-alt {
    opacity: 0.5;
}

#controllers .controller.bracket {
    font-size: calc(var(--entrant-height) * 0.75);
    z-index: 1;
}

#controllers .controller.bracket.fa-sitemap::before {
    position: absolute;
    transform: translateY(-50%) rotate(90deg);
    top: 50%;
}

#controllers .controller.bracket.fa-search-minus {
    margin-right: 0;
}

#controllers .controller.bracket.fa-search-plus {
    margin-left: 0;
}

#controllers .controller.bracket:not(.fa-sitemap) {
    transform: translateY(calc(var(--entrant-border) * 2 - var(--pixel)));
}

html[data-match="0"][data-screen="lock"] .controller.fa-lock-open::before {
    content: "\f023";
}

html:not([data-match="0"]) .controller.fa-expand-alt::before {
    content: "\f052";
}

#footer .controller.bracket.fa-fast-backward {
    order: -1;
}
/*endregion*/

/*region Infos*/
#info {
    position: absolute;
    width: calc(50% - 8 * var(--entrant-height));
    max-height: calc(100% - 10 * var(--entrant-height));
    background: var(--color-background-alt);
    overflow-y: auto;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: 0.8s ease-in-out;
    z-index: 3;
    padding: var(--entrant-height) calc(2 * var(--entrant-height)) var(--entrant-height) var(--entrant-height);
    border-radius: var(--entrant-height) 0 0 var(--entrant-height);
    border: var(--entrant-border) solid var(--color-text);
    border-right: none;
}

#info *:not(.fa-times-circle) {
    user-select: auto;
}

#info a {
    color: var(--color-text);
}

#info .controller {
    position: sticky;
    top: 0;
    margin-left: calc(100% + (var(--entrant-height) / 2));
}

#info .controller:hover {
    color: var(--color-error);
}

#info em {
    text-decoration: underline;
}

#info h2:first-of-type {
    margin-top: calc(-1 * var(--entrant-height));
}

#info h2 {
    color: var(--color-winner);
}

#info h2 > .fas:not(.fa-step-backward) {
    color: #f1c40f;
}

html:not([data-help="true"]) #info {
    transform: translateX(100%) translateY(-50%);
}

#more {
    display: block;
    margin-top: calc(var(--entrant-height) * 2);
    width: fit-content;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: calc(var(--entrant-height) * 1.5);
    line-height: calc(var(--entrant-height) * 1.5);
    color: var(--color-background);
    background-color: var(--color-text);
    font-weight: bold;
    cursor: pointer;
    padding: 0 calc(var(--entrant-height) * 0.75);
    border-radius: calc(var(--entrant-height) * 0.75);
    font-size: calc(var(--entrant-height) / 2);
}

#more:hover {
    color: var(--color-text);
    background-color: var(--color-cta);
}
/*endregion*/

#lottie {
    position: absolute;
    width: calc(var(--entrant-height) * 16);
    max-width: 100vw;
    height: calc(var(--entrant-height) * 16);
    max-height: 100vh;
    top: 50%;
    transform: translateY(calc(-50% - var(--entrant-height)));
    z-index: -1;
    opacity: 0.25;
}

@media screen and (orientation: portrait) {
    #header::before,
    .controller.fa-lock-open,
    #selector, #colors, #footer .fa-images, #position,
    html:not([data-mode="home"]) #header > .controller,
    html:not([data-bracket="2"]) #bracket > img,
    html:not([data-bracket="2"]) .entrant.trophy,
    .entrant.trophy p,
    .entrant .zoom,
    html[data-match="0"] #controllers,
    html:not([data-match="0"]) #header .fa-expand-alt,
    #header > .controller.fa-caret-square-right::after,
    #footer .controller.audio {
        display: none !important;
    }

    html {
        font-size: unset !important;
    }

    #bracket {
        max-width: var(--max-width);
        max-height: var(--max-height);
    }

    html[data-match="0"][data-bracket="2"] #bracket {
        flex-direction: column;
    }

    html[data-match="0"][data-bracket="2"] #bracket .column {
        flex: 1;
    }

    .entrant.trophy {
        border: none;
    }

    #controllers {
        width: calc(var(--height) * 4);
        justify-content: space-between;
    }

    #header > .controller.fa-caret-square-right,
    #header > .controller.fa-caret-square-left {
        position: absolute;
        z-index: 1;
    }

    #header::after {
        display: block;
        font-family: monospace;
        white-space: nowrap;
        flex: 1;
        text-align: center;
        padding-left: 0 calc(2 * var(--entrant-height));
        font-size: calc(var(--entrant-height) * 0.75);
        line-height: var(--entrant-height);
        height: var(--entrant-height);
        overflow: hidden;
        text-overflow: ellipsis;
        align-self: flex-start;
        margin: calc(2 * var(--entrant-border)) calc(2 * var(--entrant-height)) 0 calc(2 * var(--entrant-height));
    }

    #header > .controller.fa-step-backward:not(:hover)::after {
        opacity: 0.25;
    }

    #footer {
        bottom: unset;
        top: 0;
        background: transparent;
    }

    #footer::before {
        flex: 1;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 0.5;
        align-self: flex-end;
        margin-bottom: calc(2 * var(--entrant-border));
    }

    html[data-bracket="2"] #footer::before {
        content: "Final";
    }

    .entrant[data-winner="top"]::after {
        top: calc(100% + var(--pixel));
    }

    .entrant[data-winner="bottom"]::after {
        bottom: calc(var(--entrant-height) - var(--pixel));
    }

    #selector {
        background: transparent !important;
    }

    #form,
    #form + p {
        width: calc(100% - var(--entrant-height) * 2);
    }

    #form {
        bottom: calc(50% + var(--entrant-height) * 3);
        right: unset;
        left: var(--entrant-height);
    }

    #form + p {
        top: calc(50% + var(--entrant-height) * 3);
        left: var(--entrant-height);
        font-size: calc(var(--entrant-height) / 2);
    }

    #logo {
        bottom: calc(50% + var(--entrant-height) * 5);
        width: 60%;
        max-height: 16vh;
        left: 50%;
        height: unset;
    }

    #info {
        max-height: calc(100% - 8 * var(--entrant-height));
        width: calc(100vw - 4 * var(--entrant-height));
    }
}

html[data-color="halloween"]:not([data-format="portrait"]) #footer::before,
html[data-color="halloween"]:not([data-format="portrait"]) #footer::after,
html[data-color="xmas"]:not([data-format="portrait"]) #footer::before,
html[data-color="xmas"]:not([data-format="portrait"]) #footer::after,
html[data-color="love"]:not([data-format="portrait"]) #footer::before,
html[data-color="love"]:not([data-format="portrait"]) #footer::after {
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    position: absolute;
    display: block;
    font-size: calc(1.5 * var(--entrant-height));
    width: calc(1.5 * var(--entrant-height));
    height: calc(1.5 * var(--entrant-height));
    line-height: calc(1.5 * var(--entrant-height));
}

/*region Halloween*/
@keyframes peekaboo {
    0% {
        top: calc(-0.25 * var(--entrant-height));
        opacity: 0.25;
    }
    15% {
        top: calc(0.25 * var(--entrant-height));
        opacity: 0.1;
    }
    30% {
        top: calc(-0.1 * var(--entrant-height));
        opacity: 0.15;
    }
    45% {
        top: calc(0.2 * var(--entrant-height));
        opacity: 0.05;
    }
    60% {
        top: calc(-0.2 * var(--entrant-height));
        opacity: 0.33;
    }
    80% {
        top: calc(0.1 * var(--entrant-height));
        opacity: 0.2;
    }
    100% {
        top: calc(-0.25 * var(--entrant-height));
        opacity: 0.25;
    }
}

html[data-color="halloween"] {
    --color-background: #A14000;
}

html[data-color="halloween"] #background {
    background-image: url('bg_halloween.jpg');
}

html[data-color="halloween"]:not([data-format="portrait"]) #footer::before {
    content: "\f520";
    color: var(--color-background);
    left: var(--entrant-height);
    top: calc(-1.5 * var(--entrant-height));
}

html[data-color="halloween"]:not([data-format="portrait"]) #footer::after {
    content: "\f6e2";
    color: var(--color-text);
    right: var(--entrant-height);
    top: calc(-0.25 * var(--entrant-height));
    opacity: 0.25;
    animation: peekaboo 16s infinite ease-in-out;
}

html[data-color="halloween"] .controller[data-volume="0"]::before {
    content: "\f714";
}

html[data-color="halloween"] #selector + i::before {
    content: "\f71e";
}

@media screen and (orientation: portrait) {
    html[data-color="halloween"]:not([data-format="portrait"]) #footer::before {
        left: calc(0.5 * var(--entrant-height));
    }

    html[data-color="halloween"] #footer::after {
        right: calc(0.5 * var(--entrant-height));
    }

    html[data-color="halloween"] #footer::after {
        transform: translateY(-50%);
    }
}
/*endregion*/

/*region Xmas*/
html[data-color="xmas"] {
    --color-background: #014029;
    --color-winner: #D9A648;
    --color-error: #b71540;
    --color-cta: #BF612A;
}

html[data-color="xmas"] #background {
    background-image: url('bg_xmas.jpg');
}

html[data-color="xmas"]:not([data-format="portrait"]) #footer::before {
    content: "\f1bb";
    left: var(--entrant-height);
    color: var(--color-background);
    top: calc(-1.5 * var(--entrant-height));
}

html[data-color="xmas"]:not([data-format="portrait"]) #footer::after {
    content: "\f79c";
    right: var(--entrant-height);
    opacity: 0.2;
    bottom: 0;
}

html[data-color="xmas"] .controller[data-volume="0"]::before {
    content: "\f786";
}

html[data-color="xmas"] #selector + i::before {
    content: "\f7aa";
}

@media screen and (orientation: portrait) {
    html[data-color="xmas"]:not([data-format="portrait"]) #footer::before {
        left: calc(0.5 * var(--entrant-height));
    }

    html[data-color="xmas"] #footer::after {
        right: calc(0.5 * var(--entrant-height));
    }
}
/*endregion*/

/*region Love*/
html[data-color="love"] {
    --color-background: var(--color-pink);
    --color-winner: #FCDB81;
    --color-error: var(--color-error-alt);
    --color-cta: #7A676C;
    --color-text: var(--color-white-alt);
    --hover: 0.6;
}

html[data-color="love"] #background {
    background-image: url('bg_love.jpg');
}

html[data-color="love"]:not([data-format="portrait"]) #footer::before {
    content: "\f4ba";
    left: var(--entrant-height);
    color: var(--color-background);
    top: calc(-1.25 * var(--entrant-height));
}

html[data-color="love"]:not([data-format="portrait"]) #footer::after {
    content: "\f06b";
    right: var(--entrant-height);
    opacity: 0.2;
    bottom: -0.125rem;
}

html[data-color="love"] .controller[data-volume="0"]::before {
    content: "\f7a9";
}

html[data-color="love"] #selector + i::before {
    content: "\f004";
}

@media screen and (orientation: portrait) {
    html[data-color="love"]:not([data-format="portrait"]) #footer::before {
        left: calc(0.5 * var(--entrant-height));
    }

    html[data-color="love"] #footer::after {
        right: calc(0.5 * var(--entrant-height));
    }
}
/*endregion*/