body {
    margin: 0;
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

button {
    padding: 0;
    background: none;
    color: inherit;
    border: none;
    outline: inherit;
    font: inherit;
    cursor: pointer;
}

button[disabled] {
    cursor: default;
}

.floatLeft {
    float: left;
}

.bold {
    font-weight: bold!important;
}

.full-width {
    width: 100%;
}

.hidden {
    display: none!important;
}

[v-cloak] {
    display: none;
}

span.line {
    display: inline-block;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

nav {
    height: 70px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 4;
    background-image: linear-gradient(90deg, #0014ff4a, rgb(0 161 255 / 29%));
    backdrop-filter: blur(20px);
    overflow: hidden;
}

nav, #menu, #actions-menu, .aqua, #rarityOddsModal, #hatchedAnimalModal, #popupAnimalModal, #burnAnimalModal, #online, #offline {
    font-family: "Noto Sans", arial, sans-serif;
}

.link {
    font-size: 20px;
    font-weight: bold;
}

.link a {
    text-decoration: none;
}

.link a span {
    display: block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(135deg, #FFEB3B, #FF9800);
    transition: transform 150ms ease;
}

.link a span:hover {
    transform: scale(1.2);
}

.link a span:active {
    transform: scale(0.9);
}

nav .link {
    display: none;
    float: right;
    margin-top: 22px;
    margin-left: 20px;
}

#logo {
    display: inline-flex;
    padding: 5px;
    margin-left: 15px;
    text-decoration: none;
}

#egg-logo {
    margin-top: 8px;
    width: 40px;
    height: 40px;
}

#text-logo {
    margin-left: 5px;
    height: 70px;
}

#text-logo-abbreviated {
    display: none;
}

nav > button, nav .currency-displays {
    float: right;
    line-height: 40px;
}

nav div button {
    float: left;
}

nav .currency-displays {
    display: none;
}

#hamburger-button {
    display: none;
    margin-right: 15px;
}

#hamburger-button span {
    display: block;
    font-size: 40px;
    padding: 15px;
    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}

#filler {
    height: 70px;
}

#filler.extra-padding {
    padding-top: var(--actions-menu-padding-vertical);
}

.message-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 70px;
    min-height: 0;
    height: 0;
    font-size: 0;
    box-sizing: border-box;
    width: 100%;
    background: #0070ff;
    color: black;
    z-index: 4;
    transition-property: height, font-size, min-height;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.message-bar.visible {
    height: 100%;
    padding: 5px 35px 5px 5px;
    font-size: 25px;
}

.message-bar.offline {
    background: red;
}

.message-bar.online {
    background: lime;
}

.message-bar .close {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

@media screen and (max-width: 326px) {
    #text-logo {
        display: none;
    }

    #text-logo-abbreviated {
        display: block;
    }
}

@media screen and (max-width: 454px) {
    .signed-in #text-logo {
        display: none;
    }

    .signed-in #text-logo-abbreviated {
        display: block;
    }
}

@media screen and (max-width: 607px) {
    #logo {
        display: none;
    }

    /*nav {*/
    /*    height: 50px;*/
    /*}*/

    /*nav > a {*/
    /*    padding: 5px;*/
    /*    margin-left: 5px;*/
    /*}*/

    /*#logo {*/
    /*    margin-left: 5px;*/
    /*}*/

    /*#egg-logo {*/
    /*    margin-top: 6px;*/
    /*    width: 28px;*/
    /*    height: 28px;*/
    /*}*/

    /*#text-logo {*/
    /*    margin-left: 4px;*/
    /*    height: 50px;*/
    /*}*/

    /*nav > button, nav .currency-displays {*/
    /*    line-height: 36px;*/
    /*}*/

    /*#hamburger-button {*/
    /*    margin-right: 5px;*/
    /*}*/

    /*#hamburger-button span {*/
    /*    padding: 7px;*/
    /*    font-size: 36px;*/
    /*}*/

    /*nav .currency-display-container {*/
    /*    margin: 5px;!* When edited, also edit it in setAbbreviateCoins() *!*/
    /*}*/

    /*nav .currency-displays {*/
    /*    margin-top: 2px;*/
    /*}*/

    /*#filler {*/
    /*    height: 50px;*/
    /*}*/

    /*.message-bar {*/
    /*    top: 50px;*/
    /*}*/

    /*.message-bar.visible {*/
    /*    font-size: 20px;*/
    /*    padding: 4px 30px 4px 4px;*/
    /*}*/

    /*#actions-menu {*/
    /*    padding: 10px 10px 0 10px!important;*/
    /*}*/

    /*#menu:not(.expanded) .menu-button-with-icon {*/
    /*    padding: 5px 15px;*/
    /*}*/

    /*#actions-menu.on-top #menu-information {*/
    /*    justify-content: space-between!important;*/
    /*}*/

    /*#actions-menu.on-top #menu-information div {*/
    /*    width: 120px;*/
    /*    text-align: center;*/
    /*}*/

    /*#actions-menu.on-top #menu-information #total-animals {*/
    /*    width: 90px;*/
    /*}*/
}

@media screen and (min-width: 820px) {
    nav .link.leaderboard {
        display: block;
    }

    #menu .link.leaderboard {
        display: none;
    }
}

/*@media screen and (min-width: 800px) {*/
@media screen and (min-width: 100px) {
    nav .link.links {
        display: block;
    }

    #menu .link.links {
        display: none;
    }
}

#menu {
    position: fixed;
    top: 0;
    right: 0;
    margin-right: 20px;
    z-index: 5;
    user-select: none;
}

#menu button, #menu div {
    float: left;
    line-height: 40px;
}

#menu button {
    padding: 15px;
    border-radius: 0;
}

#level-display {
    float: left;
    margin: 5px 0 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu:not(.expanded) #level-display {
    margin-left: 10px;
}

.circle-background-text {
    /* Background circle */
    width: 50px;
    height: 50px;
    background: radial-gradient(#4babfe,#007ff0, #004f96, #00203C);
    border-radius: 50%;
    box-shadow: 0 0 10px 5px #00203C;

    /* Level text */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: bold;
    text-shadow: var(--text-outline-thin);
}

#level-display .circle-background-text {
    margin-top: 5px;
}

.completion-circle {
    position: absolute;
    width: 60px;
    height: 60px;
    fill: transparent;
}

.completion-circle circle {
    stroke-width: 2px;
    stroke: gold;
}

#exp-required-for-level-up-dropdown {
    display: none;
    position: fixed;
    top: 80px;
    right: 10px;
    padding: 10px 20px;
    background: radial-gradient(#4babfe,#007ff0, #004f96, #00203C);
    box-shadow: 0 0 20px 10px #00203C;
    border-radius: 100px;
    text-shadow: var(--text-outline-thin);
}

#level-display:hover #exp-required-for-level-up-dropdown {
    display: block;
}

.expanded #exp-required-for-level-up-dropdown {
    display: block;
    position: relative;
    top: 10px;
    right: 0;
}

#menu .link {
    margin-top: 15px;
}

/*@media screen and (max-width: 607px) {*/
/*    #menu .link {*/
/*        margin-top: 5px;*/
/*    }*/
/*}*/

@media (hover: hover) and (pointer: fine) {
    .menu-button-with-icon:hover, #hamburger-button:hover {
        background-color: #00000030;
    }
}

.menu-button-with-icon:active, #hamburger-button:active {
    background-color: #0000007F;
}

#menu button[disabled] {
    background-color: inherit;
}

#menu #claimAllYield {
    margin: 15px 10px;
    padding: 5px 10px;
    line-height: 30px;
}

#menu #claimAllYield:not(.enabled), #menu #claimAllYield:not(.enabled):hover, #menu #claimAllYield:not(.enabled):active {
    transform: scale(1);
    background-position: 0;
    box-shadow: none;
    cursor: default;
    filter: brightness(50%);
}

@media (hover: hover) and (pointer: fine) {
    #menu #claimAllYield.enabled:hover, #hamburger-button:hover span, .currency-display.aqua:hover {
        transform: scale(1.1);
    }
}

#menu #claimAllYield.enabled:active, #hamburger-button:active span, .currency-display.aqua:active {
    transform: scale(0.9);
}

#menu #claimAllYield img {
    width: 25px;
    height: 25px;
    margin: 2px 5px;
    filter: drop-shadow(0px 0px 1px black);
}

#menu #claimAllYield span {
    margin: 0 5px;
}

#profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#coin-display-container-nav-abbreviated {
    display: none;
}

.currency-display-container {
    float: left;
    margin: 15px 10px;
}

.currency-display {
    padding: 0 15px !important;
    background: var(--gold-gradient);
    border-radius: 100px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 8px 4px black;
}

.currency-display img {
    width: 25px;
    filter: drop-shadow(0px 0px 1px black);
}

.currency-display .amount-currency {
    margin-left: 10px;
}

.currency-display.coins .amount-currency {
    color: white;
    font-weight: bold;
    text-shadow: var(--text-outline-thin);
    letter-spacing: 1px;
}

.currency-display .icon-plus {
    margin-left: 10px;
}

.menu-button-with-icon [class^="icon-"], .menu-button-with-icon [class*=" icon-"] {
    display: block;
    font-size: 25px;
    width: 25px;
    height: 40px;
    line-height: 40px;
}

.menu-button-with-icon span, .menu-button-with-icon img {
    display: block;
    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
    .menu-button-with-icon:hover span, .menu-button-with-icon:hover img {
        transform: scale(1.2);
    }
}

.menu-button-with-icon:active span, .menu-button-with-icon:active img {
    transform: scale(0.9);
}

.menu-button-with-icon[disabled] span, .menu-button-with-icon[disabled] img {
    transform: scale(1);
}

/*@media screen and (max-width: 1395px) {*/
@media screen and (max-width: 100px) {
    #menu.signed-in {
        box-sizing: border-box;
        right: -320px;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 320px;
        background-image: linear-gradient(180deg, #0014ff4a, rgb(0 161 255 / 29%));
        backdrop-filter: blur(10px);
    }

    #menu.signed-in.transition {
        transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
    }

    .signed-in .menu-button-with-icon {
        margin-right: 0;
        padding: 15px 30px;
        width: 100%;
    }

    #menu.signed-in #claimAllYield {
        margin: 30px 0 15px 0;
    }

    .signed-in #currency-display-menu {
        margin: 15px 0;
    }

    .signed-in .menu-button-with-icon {
        display: flex;
        justify-content: center;
    }

    .signed-in #hamburger-button {
        display: block;
    }

    nav.signed-in .currency-displays {
        display: flex;
    }
}

@media screen and (max-width: 100px) {
    #menu {
        box-sizing: border-box;
        right: -320px;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 320px;
        background-image: linear-gradient(180deg, #0014ff4a, rgb(0 161 255 / 29%));
        backdrop-filter: blur(10px);
    }

    #menu.transition {
        transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
    }

     .menu-button-with-icon {
        margin-right: 0;
        padding: 15px 30px;
        width: 100%;
    }

    .menu-button-with-icon {
        display: flex;
        justify-content: center;
    }

     #hamburger-button {
        display: block;
    }
}

#menu.expanded {
    transform: translateX(-320px);
}

.modal-container, .modal-background, .full-screen-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.modal-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-screen-overlay.dropdowns {
    z-index: 2;
}

.modal-container, .full-screen-overlay.menu {
    z-index: -1;
    position: fixed;
    color-scheme: light;
}

.modal-background, .full-screen-overlay.menu {
    background-color: rgba(0, 0, 0, 0.8);
    transition: opacity 150ms ease-in-out;
}

.cursor-arrow {
    cursor: initial;
}

.full-screen-overlay.menu.active {
    z-index: 4;
}

.modal-container.active {
    z-index: 6;
}

.transparent {
    opacity: 0;
    cursor: initial;
}

.opaque {
    opacity: 1;
}

.modal-center {
    position: relative;
}

.modal-center > div {
    z-index: 7;
    transition: transform 150ms ease-in-out;
    transform: scale(0.5);
}

.modal-center > div.large {
    transform: scale(1);
}

.modal-header {
    padding-bottom: 0 !important;
}

#breeding-bg {
    background-image: linear-gradient(90deg, #0d003b, #00c5ff, #00b6ff, #00c0f9, #0d003b);
}

#breeding {
    padding-top: 70px;
    padding-bottom: 30px;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (min-width: 489px) {
    #breeding {
        max-width: 1024px;
        height: fit-content;
        background-image: url('images/fusion.jpg');
        background-position: center;
        background-position-y: -150px;
    }
}

#breeding-cards {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.fusion-icon-div {
    animation-name: brightness;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.fusion-icon {
    margin-top: -45px;
    width: 70px;
}

@keyframes brightness {
    0% {
        filter: brightness(1.5);
    }
    50% {
        filter: brightness(3);
    }
    100% {
        filter: brightness(1.5);
    }
}

@media screen and (max-width: 530px) {
    .fusion-icon-div {
        display: none;
    }
}

#amount-hybrids span {
    padding: 20px;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

#amount-hybrids span.disabled, #amount-hybrids span.disabled:hover, #amount-hybrids span.disabled:active {
    color: gray;
    text-shadow: 0 0 4px black;
    cursor: default;
}

#amount-hybrids input {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #0033ff;
    font-size: 30px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 900;
    color: white;
    text-align: center;
    text-shadow: -1px 0 2px black, 1px 0 2px black, 0 -1px 2px black, 0 1px 2px black, -1px -1px 2px black, -1px 1px 2px black, 1px -1px 2px black, 1px 1px 2px black;
    border: 1px solid darkblue;
    border-radius: 30px;
    box-shadow: 0 0 5px 2px darkblue;
}

/* Chrome, Safari, Edge, Opera */
#amount-hybrids input::-webkit-outer-spin-button,
#amount-hybrids input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#amount-hybrids input[type=number] {
    -moz-appearance: textfield;
}

.animal-button{
    padding: 15px;
    font-weight: 900;
    border-radius: 30px;
    font-family: "Segoe UI", Arial, sans-serif;
    box-shadow: 0 0 5px 0 black;
    transition: border-radius 150ms ease-in-out, transform 150ms ease-in-out;
}

.animal-button[disabled], .animal-button[disabled]:hover, .animal-button[disabled]:active {
    transform: scale(1);
    filter: brightness(50%);
}

.animal-button .fusion-icon {
    width: 30px;
    margin-bottom: -7px;
    margin-right: 5px;
    filter: brightness(0.5) hue-rotate(40deg);
}

#actions-menu {
    padding: var(--actions-menu-padding-vertical) 35px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #D7FAF8;
}

#menu-information {
    margin-top: 10px;
}

#menu-information div {
    float: left;
}

#menu-information div + div {
    margin-left: 50px;/* When edited, change the number in the line where this.widths.menuInformationNormal gets set in updateMenuInformationWidths() to twice this value */
}

#menu-information.collapsed div {
    float: none;
    margin: 0;
    width: fit-content;
}

#actions-menu.on-top {
    flex-direction: column;
}

#actions-menu.on-top #menu-information {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 7px;
}

#actions-menu.on-top #menu-information div {
    display: inline-block;
    float: none;
    margin: 0;
}

#menu-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#menu-buttons.disabled {
    display: none;
}

#amount-card-found {
    color: #D7FAF8;
    display: flex;
    align-items: center;
}

#menu-buttons .button-group .smaller-margin {
    margin-left: 10px;
}

#menu-buttons .button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#menu-buttons .button-group input[type=text], #menu-buttons button, #amount-cards-to-burn {
    padding: 10px;
}

#menu-buttons .button-group input[type=text], #amount-cards-to-burn {
    background: #D7FAF8;
    color: black;
    box-sizing: border-box;
    border-radius: 100px;
    border: none;
    box-shadow: 0 0 5px 1px white;
}

 #menu-buttons .button-group input[type=text]:focus-visible, #menu-buttons .button-group select:focus-visible {
    outline: none;
    box-shadow: 0 0 10px 3px white;
}

 #menu-buttons .button-group input[type=text]::placeholder {
    color: #275257;
    opacity: 0.5;
}

 #menu-buttons .button-group > div,  #menu-buttons .button-group > button,  #menu-buttons .button-group > input,  #menu-buttons .button-group > span {
    margin-left: 20px;
    margin-top: 10px;
 }

 #actions-menu .icon-search, #actions-menu .icon-cross {
    padding: 0 2px;
 }

.button-group input[type=text] {
    width: 115px;
}

 #menu-buttons .button-group .select-wrapper {
    display: flex;
    user-select: none;
    justify-content: center;
}

 #menu-buttons .button-group .select-wrapper.sort {
    justify-content: right;
}

 #menu-buttons .button-group .select-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

 #menu-buttons .button-group .select-wrapper.sort .select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

 #menu-buttons .button-group .select-wrapper.sort .select-button span {
    margin-left: 10px;
}

 #menu-buttons .button-group .select-button.active {
    z-index: 3;
}

 #menu-buttons .button-group .select-wrapper table, .select-menu {
    position: absolute;
    margin-top: 50px;
    z-index: 3;
    border: 1px solid white;
    border-radius: 10px;
    background: linear-gradient(135deg, #0084ff, #00249a);
    color: white;
}

 #menu-buttons .button-group .select-wrapper .pill {
    margin: 0;
    width: 97px;
    color: white;
    letter-spacing: 1px;
}

 #menu-buttons .button-group .select-menu div + div {
    margin-top: 10px;
}

 #menu-buttons .button-group .select-button .pill {
    margin-left: 5px;
    white-space: nowrap;
}

 #menu-buttons .button-group .select-wrapper tr {
    padding: 5px;
    margin: -2px;
    border: none;
    display: block;
}

 #menu-buttons .button-group .select-wrapper tr:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

 #menu-buttons .button-group .select-wrapper tr:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

 #menu-buttons .button-group .select-wrapper .sortLabel {
    min-width: 190px;
}

 #menu-buttons .button-group .select-wrapper td button {
    margin-left: 5px;
}

#menu-buttons .button-group .pill.active {
    box-shadow: 0 0 5px 4px white, inset 0 0 0 2000px rgba(255, 255, 255, 0.2);
}

#menu-buttons .button-group button.active {
    --hue: 0deg;
}

 #menu-buttons .button-group .select-wrapper td button {
    font-size: 32px;
}

@media (hover: hover) and (pointer: fine) {
    #menu-buttons .button-group .select-wrapper tr:hover {
        background-color: navy;
    }

    #menu-buttons .button-group .select-wrapper .pill:hover {
        box-shadow: 0 0 5px 2px white, inset 0 0 0 2000px rgba(255, 255, 255, 0.2);
    }

    #menu-buttons .button-group .pill.active:hover {
        box-shadow: 0 0 5px 4px white, inset 0 0 0 2000px rgba(255, 255, 255, 0.4)!important;
    }
}

#menu-buttons .button-group .pill:active, #menu-buttons .button-group .pill.active:active {
    box-shadow: 0 0 5px 4px white, inset 0 0 0 2000px rgba(0, 0, 0, 0.2)!important;
}

 @media screen and (max-width: 333px) {
     #menu-buttons .button-group .select-wrapper .sortLabel {
         min-width: initial;
         width: 180px;
     }
 }

.coin-animation {
    position: fixed;
    width: 16px;
    height: 16px;
    z-index: 5;
}

.landing-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.landing-page div {
    font-family: "Google Sans", arial, sans-serif;
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: bold;
    background-image: linear-gradient(90deg, #f17e00, #ffba3b, #f17e00);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    margin: min(4.17vw, 50px) 20px min(1.67vw, 20px) 20px;
}

.landing-page .title {
    font-size: clamp(30px, 5vw, 60px);
    margin-top: min(4.17vw, 50px);
    margin-bottom: min(6.25vw, 75px);
}

.landing-page button {
    margin-top: 10px;
    --hue: 0deg;
}

.landing-page a {
    display: flex;
    align-items: center;
    font-family: "Google Sans", arial, sans-serif;
    font-size: clamp(25px, 3.125vw, 37.5px);
    font-weight: bold;
    background-image: linear-gradient(90deg, #f17e00, #ffba3b, #f17e00);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    margin: min(4.17vw, 50px) 20px min(1.67vw, 20px) 20px;
}

.landing-page a:hover {
    background-image: linear-gradient(90deg, #fd9c32, #f1c471, #fd9c32);
}

#homepage {
    --columns: 5;
    --image-width: 300px;
    --padding: 10px;
    --set-width: calc(var(--image-width) + 2*var(--padding));
    --gap: 30px;
    margin: 30px auto;
    width: min(100%, calc((var(--set-width) + var(--gap)) * var(--columns) + var(--gap)));
}

#sets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--set-width), 1fr));
    gap: var(--gap);
    margin: 0 var(--gap);
}

.set {
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--padding);
    width: var(--set-width);
    border-radius: 20px;
    background-color: var(--modal-background-color);
    box-shadow: var(--modal-box-shadow);
}

.set .top {
    display: flex;
    height: 60px;
    margin-bottom: 10px;
}

.set .textContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-right: 5px;
    width: calc(var(--set-width) - 2 * var(--padding) - 60px);
    overflow: hidden;
}

.set .name {
    font-size: 18px;
}

.set .name a {
    color: white;
    text-decoration: none;
}

.set .creator {
    font-size: 14px;
}

.set .completion-circle-container {
    width: 60px;
}

.set .circle-background-text {
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
    background: none;
    font-size: 14px;
    text-shadow: none;
    box-shadow: none;
}

.completion-circle.empty circle {
    stroke-width: 5px;
    stroke: gray;
}

.set .completion-circle circle {
    stroke-width: 5px;
}

.set .image {
    height: var(--image-width);
}

.set .image img {
    width: var(--image-width);
    border-radius: 5px;
}

#setPage {
    width: 100%;
    background-image: linear-gradient(90deg, black, #220086, black);
}

#set {
	padding-top: 20px;
	text-align: center;
}

#set .name {
    font-size: 50px;
}

#set .image {
    margin: 20px 0;
}

#setActions {
	padding-bottom: 20px;
    --button-width: 150px;
    --button-margin-thin: 10px;
    --button-margin-wide: 50px;
    --button-margin-left: var(--button-margin-thin);
    --button-margin-right: var(--button-margin-thin);
    --outer-margin: 10px;
}

#setActions .desktop {
    display: none;/* Becomes flex in media query */
    align-items: center;
    justify-content: center;
}

.desktop .setCreator {
    margin-left: var(--outer-margin);
    width: calc(50vw - (var(--button-width) / 2) - var(--button-margin-left) - var(--outer-margin));
}

.desktop .setOpenPack {
    margin: 0 var(--button-margin-right) 0 var(--button-margin-left);
    max-width: var(--button-width);
}

.desktop .setReleasedOn {
    margin-right: var(--outer-margin);
    width: calc(50vw - (var(--button-width) / 2) - var(--button-margin-right) - var(--outer-margin));
}

#setActions .mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile .setCreator {
    margin-bottom: 10px;
}

.mobile .setReleasedOn {
    margin-bottom: 10px;
}

.mobile .setOpenPack {
    width: 80%;
}

@media screen and (min-width: 456px) {

    #setActions .desktop {
        display: flex;
    }

    #setActions .mobile {
        display: none;
    }

}

#setCreatorCalc, #setReleasedOnCalc {
    position: absolute;
    visibility: hidden;
    width: fit-content;
}

.setTabs {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #00c4ff;
    box-shadow: inset 0 -20px 20px -20px #00c4ff;
    height: 64px;
}

.setTabs div {
    position: relative;
    width: 150px;
}

.setTabs button {
    position: absolute;
    top: 0;
    margin: 14px 10px 0 10px;
    padding: 20px 20px 10px 20px;
    background: #00c4ff;
    color: black;
    font-weight: bold;
    border: 2px solid #00c4ff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 0 20px 0 #00c4ff;
}

.setTabs button.active {
    border-bottom-color: black;
    background: black;
    color: #00c4ff;
    cursor: default;
}

.setBottom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
    padding-top: 20px;
    background: black;
}

.setDetails {
    width: fit-content;
    max-width: 90vw;
}

.setDetails .title {
    font-size: 30px;
    margin-bottom: 10px;
}

.setDetails .description {
    font-size: 18px;
}

.setBottom .cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 90vw;
    margin-top: 20px;
}

.setBottom .cards .rarity {
    width: 100%;
    margin: 5px 0;
    --border-radius: 10px;
}

.setBottom .cards .header {
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    text-shadow: var(--text-outline-thin);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.setBottom .cards .cardNames {
    display: flex;
    justify-content: left;
    --card-margin-bottom: 3px;
    padding: 10px 10px calc(10px - var(--card-margin-bottom)) 10px;
    background: white;
    color: black;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.setBottom .cards .cardNames .amount {
    padding-right: 10px;
}

.setBottom .cards .cardNames .name {
    overflow: hidden;
}

.setBottom .cards .cardNames div div {
    margin-bottom: var(--card-margin-bottom);
}

.truncated {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (min-width: 1000px) {

    .setBottom .cards {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

    .setBottom .cards .rarity {
        margin: 0 5px;
        width: fit-content;
        max-width: 20%;
    }

    .setBottom .cards .cardNames {
        justify-content: space-between;
    }

}

.rarityFilter {
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.rarityFilter .rarity {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    margin: 5px;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    text-shadow: var(--text-outline-thin);
    border: 2px solid transparent;
    border-radius: 40px;
}

.rarityFilter .rarity.active {
    border-color: white;
}

@media (hover: hover) and (pointer: fine) {
    .rarityFilter .rarity:hover {
        border-color: white;
    }
}

.rarityFilter .rarity:active {
    filter: brightness(80%);
}

.cardGridContainer {
    --columns: 5;
    --card-width: 300px;
    --gap: 20px;
    margin: 20px auto;
    width: min(100%, calc((var(--card-width) + var(--gap)) * var(--columns) + var(--gap)));
}

.cardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
    gap: var(--gap);
    margin: 0 var(--gap);
}

.cardGrid .card {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 10px;
}

.cardGrid .overlayDark {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s;
}

.cardGrid .overlayInfo {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    --margin: 20px;
}

.cardGrid .overlayDark img, .cardGrid .overlayInfo img {
    width: var(--card-width);
    opacity: 1;
    filter: grayscale(100%);
    border-radius: 10px;
    transition: opacity 0.5s;
}

@media (hover: hover) and (pointer: fine) {

    .cardGrid .card:hover .overlayDark {
        opacity: 0.5;
    }

    .cardGrid .card:hover .overlayInfo {
        opacity: 1;
    }

    .cardGrid .card:hover .overlayInfo img {
        opacity: 0;
    }

}

.cardGrid .amount-container {
    position: absolute;
    width: fit-content;
    box-shadow: 0 0 5px 2px;
    top: -1px;
    left: -1px;
    padding: 4px 8px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.cardGrid .amount {
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: var(--text-outline-thin);
}

.cardGrid .rarity {
    position: absolute;
    top: var(--margin);
    right: var(--margin);
}

.cardGrid .name {
    position: absolute;
    bottom: var(--margin);
    left: var(--margin);
}

.cardGrid .image {
    width: var(--card-width);
    border-radius: 10px;
    box-shadow: 0 0 5px 5px;
}

.Square .image, .Square .overlayDark img, .Square .overlayInfo img {
    height: var(--card-width);
}

.Landscape-3-2 .image, .Landscape-3-2 .overlayDark img, .Landscape-3-2 .overlayInfo img {
    height: calc(var(--card-width) / 1.5);
}

.Landscape-16-9 .image, .Landscape-16-9 .overlayDark img, .Landscape-16-9 .overlayInfo img {
    height: calc(var(--card-width) / 1.7778);
}

.Portrait-2-3 .image, .Portrait-2-3 .overlayDark img, .Portrait-2-3 .overlayInfo img {
    height: calc(var(--card-width) / 0.6667);
}

.Portrait-9-16 .image, .Portrait-9-16 .overlayDark img, .Portrait-9-16 .overlayInfo img {
    height: calc(var(--card-width) / 0.5625);
}

.cardGrid .image.owned {
    box-shadow: 0 0 5px 5px, inset 0 0 0 5px;
}

.cardGrid .image img {
    border-radius: 10px;
}

.video-container {
    margin: 10px auto;
    width: 100%;
}

.video-container.desktop {
    display: none;
}

.video {
    margin-left: auto;
    margin-right: auto;
}

.video, .video iframe {
    width: 100vw;
    height: 56.23vw;
}

iframe {
    border: 0;
}

@media screen and (min-width: 626px) {
    .video, .video iframe {
        width: 626px;
        height: 352px;
    }
}

@media screen and (min-width: 1350px) {
    .video-container {
        margin: auto;
    }

    .video-container, .video, .video iframe {
        width: 560px;
        height: 315px;
    }

    .video-container.mobile {
        display: none;
    }

    .video-container.desktop {
        display: block;
    }
}

@media screen and (min-width: 1680px) {
    .links-container .video-container {
        margin: auto;
    }

    .links-container .video-container, .links-container .video, .links-container .video iframe {
        margin-top: 30px;
        width: 560px;
        height: 315px;
    }

    .links-container .video-container.mobile {
        display: none;
    }

    .links-container .video-container.desktop {
        display: block;
    }
}

@media screen and (min-width: 1480px) {
    .video-container, .video, .video iframe {
        width: 626px;
        height: 352px;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Can't Afford Egg Modal and Level Up Modal and Achievement modals  */
#accountModal, #confirmationModal, #cantAffordEggModal, #levelUpModal, #achievementsUnlockedModal, #achievementsProgressModal, #shopModal, #purchaseSuccessfulModal, #gdprConsentModal, #newSpeciesModal, #hatchedAnimalsModal {
    text-align: center;
    background-color: var(--modal-background-color);
    font-family: "Google Sans", arial, sans-serif;
}

/*
    Can't Afford Egg Modal
    Scale cards on thin screens, divide pixels by 4.8 to get vw
*/
#cantAffordEggModal {
    --1px: min(0.208333vw, 1px);
    --5px: calc(5 * var(--1px));
    --10px: calc(10 * var(--1px));
    --15px: calc(15 * var(--1px));
    --20px: calc(20 * var(--1px));
    --23px: calc(23 * var(--1px));
    --30px: calc(30 * var(--1px));
    --45px: calc(45 * var(--1px));
    --50px: calc(50 * var(--1px));
    --100px: calc(100 * var(--1px));
    --450px: calc(450 * var(--1px));

    width: var(--450px);
    box-shadow: var(--modal-box-shadow);
    border-radius: var(--50px);
}

#cantAffordEggModal .modal-header {
    font-size: var(--45px);
    padding: var(--20px);
}

#cantAffordEggModal .modal-text {
    font-size: var(--20px);
    padding: var(--20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cantAffordEggModal table {
    width: 100%;
}

#cantAffordEggModal td {
    padding: 0 var(--10px);
}

#cantAffordEggModal td div {
    display: inline-flex;
    align-items: center;
}

#cantAffordEggModal img {
    width: var(--23px);
}

#cantAffordEggModal .modal-text > div {
    margin-top: var(--10px);
}

#cantAffordEggModal .claim-yield {
    font-size: var(--30px);
}

#cantAffordEggModal button {
    margin-top: var(--10px);
    padding: var(--15px) var(--20px);
    font-size: var(--20px);
}

/* Scale cards on thin screens, divide pixels by 5.4 to get vw */
#levelUpModal {
    ---20px: max(-3.7vw, -20px);
    --1px: min(0.185185vw, 1px);
    --5px: calc(5 * var(--1px));
    --7px: calc(7 * var(--1px));
    --10px: calc(10 * var(--1px));
    --15px: calc(15 * var(--1px));
    --17px: max(11px, calc(17 * var(--1px)));
    --20px: calc(20 * var(--1px));
    --22px: max(14px, calc(22 * var(--1px)));
    --40px: calc(40 * var(--1px));
    --50px: calc(50 * var(--1px));
    --70px: calc(70 * var(--1px));
    --430px: calc(430 * var(--1px));

    display: flex;
    align-items: center;
    text-align: left;
    margin: var(--10px) var(--15px);
    padding: var(--15px);
    width: var(--430px);
    font-size: var(--22px);
    border-radius: 50px;
    box-shadow: var(--20px) 0 var(--40px) 0 #f35a00, var(---20px) 0 var(--40px) 0 #FACC15;
}

#levelUpModal .icon-arrow-up {
    font-size: var(--50px);
    color: lime;
}

#levelUpModal .modal-details {
    margin-right: var(--7px);
}

#levelUpModal .rewards {
    font-size: var(--17px);
}

/*
    Achievement Modals
    Scale cards on thin screens, divide pixels by 5 to get vw
*/
#achievementsUnlockedModal, #achievementsProgressModal {
    --2px: min(0.4vw, 2px);
    --5px: min(1vw, 5px);
    --7px: min(1.4vw, 7px);
    --10px: min(2vw, 10px);
    --15px: min(3vw, 15px);
    --17px: clamp(11px, 3.4vw, 17px);
    --20px: min(4vw, 20px);
    --22px: clamp(14px, 4.4vw, 22px);
    --50px: min(10vw, 50px);
    --70px: min(14vw, 70px);
    --100px: min(20vw, 100px);
    --440px: min(88vw, 440px);
    --460px: min(92vw, 460px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--15px);
    padding-bottom: var(--15px);
    border-radius: var(--20px);
    width: var(--460px);
    min-height: var(--100px);
    box-shadow: var(--modal-box-shadow);
}

#achievementsUnlockedModal .modal-header img {
    width: var(--440px);
}

.achievement {
    display: flex;
    align-items: center;
    text-align: left;
    height: 60px;
    margin: var(--10px) var(--15px);
    font-size: var(--22px);
    border-radius: 50px;
}

#achievementsUnlockedModal .achievement {
    padding: var(--15px) 0 var(--15px) var(--10px);
}

#achievementsProgressModal .achievement {
    padding: var(--2px);
    background: linear-gradient(135deg, #004480, #4c0080);
}

#achievementsUnlockedModal .achievement .icon-trophy {
    font-size: var(--50px);
}

#achievementsUnlockedModal .circle-background-text, #levelUpModal .circle-background-text {
    flex-shrink: 0;
    width: var(--70px);
    height: var(--70px);
}

#achievementsProgressModal .circle-background-text {
    flex-shrink: 0;
    margin-left: 5px;
    font-size: 30px;
}

#achievementsProgressModal .completion-circle circle {
    stroke-width: 3px;
    stroke: red;
}

.finished .icon-trophy {
    color: gold;
}

.achievement .percentage, .progress {
    display: none;
}

#achievementsProgressModal .achievement.in-progress:hover .icon-trophy, #achievementsProgressModal .achievement.in-progress:hover .rewards {
    display: none;
}

#achievementsProgressModal .achievement.in-progress:hover .percentage {
    display: flex;
    font-size: 19px;
}

#achievementsProgressModal .achievement.in-progress:hover .progress {
    display: inline;
}

#achievementsUnlockedModal .achievement, #achievementsProgressModal .achievement.finished, #levelUpModal {
    background: linear-gradient(135deg, #FACC15, #f35a00);
}

#achievementsProgressModal .achievement:hover {
    background: linear-gradient(135deg, #FFEB3B, #FF9800);
}

.modal-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-right: var(--7px);
    text-shadow: var(--text-outline-thin);
    color: white;
}

.modal-details .progress, .modal-details .rewards {
    font-size: var(--17px);
}

/*
    Shop modal
    Scale cards on thin screens, divide pixels by 5,78 (520/90) to get vw and by 7.4 to get vh
 */
#shopModal {
    /* Responsive pixel replacement variables */
    --1px: min(min(0.173077vw, 0.135135vh), 1px);
    --3px: calc(3 * var(--1px));
    --5px: calc(5 * var(--1px));
    --10px: calc(10 * var(--1px));
    --15px: calc(15 * var(--1px));
    --16px: max(12px, calc(16 * var(--1px)));
    --20px: calc(20 * var(--1px));
    --30px: calc(30 * var(--1px));
    --70px: calc(70 * var(--1px));
    --100px: calc(100 * var(--1px));
    --140px: calc(140 * var(--1px));
    --160px: calc(160 * var(--1px));
    --520px: calc(520 * var(--1px));

    /* Color variables*/
    --light-gradient: #4972F6;
    --medium-gradient: #072571;
    --dark-gradient: #070D1B;
    --modal-box-shadow-color: goldenrod;

    width: var(--520px);
    border-radius: var(--20px);
    background: #715307;
    box-shadow: var(--modal-box-shadow);
}

#shopModal .modal-header {
    padding-top: var(--10px);
}

#shopModal .modal-header img {
    height: var(--70px);
}

#shopModal .modal-text {
    margin-left: var(--10px);
    margin-right: var(--10px);
    padding-top: var(--5px);
    padding-bottom: var(--10px);
    color: white;
}

#shopModal .modal-text .guest {
    padding-bottom: var(--20px);
    font-size: var(--16px);
    text-shadow: var(--text-outline-thin);
}

.in-app-purchases {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: var(--10px);
}

.in-app-purchase {
    display: flex;
    flex-direction: column;
    border-radius: var(--20px);
    overflow: hidden;
    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
    text-shadow: -1px 0 1.5px black, 1px 0 1.5px black, 0 -1px 1.5px black, 0 1px 1.5px black, -1px -1px 1.5px black, -1px 1px 1.5px black, 1px -1px 1.5px black, 1px 1px 1.5px black;
}

.in-app-purchase:disabled {
    filter: brightness(50%);
}

.in-app-purchase:enabled:hover {
    transform: scale(1.05);
    filter: brightness(110%);
}

.in-app-purchase:enabled:active {
    transform: scale(0.95);
    filter: brightness(90%);
}

.in-app-purchase .gems, .in-app-purchase .price {
    display: block;
    width: 100%;
    font-size: var(--30px);
}

.in-app-purchase .gems {
    padding: var(--10px) 0 var(--15px) 0;
    background: linear-gradient(180deg, var(--light-gradient), 40%, var(--medium-gradient), var(--dark-gradient))
}

.in-app-purchase .price {
    padding: var(--15px) 0 var(--10px) 0;
    background: linear-gradient(0deg, var(--light-gradient), 40%, var(--medium-gradient), var(--dark-gradient));
}

.in-app-purchase .gems img {
    width: var(--30px);
}

.bonus-banner, .empty-banner {
    padding: var(--3px) 0;
    font-size: var(--20px);
}

.empty-banner {
    background: var(--dark-gradient);
    width: 100%;
}

.bonus-banner {
    width: 100%;
    background: linear-gradient(90deg, var(--dark-gradient), #2cff00, var(--dark-gradient));
    text-shadow: var(--text-outline-thin);
}

.product-picture {
    width: var(--160px);
    height: var(--140px);
    background-color: var(--dark-gradient);
}

/*
    purchaseSuccessfulModal
    Scale cards on thin screens, divide pixels by 9 to get vw
*/

#purchaseSuccessfulModal {
    --5px: min(0.56vw, 5px);
    --10px: min(1.11vw, 10px);
    --20px: min(2.22vw, 20PX);
    --30px: min(3.33vw, 30PX);
    --100px: min(11.11vw, 100PX);
    --730px: min(81.11vw, 730px);
    --810px: min(90vw, 810px);
    --modal-box-shadow-color: goldenrod;

    padding: var(--20px);
    width: var(--810px);
    font-size: var(--30px);
    text-align: center;
    color: white;
    white-space: nowrap;
    background: #715307;
    border-radius: var(--20px);
    box-shadow: var(--modal-box-shadow);
}

#purchaseSuccessfulModal > div {
    padding: var(--20px);
}

#purchaseSuccessfulModal .modal-header img {
    width: var(--730px);
}

#purchaseSuccessfulModal .modal-text img {
    width: var(--30px);
}

/* Rarity Odds Modal*/
#rarityOddsModal {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 200px;
    height: 300px;
    padding: 11px 4px 21px 9px;
    background-color: black;
    border-radius: 20px;
    --white: 20%;
    --black: 0%;
    box-shadow:
        0 0 30px 10px var(--common-base),
        0 0 30px 20px var(--uncommon-base),
        0 0 30px 30px var(--rare-base),
        0 0 30px 40px var(--epic-base),
        0 0 30px 50px var(--legendary-base);
}

#rarityOddsModal .title {
    font-size: 32px;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#rarity-odds-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#rarity-odds-container div {
    display: flex;
    flex-direction: column;
}

#rarity-names {
    align-items: flex-end;
}

#rarity-odds {
    align-items: flex-start;
}

#rarity-odds-container div .pill {
    margin-top: 15px;
    line-height: 20px;
}


/*
    Hatched Animal Modal
    Divide largest amount of pixels by 10.24 for both vw and vh
*/
#hatchedAnimalModal {
    ---1px: clamp(-1px, max(-0.09765625vw, -0.09765625vh), -0.5px);
    ---1_5px: calc(1.5 * var(---1px));
    ---90px: calc(90 * var(---1px));

    --1px: clamp(0.5px, min(0.09765625vw, 0.09765625vh), 1px);
    --1_5px: calc(1.5 * var(--1px));
    --2px: calc(2 * var(--1px));
    --3px: calc(3 * var(--1px));
    --5px: calc(5 * var(--1px));
    --12px: calc(12 * var(--1px));
    --16px: calc(16 * var(--1px));
    --20px: calc(20 * var(--1px));
    --22px: calc(22 * var(--1px));
    --24px: calc(24 * var(--1px));
    --40px: calc(40 * var(--1px));
    --50px: calc(50 * var(--1px));
    --58px: calc(58 * var(--1px));
    --60px: calc(60 * var(--1px));
    --70px: calc(70 * var(--1px));
    --100px: calc(100 * var(--1px));
    --120px: calc(120 * var(--1px));
    --512px: calc(512 * var(--1px));

    width: var(--512px);
    height: var(--512px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: var(--50px);
    background-color: white;
    box-shadow: 0 0 var(--50px)
                    var(--20px) white,
                0 0 var(--120px)
                    var(--100px);
    user-select: none;
}

#hatchedAnimalModal .inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

#hatchedAnimalModal img {
    width: 100%;
    border-radius: inherit;
    position: absolute;
}

.new-banner-background {
    position: absolute;
    top: 0;
    width: 100%;
    height: var(--50px);
    opacity: 0.4;
}

#hatchedAnimalModal .amount {
    padding: var(--16px) var(--22px) var(--12px) var(--24px);
    font-size: var(--20px);
    border-bottom-right-radius: var(--50px);
}

#hatchedAnimalModal .new-banner-image {
    width: unset;
    height: var(--70px);
    margin-top: var(--10px);
}

#hatchedAnimalModal .modal-text {
    position: absolute;
    bottom: var(---90px);
    font-size: var(--70px);
    letter-spacing: var(--3px);
    color: white;
    text-shadow: var(---1_5px) 0 var(--2px) black, var(--1_5px) 0 var(--2px) black, 0 var(---1_5px) var(--2px) black, 0 var(--1_5px) var(--2px) black, var(---1_5px) var(---1_5px) var(--2px) black, var(---1_5px) var(--1_5px) var(--2px) black, var(--1_5px) var(---1_5px) var(--2px) black, var(--1_5px) var(--1_5px) var(--2px) black;
}

#hatchedAnimalModal .modal-text.small {
    font-size: var(--60px);
}

#hatchedAnimalModal .modal-text.smaller {
    font-size: var(--58px);
}

#hatchedAnimalModal .stars {
    --card-stars-size: var(--40px);
    bottom: var(--5px);
}

#hatchedAnimalModal .stars img {
    margin: 0 var(--12px);
}


/* Horizontal Popup Animal Modal
    Divide largest amount of pixels by 10.24 for vw and by 5.69 for vh
*/
#popupAnimalModal {
    margin: clamp(5px, min(1.95vw, 3.51vh), 20px);
    height: clamp(128px, min(50vw, 89.98vh), 512px);
    border: 1px solid;
    border-radius: clamp(3px, min(1.17vw, 2.11vh), 12px);
    box-shadow: 0 0 12px 0;
    display: flex;
    width: initial;
}

#popupAnimalModal .modal-image {
    width: clamp(128px, min(50vw, 89.98vh), 512px);
    height: inherit;
    border-top-left-radius: clamp(3px, min(1.17vw, 2.11vh), 12px);
    border-bottom-left-radius: clamp(3px, min(1.17vw, 2.11vh), 12px);
}

#popupAnimalModal .overlay {
    width: inherit;
    height: inherit;
}

#popupAnimalModal .amount {
    padding: clamp(1px, min(0.39vw, 0.7vh), 4px) clamp(2px, min(0.78vw, 1.41vh), 8px);
    border-top-left-radius: clamp(3px, min(1.17vw, 2.11vh), 12px);
    border-bottom-right-radius: clamp(3px, min(1.17vw, 2.11vh), 12px);
    font-size: clamp(4.5px, min(1.76vw, 3.16vh), 18px);
}

#popupAnimalModal .modal-image .stars {
    --card-stars-size: clamp(10px, min(3.91vw, 7.03vh), 40px);
    align-items: flex-end;
    bottom: clamp(1.25px, min(0.49vw, 0.88vh), 5px);
    height: 100%;
}

#popupAnimalModal .modal-image .stars img {
    margin: 0 clamp(3px, min(1.17vw, 2.11vh), 12px);
}

#popupAnimalModal .close-button {
    top: clamp(-5px, min(-0.49vw, -0.88vh), -1.25px);
    right: clamp(-5px, min(-0.49vw, -0.88vh), -1.25px);
    width: clamp(20px, min(2.93vw, 5.27vh), 30px);
    height: clamp(20px, min(2.93vw, 5.27vh), 30px);
    line-height: clamp(20px, min(2.93vw, 5.27vh), 30px);
    font-size: clamp(20px, min(2.93vw, 5.27vh), 30px);
    border-radius: clamp(2.5px, min(0.98vw, 1.76vh), 10px);
}

@media (hover: hover) and (pointer: fine) {
    #popupAnimalModal .close-button:hover {
        border-radius: clamp(5px, min(1.95vw, 3.51vh), 20px);
    }
}

#burn-effect-container {
    position: relative;
    height: inherit;
    width: inherit;
    margin: auto;
}

#popupAnimalModal img {
    width: clamp(128px, min(50vw, 89.98vh), 512px);
    border-radius: inherit;
    object-fit: cover;
    position: absolute;
}

#popupAnimalModal .modal-text {
    padding: 0 clamp(5px, min(1.95vw, 3.51vh), 20px);
    box-shadow: inset 0 0 clamp(5px, min(12.5vw, 22.5vh), 128px) clamp(5px, min(4.69vw, 8.44vh), 48px) #000;
    border-top-right-radius: clamp(3px, min(1.17vw, 2.11vh), 12px);
    border-bottom-right-radius: clamp(3px, min(1.17vw, 2.11vh), 12px);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#popupAnimalModal .card {
    margin-bottom: clamp(5px, min(1.95vw, 3.51vh), 20px);
    font-size:     clamp(13.75px, min(5.37vw, 9.67vh), 55px);
    font-weight: bold;
    text-shadow: clamp(-2px, max(-0.2vw, -0.35vh), -0.5px) 0 clamp(0.75px, min(0.29vw, 0.53vh), 3px) black, clamp(0.5px, min(0.2vw, 0.35vh), 2px) 0 clamp(0.75px, min(0.29vw, 0.53vh), 3px) black, 0 clamp(-2px, max(-0.2vw, -0.35vh), -0.5px) clamp(0.75px, min(0.29vw, 0.53vh), 3px) black, 0 clamp(0.5px, min(0.2vw, 0.35vh), 2px) clamp(0.75px, min(0.29vw, 0.53vh), 3px) black, clamp(-2px, max(-0.2vw, -0.35vh), -0.5px) clamp(-2px, max(-0.2vw, -0.35vh), -0.5px) clamp(0.75px, min(0.29vw, 0.53vh), 3px) black, clamp(-2px, max(-0.2vw, -0.35vh), -0.5px) clamp(0.5px, min(0.2vw, 0.35vh), 2px) clamp(0.75px, min(0.29vw, 0.53vh), 3px) black, clamp(0.5px, min(0.2vw, 0.35vh), 2px) clamp(-2px, max(-0.2vw, -0.35vh), -0.5px) clamp(0.75px, min(0.29vw, 0.53vh), 3px) black, clamp(0.5px, min(0.2vw, 0.35vh), 2px) clamp(0.5px, min(0.2vw, 0.35vh), 2px) clamp(0.75px, min(0.29vw, 0.53vh), 3px) black;
}

#popupAnimalModal .card.small, #popupAnimalModal .card.smaller {
    font-size: clamp(12.5px, min(4.88vw, 8.79vh), 50px);
}

#popupAnimalModal .pill {
    margin-top: 0;
    padding:   clamp(1.88px, min(0.73vw, 1.32vh), 7.5px) clamp(3px, min(1.17vw, 2.11vh), 12px);
    font-size: clamp(4.5px, min(1.76vw, 3.16vh), 18px);
    box-shadow: 0 0 clamp(1.25px, min(0.49vw, 0.88vh), 5px) clamp(0.5px, min(0.2vw, 0.35vh), 2px) black;
}

#popupAnimalModal .information {
    margin-top: clamp(5px, min(1.95vw, 3.51vh), 20px);
    width:      clamp(102px, min(39.84vw, 71.7vh), 408px);
    font-size:  clamp(4.25px, min(1.66vw, 2.99vh), 17px);
    line-height: 1.5;
 }

.horizontal-buttons {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

#popupAnimalModal .horizontal-buttons {
     margin-top: clamp(10px, min(3.91vw, 7.03vh), 40px);
}

#popupAnimalModal .animal-button {
    padding: clamp(3.75px, min(1.46vw, 2.64vh), 15px);
    font-size: clamp(5.5px, min(2.15vw, 3.87vh), 22px);
    line-height: clamp(5.5px, min(2.15vw, 3.87vh), 22px);
}

#popupAnimalModal .animal-button span {
    margin-right: clamp(1.25px, min(0.49vw, 0.88vh), 5px);
}

.breed {
    background-image: linear-gradient(135deg, blue, #009ff5, #00ffff, #009ff5, blue);
}

.burn {
    background-image: linear-gradient(135deg, maroon, #c10000, #ff5400, #ff8f00, #ff5400, #c10000, maroon);
}

.cancel {
    background-image: linear-gradient(135deg, #003337, #00828d, #00d9ee, #00828d, #003337);
}

@media (hover: hover) and (pointer: fine) {
    .animal-button:hover {
        transform: scale(1.05);
    }

    .breed:enabled:hover {
        background-image: linear-gradient(135deg, #3f3fff, #38b9ff, #3fffff, #38b9ff, #3f3fff);
    }

    .burn:enabled:hover {
        background-image: linear-gradient(135deg, #df0000, #fe1111, #ff7e3f, #ffab3f, #ff7e3f, #fe1111, #df0000);
    }

    .cancel:hover {
        background-image: linear-gradient(135deg, #005d64, #00a4b1, #0ae9ff, #00a4b1, #005d64);
    }
}

.animal-button:active {
    transform: scale(0.95);
}

.breed:enabled:active {
    background-image: linear-gradient(135deg, #0000bf, #0077b7, #00bfbf, #0077b7, #0000bf);
}

.burn:enabled:active {
    background-image: linear-gradient(135deg, #600000, #900000, #bf3e00, #bf6b00, #bf3e00, #900000, #600000);
}

.cancel:active {
    background-image: linear-gradient(135deg, #002629, #006169, #00a2b2, #006169, #002629);
}

/* Vertical Animal Modal
    Divide largest amount of pixels by 10.24 for vh and by 5.53 for vw
*/
@media screen and (orientation:portrait) {
    #popupAnimalModal {
        margin: clamp(5px, min(1.95vh, 3.62vw), 20px);
        flex-direction: column;
        width: clamp(128px, min(50vh, 92.59vw), 512px);
        height: initial;
        border-radius: clamp(3px, min(1.17vh, 2.17vw), 12px);
    }

    #popupAnimalModal .modal-image {
        width: inherit;
        height: clamp(128px, min(50vh, 92.59vw), 512px);
        border-top-left-radius: clamp(3px, min(1.17vh, 2.17vw), 12px);
        border-top-right-radius: clamp(3px, min(1.17vh, 2.17vw), 12px);
        border-bottom-left-radius: 0;
    }

    #popupAnimalModal .amount {
        padding: clamp(1px, min(0.39vh, 0.72vw), 4px) clamp(2px, min(0.78vh, 1.45vw), 8px);
        border-top-left-radius: clamp(3px, min(1.17vh, 2.17vw), 12px);
        border-bottom-right-radius: clamp(3px, min(1.17vh, 2.17vw), 12px);
        font-size: clamp(4.5px, min(1.76vh, 3.25vw), 18px);
    }

    #popupAnimalModal .modal-image .stars {
        --card-stars-size: clamp(10px, min(3.91vh, 7.23vw), 40px);
        bottom: clamp(1.25px, min(0.49vh, 0.9vw), 5px);
    }

    #popupAnimalModal .modal-image .stars img {
        margin: 0 clamp(3px, min(1.17vh, 2.17vw), 12px);
    }

    #popupAnimalModal .close-button {
        top: clamp(-5px, min(-0.49vh, -0.9vw), -1.25px);
        right: clamp(-5px, min(-0.49vh, -0.9vw), -1.25px);
        width: clamp(20px, min(2.93vh, 5.42vw), 30px);
        height: clamp(20px, min(2.93vh, 5.42vw), 30px);
        line-height: clamp(20px, min(2.93vh, 5.42vw), 30px);
        font-size: clamp(20px, min(2.93vh, 5.42vw), 30px);
        border-radius: clamp(2.5px, min(0.98vh, 1.81vw), 10px);
    }

    @media (hover: hover) and (pointer: fine) {
        #popupAnimalModal .close-button:hover {
            border-radius: clamp(5px, min(1.95vh, 3.62vw), 20px);
        }
    }

    #burn-effect-container {
        height: inherit;
        width: inherit;
    }

    #popupAnimalModal img {
        width: clamp(128px, min(50vh, 92.59vw), 512px);
    }

    #popupAnimalModal .modal-text {
        padding: clamp(5px, min(1.95vh, 3.62vw), 20px) 0;
        box-shadow: inset 0 0 clamp(5px, min(12.5vh, 23.15vw), 128px) clamp(5px, min(4.69vh, 8.68vw), 48px) #000;
        border-top-right-radius: 0;
        border-bottom-left-radius: clamp(3px, min(1.17vh, 2.17vw), 12px);
        border-bottom-right-radius: clamp(3px, min(1.17vh, 2.17vw), 12px);
    }

    #popupAnimalModal .card {
        margin-bottom: clamp(5px, min(1.95vh, 3.62vw), 20px);
        font-size:     clamp(17.5px, min(6.84vh, 12.66vw), 70px);
        text-shadow: clamp(-2px, max(-0.2vh, -0.36vw), -0.5px) 0 clamp(0.75px, min(0.29vh, 0.54vw), 3px) black, clamp(0.5px, min(0.2vh, 0.36vw), 2px) 0 clamp(0.75px, min(0.29vh, 0.54vw), 3px) black, 0 clamp(-2px, max(-0.2vh, -0.36vw), -0.5px) clamp(0.75px, min(0.29vh, 0.54vw), 3px) black, 0 clamp(0.5px, min(0.2vh, 0.36vw), 2px) clamp(0.75px, min(0.29vh, 0.54vw), 3px) black, clamp(-2px, max(-0.2vh, -0.36vw), -0.5px) clamp(-2px, max(-0.2vh, -0.36vw), -0.5px) clamp(0.75px, min(0.29vh, 0.54vw), 3px) black, clamp(-2px, max(-0.2vh, -0.36vw), -0.5px) clamp(0.5px, min(0.2vh, 0.36vw), 2px) clamp(0.75px, min(0.29vh, 0.54vw), 3px) black, clamp(0.5px, min(0.2vh, 0.36vw), 2px) clamp(-2px, max(-0.2vh, -0.36vw), -0.5px) clamp(0.75px, min(0.29vh, 0.54vw), 3px) black, clamp(0.5px, min(0.2vh, 0.36vw), 2px) clamp(0.5px, min(0.2vh, 0.36vw), 2px) clamp(0.75px, min(0.29vh, 0.54vw), 3px) black;
    }

    #popupAnimalModal .card.small {
        font-size: clamp(15px, min(5.86vh, 10.85vw), 60px);
    }

    #popupAnimalModal .card.smaller {
        font-size: clamp(14.5px, min(5.66vh, 10.49vw), 58px);
    }

    #popupAnimalModal .pill {
        margin-top: 0;
        padding:   clamp(1.88px, min(0.73vh, 1.36vw), 7.5px) clamp(3px, min(1.17vh, 2.17vw), 12px);
        font-size: clamp(4.5px, min(1.76vh, 3.25vw), 18px);
        box-shadow: 0 0 clamp(1.25px, min(0.49vh, 0.91vw), 5px) clamp(0.5px, min(0.2vh, 0.36vw), 2px) black;
    }

    #popupAnimalModal .information {
        margin-top: clamp(5px, min(1.95vh, 3.62vw), 20px);
        width: clamp(115px, min(44.92vh, 83.18vw), 460px);
        font-size:  clamp(5px, min(1.95vh, 3.62vw), 20px);
    }

    #popupAnimalModal .buttons {
        margin-top:    clamp(5px, min(1.95vh, 3.62vw), 20px);
    }

    #popupAnimalModal .animal-button {
        margin-bottom: clamp(5px, min(1.95vh, 3.62vw), 20px);
        padding:       clamp(3.75px, min(1.46vh, 2.71vw), 15px);
        font-size:     clamp(5.5px, min(2.15vh, 3.98vw), 22px);
        line-height:   clamp(5.5px, min(2.15vh, 3.98vw), 22px);
    }

    #popupAnimalModal .animal-button span {
        margin-right: clamp(1.25px, min(0.49vh, 0.9vw), 5px);
    }
}

/*
    Burn Animal Modal
    Divide largest amount of pixels by 6.5 for vw
*/
#burnAnimalModal {
    --1px: clamp(0.25px, 0.1538463vw, 1px);
    --5px: calc(5 * var(--1px));
    --8px: calc(8 * var(--1px));
    --10px: calc(10 * var(--1px));
    --15px: calc(15 * var(--1px));
    --16px: calc(16 * var(--1px));
    --20px: calc(20 * var(--1px));
    --22px: calc(22 * var(--1px));
    --32px: calc(32 * var(--1px));
    --40px: calc(40 * var(--1px));
    --54px: calc(54 * var(--1px));
    --80px: calc(80 * var(--1px));
    --96px: calc(96 * var(--1px));
    --100px: calc(100 * var(--1px));
    --540px: calc(540 * var(--1px));

    width: var(--540px);
    padding: var(--54px) var(--40px);
    background-color: #2a0000;
    color: white;
    border-radius: var(--100px);
    box-shadow: #ff9700b3 0 0 var(--16px) var(--8px) inset,
                #ff0000b3 0 0 var(--32px) var(--16px) inset,
                #ff9700b3 0 0 var(--32px) var(--16px),
                #ff0000b3 0 0 var(--96px) var(--80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#burnAnimalModal .modal-text {
    text-align: center;
    font-size: var(--20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#burnAnimalModal .modal-text p, .burn-form-container, .afford-egg {
    margin: var(--10px) 0;
}

#burnAnimalModal .horizontal-buttons {
    margin-top: var(--10px);
}

#amount-cards-to-burn {
    width: var(--100px);
    font-size: inherit;
    text-align: center;
}

#burnAnimalModal .modal-text .error {
    margin-top: var(--20px);
    color: red;
}

#burnAnimalModal .animal-button {
    padding: var(--15px);
    font-size: var(--22px);
    line-height: var(--22px);
}

#burnAnimalModal .animal-button span {
    margin-right: var(--5px);
}

#burnAnimalModal .set-burn {
    margin-right: var(--10px);
    padding: var(--8px) var(--10px);
    width: fit-content;
    background-image: linear-gradient(135deg, #ff3c00, #ff8f00, yellow, #ff8f00, #ff3c00);
}

@media (hover: hover) and (pointer: fine) {
    #burnAnimalModal .set-burn:enabled:hover {
        background-image: linear-gradient(135deg, #ff6332, #ffa532, #ffff32, #ffa532, #ff6332);
    }
}

#burnAnimalModal .set-burn:enabled:active {
    background-image: linear-gradient(135deg, #7f1e00, #7f4700, #7f7f00, #7f4700, #7f1e00);
}

#burnAnimalModal .set-burn span {
    margin: 0 0 0 var(--5px);
}

#burnAnimalModal .icon-cross {
    font-size: var(--20px);
}

.coins {
    color: #FACC15;
}

/*
    Account modal
*/
#accountModal, #confirmationModal, #gdprConsentModal, #hatchedAnimalsModal {
    margin: 10px;
    color: white;
    border-radius: 20px;
    box-shadow: var(--modal-box-shadow);
}

#accountModal.extra-wide {
    min-width: 353px;
}

#accountModal > div, #confirmationModal > div, #gdprConsentModal > div {
    padding: 15px;
}

#confirmationModal .modal-footer, #gdprConsentModal .modal-footer {
    padding-top: 5px;
}

#accountModal .modal-header, #confirmationModal .modal-header, #gdprConsentModal .modal-header, #newSpeciesModal .modal-header, #hatchedAnimalsModal .modal-header {
    font-size: 20px;
    color: white;
}

#accountModal .modal-text, #confirmationModal .modal-text, #gdprConsentModal .modal-text {
    font-size: 14px;
}

#accountModal .modal-text .info {
    margin-bottom: 10px;
}

#accountModal .modal-text .account-info {
    margin-bottom: 15px;
}

#accountModal .modal-text .display-name-container button {
    margin: 0 0 0 10px;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) {
    #accountModal .modal-text .display-name-container button:hover {
        text-shadow: white 0 0 10px;
    }
}

#accountModal .modal-text .display-name-container .display-name-update:disabled {
    color: gray;
    text-shadow: none;
}

#accountModal .modal-text .display-name-container #display-name-input {
    margin-bottom: 10px;
    width: auto;
}

#GoogleSignInButton, #GoogleLinkButton {
     display: none;
}

#accountModal #GoogleSignInButton, #accountModal #GoogleLinkButton {
    display: block;
}

#GoogleLinkButtonModalContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@font-face {
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/GoogleSans.ttf') format('truetype');
}

.button-with-icon {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 2px 0 2px 2px;
    min-width: 248px;
    height: 40px;
    border-radius: 20px;
    font-weight: 500;
    color: white;
    background-color: #7BA9D0;
}

.button-with-icon .icon, .button-with-icon svg, .disabled-google-icon svg {
    padding: 9px;
    height: 18px;
    border-radius: 18px;
    background-color: white;
}

.disabled-google-icon svg {
    outline: 2px solid #7BA9D0;
    margin-left: 2px;
}

.button-with-icon .icon:before, .button-with-icon svg {
    color: black;
    font-size: 18px;
}

#accountModal .modal-text .button-with-icon .text {
    width: calc(100% - 36px);
    text-align: center;
}

#accountModal label {
    font-weight: bold;
    display: block;
}

#accountModal input {
    margin-top: 10px;
    padding: 5px;
    width: 100%;
    font-size: 14px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    background-color: #101922;
    border-radius: 30px;border: 1px solid #324c66;
}

#accountModal input:focus-visible {
    outline: 2px solid aliceblue;
}

#accountModal input.validation {
    font-size: 30px;
}

#accountModal .button-group, #confirmationModal .button-group, #gdprConsentModal .button-group {
    display: flex;
}

button, .edit-set a {
    padding: 10px;
    border-radius: 30px;
    color: white;
}

#accountModal button, #confirmationModal button, .blacklist-ip-address button, .update-message button {
    margin-top: 10px;
}

#accountModal button, #confirmationModal button, .blacklist-ip-address button, .my-sets button, .edit-set button, .edit-set a, .update-message button, #gdprConsentModal button, #newSpeciesModal button, .cookie {
    transition: background-color 150ms ease-in-out;
}

#account-button-container :first-child {
    margin-top: 0;
}

.primary {
    background-color: #1A73E8;
    width: 100%;
    height: 40px;
    color: white;
}

.back {
    position: absolute;
    top: 0px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 20px;
}

.edit-set .back {
    padding-top: 10px;
    top: 5px;
    left: 5px;
    height: 20px;
    width: 20px;
    text-decoration: none;
}

.secondary {
    background-color: #324c66;
}

@media (hover: hover) and (pointer: fine) {
    .primary:hover {
        background-color: #5195EE;
    }

    .secondary:hover {
        background-color: #406284;
    }
}

.primary:active {
    background-color: #64A0F0;
}

.primary[disabled], .primary[disabled]:hover, .primary[disabled]:active {
    background-color: #7BA9D0;
}

.secondary:active {
    background-color: #4f79a2;
}

.secondary[disabled], .secondary[disabled]:hover, .secondary[disabled]:active {
    background-color: #313131;
    color: gray;
}

#accountModal .secondary, #confirmationModal .secondary {
    margin-left: 5px;
}

#accountModal .message {
    display: none;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    color: white;
}

#accountModal .modal-text .message.success {
    background-color: #68BD2A;
    display: block;
}

#accountModal .modal-text .message.fail {
    background-color: red;
    display: block;
}

/*
    GDPR Consent Modal
 */
#gdprConsentModal {
    width: 600px;
    max-width: calc(100vw - 20px);
}

#gdprConsentModal .modal-header {
    font-size: 30px;
}

#gdprConsentModal .modal-header .secondary {
    top: 12px;
}

#gdprConsentModal .modal-text {
    text-align: left;
}

#gdprConsentModal p {
    margin-top: 5px;
    margin-bottom: 0;
}

#gdprConsentModal p:first-child {
    margin-top: 0;
}

#gdprConsentModal .primary {
    margin-left: 5px;
}

#gdprConsentModal .primary:first-child {
    margin-left: 0;
}

#gdprConsentModal .primary {
    height: unset !important;
}

#gdprConsentModal .cookie {
    margin-top: 10px;
    padding: 10px 20px;
    background: #1D2F40;
    border-radius: 20px;
    cursor: pointer;
}

#gdprConsentModal .input-and-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
}

#gdprConsentModal .description {
    margin-top: 10px;
}

@media (hover: hover) and (pointer: fine) {
    #gdprConsentModal .cookie:hover {
        background: #324C66;
    }
}

#gdprConsentModal .cookie:active {
    background: #466c91;
}

#gdprConsentModal input {
    width: 30px;
    height: 30px;
    float: right;
}

#gdprConsentModal .name {
    margin-left: 10px;
}

/*
    Sign out confirmation modal
 */
#confirmationModal button {
    margin: 0;
}

/*
    New Card Modal
    Scale cards on thin screens, divide pixels by 6.8 to get vw and by 5.4 to get vh
 */
#newSpeciesModal {
    --1px: clamp(0.25px, min(0.1470588235294118vw, 0.1851851851851852vh), 1px);
    --5px: calc(5 * var(--1px));
    --10px: calc(10 * var(--1px));
    --12px: calc(12 * var(--1px));
    --15px: calc(15 * var(--1px));
    --20px: calc(20 * var(--1px));
    --50px: calc(50 * var(--1px));
    --660px: calc(660 * var(--1px));

    box-shadow: var(--modal-box-shadow);
    border-radius: var(--50px);
    width: var(--660px);
}

#newSpeciesModal .video, .video iframe {
    width: 92.0588vw;
    height: 51.7647vw;
}

@media screen and (min-width: 680px) {
    #newSpeciesModal .video, #newSpeciesModal .video iframe {
        width: 626px;
        height: 352px;
    }
}

#newSpeciesModal > div {
    padding: var(--15px);
}

#newSpeciesModal .modal-video {
    margin-top: var(--20px);
}

#newSpeciesModal .modal-footer {
    padding-top: var(--5px);
}

/*
    Hatched Animals Modal
    Divide largest amount of pixels by 10.24 for vh and by 5.53 for vw
*/
#hatchedAnimalsModal {
    --columns: 1;
    --rows: 1;
    --animal-div-px: 230;
    --width-px: calc(var(--columns) * var(--animal-div-px));
    --height-px: calc(var(--rows) * var(--animal-div-px));
    --vw: calc(100vw / (var(--width-px) + 100));
    --vh: calc(100vh / (var(--height-px) + 100));
    --1px: min(var(--vw), var(--vh), 1px);
    --3px: calc(3 * var(--1px));
    --5px: calc(5 * var(--1px));
    --8px: calc(8 * var(--1px));
    --10px: calc(10 * var(--1px));
    --15px: calc(15 * var(--1px));
    --18px: calc(18 * var(--1px));
    --20px: calc(20 * var(--1px));
    --25px: calc(25 * var(--1px));
    --30px: calc(30 * var(--1px));
    --100px: calc(100 * var(--1px));
    --200px: calc(200 * var(--1px));

    width: calc(var(--width-px) * var(--1px));
    height: calc(var(--height-px) * var(--1px));
    margin: 0;
    padding: var(--10px);
    user-select: none;
}

#hatchedAnimalsModal .inner > div {
    position: relative;
    float: left;
    margin: var(--15px);
    width: var(--200px);
    height: var(--200px);
}

#hatchedAnimalsModal .animal {
    border-radius: 20%;
    box-shadow: 0 0 var(--8px) var(--8px);
    width: inherit;
}

#hatchedAnimalsModal .new-banner-image {
    position: absolute;
    top: 2px;
    height: var(--30px);
}

#hatchedAnimalsModal .modal-text {
    position: absolute;
    bottom: var(--3px);
    font-size: var(--25px);
}

#hatchedAnimalsModal .modal-text.small {
    font-size: var(--20px);
}

#hatchedAnimalsModal .modal-text.smaller {
    font-size: var(--18px);
}

#hatchedAnimalsModal.amountEggs_3 {
    --columns: 3;
    --rows: 1;
}

#hatchedAnimalsModal.amountEggs_4 {
    --columns: 2;
    --rows: 2;
}

#hatchedAnimalsModal.amountEggs_6 {
    --columns: 3;
    --rows: 2;
}

#hatchedAnimalsModal.amountEggs_8 {
    --columns: 4;
    --rows: 2;
}

#hatchedAnimalsModal.amountEggs_9 {
    --columns: 3;
    --rows: 3;
}

#hatchedAnimalsModal.amountEggs_10 {
    --columns: 5;
    --rows: 2;
}

#hatchedAnimalsModal.amountEggs_12 {
    --columns: 4;
    --rows: 3;
}

@media (orientation:portrait) {
    #hatchedAnimalsModal.amountEggs_3 {
        --columns: 1;
        --rows: 3;
    }

    #hatchedAnimalsModal.amountEggs_6 {
        --columns: 2;
        --rows: 3;
    }

    #hatchedAnimalsModal.amountEggs_8 {
        --columns: 2;
        --rows: 4;
    }

    #hatchedAnimalsModal.amountEggs_10 {
        --columns: 2;
        --rows: 5;
    }

    #hatchedAnimalsModal.amountEggs_12 {
        --columns: 3;
        --rows: 4;
    }
}

/*
    Blacklist IP Address page
 */
.blacklist-ip-address {
    text-align: center;
    margin: 100px auto;
    padding: 50px;
    clear: both;
    width: fit-content;
    background-color: white;
    box-shadow: 0 0 10px 3px white;
    border-radius: 10px;
    color: black;
}

.blacklist-ip-address.success {
    background-color: #68BD2A;
    box-shadow: 0 0 10px 3px #68bd2a;
}

.blacklist-ip-address button, .my-sets button, .update-message button {
    width: 100px;
}

.update-message, .my-sets, .edit-set, .error-box {
    position: relative;
    margin: 30px auto;
    padding: 40px;
    width: fit-content;
    max-width: 1000px;
    background-color: white;
    box-shadow: 0 0 10px 3px white;
    border-radius: 10px;
    color: black;
}

.error-box {
    background-color: red;
    box-shadow: 0 0 10px 3px red;
}

.edit-set .set-name {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
}

.edit-set .set-description {
    text-align: center;
    margin-bottom: 20px;
}

.edit-set .set-image {
    margin-bottom: 20px;
    text-align: center;
}

.edit-set .set-image img {
    border-radius: 20px;
}

.edit-set .error {
    margin-bottom: 15px;
    text-align: center;
    color: red;
}

.edit-set .submit-button {
    margin-top: 15px;
    width: 140px;
}

#newImage {
    height: 300px;
    border-radius: 20px;
}

.update-message .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.update-message {
    min-width: 320px;
    width: calc(100% - 30px);
    max-width: 560px;
    box-sizing: border-box;
}

.update-message label, .update-message input[type='text'] {
    display: block;
}

.update-message input[type='text'] {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

.update-message .previous-message {
    margin-top: 5px;
}

.checkboxes {
    margin: 20px 0 20px 0;
}

.expanded-inputs {
    margin: 5px 0 15px 25px;
}

.expanded-inputs input[type='date'], .expanded-inputs input[type='time'] {
    height: 25px;
}

.expanded-inputs input[type='time'] {
    margin-left: 5px;
}

.expanded-inputs input[type='number'] {
    width: 40px;
}

.center-horizontally {
    display: flex;
    justify-content: center;
}

.creation-form {
    box-sizing: border-box;
    width: fit-content;
    margin-top: 30px;
    padding: 10px;
    box-shadow: 0 0 5px 3px black;
    margin-left: auto;
    margin-right: auto;
}

.creation-form .title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.creation-form .label {
    text-align: left;
    padding-right: 5px;
}

.creation-form input[type='text'] {
    box-sizing: border-box;
    width: 280px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid gray;
    margin-bottom: 5px;
    padding: 5px;
}

.creation-form .buttons {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
}

.creation-form button {
    width: 150px;
}

.links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.links-div {
    margin: 20px auto 20px;
    width: fit-content;
    padding: 10px;
    font-size: 15px;
    border-radius: 30px;
    background: var(--modal-background-color);
    box-shadow: var(--modal-box-shadow);
}

@media screen and (min-width: 626px) {
    .links-div {
        margin: 100px auto 20px;
    }
}

[class^="sm-icon-"] {
     background-image: url(images/social-media-icons.png);
     background-repeat: no-repeat;
     display: block;
 }

.sm-icon-youtube {
    width: 48px;
    height: 48px;
    background-position: 0 0;
}

.sm-icon-twitter {
    width: 48px;
    height: 48px;
    background-position: -48px 0;
}

.sm-icon-discord {
    width: 48px;
    height: 48px;
    background-position: -96px 0;
}

.sm-icon-reddit {
    width: 48px;
    height: 48px;
    background-position: -144px 0;
}

.sm-icon-facebook {
    width: 48px;
    height: 48px;
    background-position: -192px 0;
}

.sm-icon-instagram {
    width: 48px;
    height: 48px;
    background-position: -240px 0;
}

.sm-icon-tiktok {
    width: 48px;
    height: 48px;
    background-position: -288px 0;
}

.social-media {
    margin-bottom: 10px;
}

.social-media a {
    transition: transform 150ms ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
    .social-media a:hover {
        transform: scale(1.1);
    }
}

.social-media a:active {
    transform: scale(0.9);
}

.links-div tr td {
    padding-bottom: 2px;
}

.links-div .creator, .links-div .hybrid-zoo {
    padding-bottom: 20px;
}

.links-div tr td {
    padding-left: 15px;
}

.links-div tr td:first-child {
    text-align: right;
    padding-left: 0;
    padding-right: 15px;
}

.links-div tr td span {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    --color1: #006dfc;
    --color2: #00e1ff;
}

.links-div td:first-child span {
    background-image: linear-gradient(90deg, var(--color1), var(--color2));
}

.links-div td:nth-child(2) span {
    background-image: linear-gradient(270deg, var(--color1), var(--color2));
}

.links-div a {
    position: relative;
    padding-bottom: 2px;
    text-decoration-color: var(--color1);
}

.links-div a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(10deg,var(--color2),var(--color1));
    transition: width 200ms ease;
}

.links-div a:hover::after {
    width: 100%;
}

.links-div td.creator span {
    font-size: 25px;
    --color1: #FF9800;
    --color2: #FFEB3B;
}

.links-div td.hybrid-zoo span {
    --color1: #9600FF;
    --color2: #F75D4D;
}

.links-div td.hybrid-zoo span, .links-div td.graphics span {
    font-size: 20px;
}

.leaderboard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 0;
}

.leaderboard-container table, .sets-table, table.cards {
    background: white;
    color: black;
    border-collapse: collapse;
    --radius: 15px;
    border-radius: var(--radius);
}

.sets-table .datetime {
    width: 160px;
    text-align: center;
}

.sets-table .set-name {
    color: blue;
}

.leaderboard-container .active {
    background-color: #60a3ff;
}

.leaderboard-container .gold {
    background-color: gold;
}

.leaderboard-container .active.gold, .leaderboard-container .active .gold {
    background-color: #60a3ff;
    color: gold;
    font-weight: bold;
}

.leaderboard-container a {
    color: blue;
}

.leaderboard-container td, .leaderboard-container th, .sets-table td, .sets-table th, table.cards td, table.cards th {
    padding: 5px;
    --basic-table-border: 1px solid black;
    border: var(--basic-table-border);
}

.leaderboard-container td {
    text-align: right;
}

.leaderboard-container th:last-child {
    border-top-right-radius: var(--radius);
}

.leaderboard-container tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius);
}

.leaderboard-container .display-name {
    font-family: "Courier New", monospace;
}

table.cards {
    margin: 20px auto 0;
}

table.cards th {
    color: white;
    text-shadow: var(--text-outline-thin);
}

table.cards td {
    vertical-align: top;
}

table.cards tr:first-child td {
    border-bottom: 0;
}

table.cards tr:last-child td {
    border-top: 0;
    border-bottom: var(--basic-table-border);
}

table.cards .card {
    display: flex;
    align-items: center;
}

table.cards .card .name {
    margin: 5px;
}

table.cards .card button {
    padding: 5px;
    color: black;
}

/* CSS variables including rarity colors */
:root {
    color-scheme: dark;

    --5px: 5px;
    --10px: 10px;
    --20px: 20px;
    --100px: 100px;

    --actions-menu-padding-vertical: 15px;
    --gold-gradient: linear-gradient(135deg, #d4aa04, #c24800);
    --modal-background-color: #15202B;
    --modal-box-shadow-color: #003366;
    --text-outline-thin: -1px 0 1px black, 1px 0 1px black, 0 -1px 1px black, 0 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black, 1px 1px 1px black;
    --card-margin: 13px;/* update updateEmptyCards() in JS */
    --card-width: 200px;/* update updateEmptyCards() in JS */

    --common: #0f0;
    --common-variant: #00FF80;
    --uncommon: #0ff;
    --uncommon-variant: #0af;
    --rare: blue;
    --rare-variant: #8000ff;
    --epic: #970097;
    --epic-variant: #aa0064;
    --legendary: red;
    --legendary-variant: #ff5000;

    /* Popup Animal Modal background colors */
    --common-popup: #00a000;
    --common-variant-popup: #00a050;
    --uncommon-popup: #00a0a0;
    --uncommon-variant-popup: #006ba0;
    --rare-popup: #0000a0;
    --rare-variant-popup: #5000a0;
    --epic-popup: #5f005f;
    --epic-variant-popup: #6b003e;
    --legendary-popup: #a00000;
    --legendary-variant-popup: #a03200;
}

* {
    --card-height: calc(var(--card-width) * 1.75);
    --modal-box-shadow: 0 0 var(--10px) var(--10px) var(--modal-box-shadow-color), inset 0 0 var(--20px) var(--5px) var(--modal-box-shadow-color), inset 0 0 var(--100px) var(--10px) var(--modal-box-shadow-color);
}

.all-rarities-bgh {
    background-image: linear-gradient(90deg, var(--common), var(--uncommon), var(--rare), var(--epic), var(--legendary)) !important;
}

.all-rarities-bgd {
    background-image: linear-gradient(135deg, var(--common), var(--uncommon), var(--rare), var(--epic), var(--legendary)) !important;
}

.common {
    color: var(--common) !important;
    background-color: var(--common) !important;
}

.common-color {
    color: var(--common) !important;
}

.common-bg {
    background-color: var(--common) !important;
}

.common-bg-popup {
    background-color: var(--common-popup) !important;
}

.common-variant {
    color: var(--common-variant) !important;
    background-color: var(--common-variant) !important;
}

.common-variant-color {
    color: var(--common-variant) !important;
}

.common-variant-bg {
    background-color: var(--common-variant) !important;
}

.common-variant-bg-popup {
    background-color: var(--common-variant-popup) !important;
}

.common-bgd {
    background-image: linear-gradient(135deg, var(--common), var(--common-variant)) !important;
}

.common-bgv {
    background-image: linear-gradient(180deg, var(--common), var(--common-variant)) !important;
}

.uncommon {
    color: var(--uncommon) !important;
    background-color: var(--uncommon) !important;
}

.uncommon-color {
    color: var(--uncommon) !important;
}

.uncommon-bg {
    background-color: var(--uncommon) !important;
}

.uncommon-bg-popup {
    background-color: var(--uncommon-popup) !important;
}

.uncommon-variant {
    color: var(--uncommon-variant) !important;
    background-color: var(--uncommon-variant) !important;
}

.uncommon-variant-color {
    color: var(--uncommon-variant) !important;
}

.uncommon-variant-bg {
    background-color: var(--uncommon-variant) !important;
}

.uncommon-variant-bg-popup {
    background-color: var(--uncommon-variant-popup) !important;
}

.uncommon-bgd {
    background-image: linear-gradient(135deg, var(--uncommon), var(--uncommon-variant)) !important;
}

.uncommon-bgv {
    background-image: linear-gradient(180deg, var(--uncommon), var(--uncommon-variant)) !important;
}

.rare {
    color: var(--rare) !important;
    background-color: var(--rare) !important;
}

.rare-color {
    color: var(--rare) !important;
}

.rare-bg {
    background-color: var(--rare) !important;
}

.rare-bg-popup {
    background-color: var(--rare-popup) !important;
}

.rare-variant {
    color: var(--rare-variant) !important;
    background-color: var(--rare-variant) !important;
}

.rare-variant-color {
    color: var(--rare-variant) !important;
}

.rare-variant-bg {
    background-color: var(--rare-variant) !important;
}

.rare-variant-bg-popup {
    background-color: var(--rare-variant-popup) !important;
}

.rare-bgd {
    background-image: linear-gradient(135deg, var(--rare), var(--rare-variant)) !important;
}

.rare-bgv {
    background-image: linear-gradient(180deg, var(--rare), var(--rare-variant)) !important;
}

.epic {
     color: var(--epic) !important;
     background-color: var(--epic) !important;
}

.epic-color {
    color: var(--epic) !important;
}

.epic-bg {
    background-color: var(--epic) !important;
}

.epic-bg-popup {
    background-color: var(--epic-popup) !important;
}

.epic-variant {
     color: var(--epic-variant) !important;
     background-color: var(--epic-variant) !important;
}

.epic-variant-color {
    color: var(--epic-variant) !important;
}

.epic-variant-bg {
    background-color: var(--epic-variant) !important;
}

.epic-variant-bg-popup {
    background-color: var(--epic-variant-popup) !important;
}

.epic-bgd {
    background-image: linear-gradient(135deg, var(--epic), var(--epic-variant)) !important;
}

.epic-bgv {
    background-image: linear-gradient(180deg, var(--epic), var(--epic-variant)) !important;
}

.legendary {
    color: var(--legendary) !important;
    background-color: var(--legendary) !important;
}

.legendary-color {
    color: var(--legendary) !important;
}

.legendary-bg {
    background-color: var(--legendary) !important;
}

.legendary-bg-popup {
    background-color: var(--legendary-popup) !important;
}

.legendary-variant {
    color: var(--legendary-variant) !important;
    background-color: var(--legendary-variant) !important;
}

.legendary-variant-color {
    color: var(--legendary-variant) !important;
}

.legendary-variant-bg {
    background-color: var(--legendary-variant) !important;
}

.legendary-variant-bg-popup {
    background-color: var(--legendary-variant-popup) !important;
}

.legendary-bgd {
    background-image: linear-gradient(135deg, var(--legendary), var(--legendary-variant)) !important;
}

.legendary-bgv {
    background-image: linear-gradient(180deg, var(--legendary), var(--legendary-variant)) !important;
}

/*
Icons
 */
@font-face {
    font-family: 'icomoon';
    src: url('/fonts/icomoon.woff?20230426') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-locked:before {
    content: "\e98f";
}

.icon-unlocked:before {
    content: "\e990";
}

.icon-search:before {
    content: "\e986";
}

.icon-cross:before {
    content: "\ea0f";
}

.icon-volume-on:before {
    content: "\ea26";
}

.icon-volume-off:before {
    content: "\ea2a";
}

.icon-sort-alpha-asc:before {
    content: "\ea48";
}

.icon-sort-alpha-desc:before {
    content: "\ea49";
}

.icon-sort-amount-asc:before {
    content: "\ea4c";
}

.icon-sort-amount-desc:before {
    content: "\ea4d";
}

.icon-sort-datetime-asc:before {
    content: "\e902";
}

.icon-sort-datetime-desc:before {
    content: "\e901";
}

.icon-menu:before {
    content: "\e9bd";
}

.icon-info:before {
    content: "\ea0c";
}

.icon-spinner:before {
    content: "\e97a";
}

.icon-spinner {
    animation: rotating 0.5s infinite steps(8);
    display: inline-block;
    margin-right: 5px;
}

.icon-fire:before {
    content: "\e9a9";
    color: #ff8d00;
    filter: drop-shadow(0 0 1px black);
    background: linear-gradient(red, #ff6500, #ffbc00);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.icon-arrow-left:before {
    content: "\ea38";
}

.icon-arrow-right:before {
    content: "\e907";
}

.icon-arrow-up:before {
    content: "\ea32";
}

.icon-email:before {
    content: "\e945";
}

.icon-guest:before {
    content: "\e971";
}

.icon-sign-out:before {
    content: "\e904";
}

.icon-trophy:before {
    content: "\e903";
}

.icon-plus:before {
    content: "\e900";
}

.icon-minus:before {
    content: "\e908";
}

.icon-online:before {
    content: "\e906";
}

.icon-offline:before {
    content: "\e905";
}

.icon-edit:before {
    content: "\e909";
}

.icon-checkmark:before {
    content: "\e90a";
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Toastify */
.toastify {
    padding: 12px 20px;
    color: #ffffff;
    display: inline-block;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    background: linear-gradient(135deg, #73a5ff, #5477f5);
    position: fixed;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    z-index: 2147483647;
}

.toastify.on {
    opacity: 1;
}

.toast-close {
    background: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    opacity: 0.4;
    padding: 0 5px;
}

.toastify-right {
    right: 15px;
    margin: 0 0 0 15px;
}

.toastify-left {
    left: 15px;
    margin: 0 15px 0 0;
}

.toastify-top {
    top: -150px;
}

.toastify-bottom {
    bottom: -150px;
}

.toastify-rounded {
    border-radius: 25px;
}

.toastify-avatar {
    width: 1.5em;
    height: 1.5em;
    margin: -7px 5px;
    border-radius: 2px;
}

.toastify-center {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
}

.toast-success {
    background: linear-gradient(to right, #00b09b, #96c93d);
}

.toast-error {
    background: linear-gradient(to right, #ff1e1e, #ffa723);
}

/* Aqua Button */
:root {
    --hue: 160deg;
    --sat: 100%;
    --sat2: calc(var(--sat) + 10%);
    --blur: 10px;
    --gradoffset: 45%;
    --gradgap: 30%;
}

* {
    --hue2: calc(var(--hue) + 60deg);
    --clr: hsl(var(--hue) var(--sat) 90%);
    --clr2: hsl(var(--hue2) var(--sat2) 85%);
    --text: hsla(var(--hue), 70%, 10%, .9);
}

.aqua {
    font-size: 16px;
    color: var(--text);
    font-weight: bold;
    letter-spacing: -0.025em;
    background-color: var(--clr);
    background-image: linear-gradient(180deg, var(--clr2) var(--gradgap), transparent calc(100% - var(--gradgap)));
    background-repeat: no-repeat;
    background-position: center var(--gradoffset);
    background-size: 100% 200%;
    padding: 1.1em 1.5em;
    border-radius: 2em;
    border: none;
    position: relative;
    transition: all 150ms ease;
    outline: none;
}

.aqua::before, .aqua::after {
    content: "";
    inset: 0;
    position: absolute;
    border-radius: 5em;
}

.aqua::before {
    background-image: radial-gradient(ellipse, hsla(var(--hue), 100%, 90%, 0.8) 20%, transparent 50%, transparent 200%), linear-gradient(90deg, #404040 -10%, transparent 30%, transparent 70%, #404040 110%);
    box-shadow: inset 0 0.25em 0.75em rgba(0, 0, 0, 0.8), inset 0 -0.05em 0.2em rgba(255, 255, 255, 0.4), inset 0 -1px 3px hsla(var(--hue), 80%, 50%, 0.75);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: 200% 80%, cover;
    background-position: center 220%;
    mix-blend-mode: overlay;
    filter: blur(calc(var(--blur) * 0.5));
}

.aqua::after {
    background: linear-gradient(180deg, hsla(var(--hue2), 100%, 90%, 0.9), hsla(var(--hue2), calc(var(--sat2)*0.7), 50%, 0.75) 40%, transparent 80%);
    top: 0.075em;
    left: 0.75em;
    right: 0.75em;
    bottom: 1.4em;
    filter: blur(var(--blur));
    mix-blend-mode: screen;
}

.aqua:hover {
    outline: none;
    box-shadow: 0 -0.2em 1em hsla(var(--hue2), 70%, 80%, 0.3), 0 0.5em 1.5em hsla(var(--hue), 70%, 80%, 0.5), 0 0.25em 0.3em -0.2em hsl(var(--hue), 90%, 70%), 0 0.25em 0.5em hsla(var(--hue), 20%, 30%, 0.2), inset 0 -2px 2px rgba(255, 255, 255, 0.2);
    background-position: center calc( var(--gradoffset) - 0.75em );
    transform: scale(1.05);
}

.aqua, .aqua:active {
    box-shadow: 0 -0.5em 0.5em transparent, 0 0.5em 0.5em transparent, 0 0.25em 0.3em -0.2em hsla(var(--hue), var(--sat), 50%, 0.46), 0 0.25em 0.75em hsla(var(--hue), calc(var(--sat) - 10%), 40%, 0.3);
}

.aqua:active {
    transform: scale(0.95);
}

.aqua span {
    display: inline-flex;
    align-content: center;
    align-self: center;
    filter: drop-shadow(0 1px 0 hsla(var(--hue), 90%, 88%, 1));
}

#cookie-button {
    position: fixed;
    bottom: 30px;
    left: 30px;
    cursor: pointer;
    transition: all 150ms ease;
}

#cookie-button:hover {
    transform: scale(1.1);
    opacity: 1 !important;
}

#cookie-button:active {
    transform: scale(0.9);
    opacity: 1 !important;
}

#cookie-button img {
    height: 50px;
}

/* Back to top button */
#back-to-top-container {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
}

#back-to-top-button {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: #5de6de;
    background-image: linear-gradient(315deg, #5de6de 0%, #b58ecc 74%);
    border: none;
    border-radius: 50%;
    transition: 150ms;
    user-select: none;
}

#back-to-top-button svg {
    position: absolute;
    fill: white;
    width: 15px;
    height: 15px;
    transform: translateX(-50%) translateY(-50%);
}

#back-to-top-button:before {
    content: 'Back to Top';
    position: absolute;
    top: 5px;
    width: max-content;
    font-size: 15px;
    transition: 150ms;
    color: transparent;
    font-weight: bold;
    transform: translateX(-50%) translateY(45px);
}

#back-to-top-button:hover {
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    width: 45px;
    height: 45px;
}

#back-to-top-button:active {
    width: 40px;
    height: 40px;
}

#back-to-top-button:hover::before {
    color: #fff;
    text-shadow: var(--text-outline-thin);
}

#back-to-top-button:hover svg {
    animation: bounce 2s infinite linear;
}

@keyframes bounce {
    0% {transform: translateX(-50%) translateY(-50%)}
    25% {transform: translateX(-50%) translateY(-65%)}
    50% {transform: translateX(-50%) translateY(-50%)}
    75% {transform: translateX(-50%) translateY(-35%)}
    100% {transform: translateX(-50%) translateY(-50%)}
}

#back-to-top-button:focus {
    outline: none;
}