/*
 Copyright (C) 2021 Jan-Dirk van Dingenen
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Syne+Mono&display=swap');

html {
    background: #101010;
    font-family: 'Syne Mono', monospace;
}

body {
    margin:0;
    --copyBaseSize: var(--baseSize);
}

#map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--baseSize) * var(--sizeX));
    height: calc(var(--baseSize) * var(--sizeY));
    background: #000;
    box-sizing: border-box;
    border: solid calc(var(--baseSize) * 0.05) #91e81e;
    box-shadow: 0px 0px calc(var(--baseSize) * 0.2) #91e81e;
    border-radius: calc(var(--baseSize) * 0.2);    
}

.star {
    position: absolute;
    top: calc(var(--baseSize) * var(--y));
    left: calc(var(--baseSize) * var(--x));
    width: calc(var(--baseSize) * 0.075);
    height: calc(var(--baseSize) * 0.075);
    background-color: #ffff00;
    border-radius: 100%;
    filter: hue-rotate(var(--hue)) brightness(var(--brightness));
    box-shadow: 0 0 calc(var(--baseSize) * 1) calc(var(--baseSize) * 0.01) #ffff00;
    cursor:pointer;
    transition: all 0.25s;
    z-index: 3;
}

.star.showName:after {
    content: attr(title);
    color: #fff;
    font-size: calc(var(--baseSize) * 0.17);
    transform: translate(-50%,-100%);
    position: absolute;
    z-index: 10;
}

.star:hover, .star.found {
    filter: hue-rotate(var(--hue)) brightness(5);
    transform: scale(2);
}

.star:hover:after, .star.found:after {
    content: attr(title);
    color: #fff;
    font-size: calc(var(--baseSize) * 0.2);
    transform: translate(-50%,-100%);
    position: absolute;
    z-index: 10;
    filter: brightness(100);
}

.star.found:before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--baseSize) * 0.075);
    height: calc(var(--baseSize) * 0.075);
    background-color: #ffff00;
    border-radius: 100%;
    filter: hue-rotate(var(--hue)) brightness(5) blur(0px);
    transform: scale(2);
    z-index: 0;
    
    animation-duration: calc(var(--animSpeed) * 1);
    animation-name: foundPlanet;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.star.blackhole {
    background-color: #000;
    box-sizing: border-box;
    width: calc(var(--baseSize) * 0.2);
    height: calc(var(--baseSize) * 0.2);
    box-shadow: 0 0 calc(var(--baseSize) * 0.25) calc(var(--baseSize) * 0.05) #6300ff80, 0 0 calc(var(--baseSize) * 15) calc(var(--baseSize) * 0.1) #6300ff80;
    filter: brightness(2) blur(0px);
    z-index: 10;
}


@keyframes foundPlanet {
    0%      {transform: scale(2); filter: hue-rotate(var(--hue)) brightness(5) blur(0px);}
    100%     {transform: scale(4); filter: hue-rotate(var(--hue)) brightness(5) blur(calc(var(--baseSize) * 0.2));}
}

.nebulaMap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: calc(var(--baseSize) * var(--sizeX));
    height: calc(var(--baseSize) * var(--sizeY));
    pointer-events: none;
    filter: saturate(5);
    overflow:hidden;
}

.nebula {
    position: absolute;
    top: calc(var(--baseSize) * var(--y));
    left: calc(var(--baseSize) * var(--x));
    width: calc(var(--baseSize) * var(--sizeX));
    height: calc(var( --baseSize) * var(--sizeY));
    background-color: #e03030;
    border-radius: 100%;
    filter: brightness(var(--brightness)) saturate(var(--saturation));
    opacity: var(--opacity);
    background: radial-gradient(ellipse at center, var(--color1) 0%,var(--color2) 100%);
    box-shadow: 0 0 var(--baseSize) var(--color3);    
}

.nebulaName {
    position: absolute;
    top: calc(var(--baseSize) * var(--y));
    left: calc(var(--baseSize) * var(--x));
    color: #fff;
    white-space: nowrap;
    transform: translate(calc(var(--baseSize) * var(--sizeX) / 2), calc(var(--baseSize) * var(--sizeY) / 2));
    z-index: 0;
    opacity: 0.25;
    font-size: calc(var(--baseSize) * 0.25);
    font-weight: bold;
    display:none;
}

#solarSystem, .planetModal {
    position: absolute;
    width: calc(var(--baseSize) * var(--sizeX));
    height: calc(var(--baseSize) * var(--sizeY));
    border: solid calc(var(--baseSize) * 0.05) #91e81e;
    border-radius: calc(var(--baseSize) * 0.2);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #000;
    box-shadow: 0px 0px calc(var(--baseSize) * 0.2) #91e81e;
    display: none;
}

#solarSystem .close {
    position: absolute;
    color: #fff;
    right: calc(var(--baseSize) * 0.4);
    top: calc(var(--baseSize) * 0.1);
    font-size: calc(var(--baseSize) * 1);
    z-index: 101;
    cursor: pointer;
    opacity: 0.9;
}

#solarSystem .close:hover {
    opacity: 1;
}

#solarSystem .title {
    font-family: 'Audiowide', cursive;
    color: #91e81e;
    text-align: center;
    transform: translate(0, -105%);
    font-size: var(--baseSize);
}

.planetModal {
    z-index: 102;
    display: grid;
    color: #91e81e;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    font-size: calc(var(--baseSize) * 0.28);
}

.orbital {
    position: absolute;
    top: calc(var(--baseSize) * (var(--y)));
    left: calc(var(--baseSize) * (var(--x)));
    z-index: var(--z);
    transform: translate(-50%,-50%);
    transition: top var(--animSpeed) linear, left var(--animSpeed) linear;
}

.orbital:hover {
    z-index: 100;
}

.orbitLine {
    position: absolute;
    background-image: url(img/ellipse.svg);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--orbit) * var(--baseSize) * 2);
    height: calc(var(--orbit) * var(--baseSize));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
    z-index:0;
}

.sun {
    --size: calc(var(--baseSize) * 3);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: var(--size);
    height: var(--size);
    border-radius: 100%;
    background-color: #ffffb3;
    box-shadow: inset calc(var(--size)/31) 0 calc(var(--size)/10) calc(var(--size)/40) rgb(255 247 0 / 50%), 
                inset calc(var(--size)/-80) 0 calc(var(--size)/40) calc(var(--size)/60) rgb(255 255 255 / 25%), 
                inset 0 0 calc(var(--baseSize) * 1) #f6ff00f0,
                0 0 calc(var(--baseSize) * 1) calc(var(--baseSize) * 0.1) #fbff00, 
                0 0 calc(var(--baseSize) * 3) calc(var(--baseSize) * 0.1) #fbff00,
                0 0 calc(var(--baseSize) * 6) calc(var(--baseSize) * 0.1) #fff,
                inset calc(var(--size)/31) 0 calc(var(--size)/10) calc(var(--size)/40) rgb(255 247 0 / 50%), 
                inset calc(var(--size)/-80) 0 calc(var(--size)/40) calc(var(--size)/60) rgb(255 255 255 / 25%), 
                inset 0 0 calc(var(--baseSize) * 1) #f6ff00f0,
                0 0 calc(var(--baseSize) * 1) calc(var(--baseSize) * 0.1) #fbff00, 
                0 0 calc(var(--baseSize) * 3) calc(var(--baseSize) * 0.1) #fbff00,
                inset calc(var(--size)/31) 0 calc(var(--size)/10) calc(var(--size)/40) rgb(255 247 0 / 50%), 
                inset calc(var(--size)/-80) 0 calc(var(--size)/40) calc(var(--size)/60) rgb(255 255 255 / 25%), 
                inset 0 0 calc(var(--baseSize) * 1) #f6ff00f0,
                0 0 calc(var(--baseSize) * 1) calc(var(--baseSize) * 0.1) #fbff00, 
                0 0 calc(var(--baseSize) * 3) calc(var(--baseSize) * 0.1) #fbff00,
                inset calc(var(--size)/31) 0 calc(var(--size)/10) calc(var(--size)/40) rgb(255 247 0 / 50%), 
                inset calc(var(--size)/-80) 0 calc(var(--size)/40) calc(var(--size)/60) rgb(255 255 255 / 25%), 
                inset 0 0 calc(var(--baseSize) * 1) #f6ff00f0,
                0 0 calc(var(--baseSize) * 1) calc(var(--baseSize) * 0.1) #fbff00, 
                0 0 calc(var(--baseSize) * 6) calc(var(--baseSize) * 0.1) #fff;
    filter: hue-rotate(var(--hue)) blur(5px);
    z-index:24;                
}

.sun.blackhole {
    box-shadow: inset calc(var(--size)/31) 0 calc(var(--size)/10) calc(var(--size)/40) rgb(255 247 0 / 50%), 
                inset calc(var(--size)/-80) 0 calc(var(--size)/40) calc(var(--size)/60) rgb(255 255 255 / 25%), 
                inset 0 0 calc(var(--baseSize) * 1) #f6ff00f0,
                0 0 calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.1) #fbff00, 
                0 0 calc(var(--baseSize) * 6) calc(var(--baseSize) * 0.1) #fbff00,
                0 0 calc(var(--baseSize) * 8) calc(var(--baseSize) * 0.1) #fff;
    filter: hue-rotate(var(--hue)) blur(5px) brightness(4) invert(1) drop-shadow(0 0 calc(var(--size)/31) #1d0039)
}

.planet, .moon {
    position: relative;
    width: var(--size);
    height: var(--size);
    background-image: var(--img);
    background-size: cover;
    animation-duration: var(--rotationSpeed);
    animation-name: rotatePlanet;
    box-shadow: inset calc(var(--size)/11) 0 calc(var(--size)/10) calc(var(--size)/40) #000, inset calc(var(--size)/-80) 0 calc(var(--size)/40) calc(var(--size)/60) rgb(255 255 255 / 25%);
    border-radius: 50%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: rotate(var(--axis));
    filter: hue-rotate(var(--hue)) saturate(var(--saturation)) invert(var(--invert));
    background-position-x: 100%;
    cursor:pointer;
}

.moon {
    position: absolute;
    left:0%;
    top:var(--top);
    animation-duration: var(--rotationSpeed);
    animation-name: rotateMoon;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.07, 0.01, 0.9, 0.99);  
    transform:translate(50%,0);
}

.moon.reverseRotation {
    animation-name: reverseRotateMoon;
}

.planet.gasGiant {
    cursor:default;
}

.planet.inverted, .moon.inverted {
    box-shadow: inset calc(var(--size)/11) 0 calc(var(--size)/10) calc(var(--size)/40) #fff, inset calc(var(--size)/-80) 0 calc(var(--size)/40) calc(var(--size)/60) rgb(0 0 0 / 25%);
}

.planet.reverseRotation {
    animation-name: reverseRotatePlanet;
}

.planet.rings1:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: url(img/rings.png);
    background-repeat: no-repeat;
    top: 66%;
    left: 54%;
    opacity: 0.7;
    background-size: contain;
    background-position: center;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.planetName {
    position: absolute;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    left: 50%;
    transform: translate(-50%,-100%) rotate(calc(var(--axis) * -1));
    top: 0;
    font-size: calc(var(--baseSize) * 0.3);
    font-variant: all-small-caps;
    filter: invert(var(--invert));
}

@keyframes rotatePlanet {
    0%      {background-position-x: 200%;}
    100%    {background-position-x: 0%;}
}

@keyframes reverseRotatePlanet {
    0%      {background-position-x: 0%;}
    100%    {background-position-x: 200%;}
}

@keyframes rotateMoon {
    0%      {background-position-x: 200%;   z-index:1;  left:0%;        transform:translate(-50%,0) scale(0.5);}
    25%     {background-position-x: 150%;   z-index:1;  left:50%;       transform:translate(0%,0)  scale(1);}
    49%     {background-position-x: 102%;   z-index:1;  left:98%;       transform:translate(48%,0)  scale(0.75);}
    50%     {background-position-x: 100%;   z-index:-1; left:100%;      transform:translate(50%,0)  scale(0.75));}
    99%     {background-position-x: 2%;     z-index:-1; left:2%;        transform:translate(-50%,0) scale(0.5);}
    100%    {background-position-x: 0%;     z-index:1;  left:0%;        transform:translate(-50%,0) scale(0.5);}
}

@keyframes reverseRotateMoon {
    0%      {background-position-x: 0%;         z-index:1;  left:100%;          transform:translate(-50%,0) scale(0.5);}
    25%     {background-position-x: 50%;        z-index:1;  left:50%;           transform:translate(0%,0)   scale(1);}
    49%     {background-position-x: 98%;        z-index:1;  left:2%;            transform:translate(48%,0)  scale(0.75);}
    50%     {background-position-x: 100%;       z-index:-1; left:0%;            transform:translate(50%,0)  scale(0.75));}
    99%     {background-position-x: 198%;       z-index:-1; left:98%;           transform:translate(-50%,0) scale(0.5);}
    100%    {background-position-x: 200%;       z-index:1;  left:100%;          transform:translate(-50%,0) scale(0.5);}
    
}

.planetModal .planetInfoPart.planetImg {
    position: relative;
    --baseSize: calc(var(--copyBaseSize) * 3);
    width: calc(var(--copyBaseSize) * 6);
    height: calc(var(--copyBaseSize) * 6);
    display: inline-flex;
    justify-content: center;
    align-items: center;    
}

.planetModal .planetTitle, .surfaceTitle {
    position: absolute;
    font-family: 'Audiowide', cursive;
    color: #91e81e;
    font-size: var(--baseSize);
    width: 100%;
    text-align: center;
    top: 0;
}

.planetData {
    width: calc(var(--baseSize) * 9);
    box-sizing: border-box;
    padding-left: calc(var(--baseSize) * 0.4);
}

.planetInfoPart.planetLife {
    max-height: calc(var(--copyBaseSize) * 3);
    grid-template-columns: auto auto;
    width: calc(var(--baseSize) * 9);
    box-sizing: border-box;
    padding-left: calc(var(--baseSize) * 0.4);
}

.asteroid {
    width: var(--size);
    height: var(--size);
    background-image: var(--img);
    background-size: cover;    
    transform: rotate(var(--rotation));
    filter: brightness(var(--brightness)) saturate(var(--saturation));
    z-index:1;
}

.detailLabel {
    display: inline-block;
    width: calc(var(--baseSize) * 2.5);
    vertical-align: top;
    min-height: calc(var(--baseSize) * 0.5);
}

.detailValue {
    display: inline-block;
    width: calc(var(--baseSize) * 6);
    vertical-align: top;
    min-height: calc(var(--baseSize) * 0.5);
}

.planetSpecies {
    margin-top: calc(var(--baseSize) * 1.5);
    margin-left: calc(var(--baseSize) * 2);
    width: calc(var(--baseSize) * 5);
    height: calc(var(--baseSize) * 4);
}

.alienImage img {
    width: calc(var(--baseSize) * 5);
    height: calc(var(--baseSize) * 5);
}

.alienImage {
    position: relative;
    width: calc(var(--baseSize) * 5);
    height: calc(var(--baseSize) * 5);
    box-sizing: border-box;
    border: solid calc(var(--baseSize) * 0.05) #91e81e;
    border-radius: calc(var(--baseSize) * 0.2);
    box-shadow: 0px 0px calc(var(--baseSize) * 0.1) #91e81e;
    overflow: hidden;
}

.alienName, .alienPlanet, .alienImage {
    text-align: center;
}

.alienImage:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    width: calc(var(--baseSize) * 5);
    height: calc(var(--baseSize) * 5);
}

.alienImage:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

img.tvOn {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
}

img.tvOff {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}

@keyframes flicker {
  0% { opacity: 0.69002;}
  5% { opacity: 0.73962;}
  10% { opacity: 0.38433;}
  15% { opacity: 0.22994;}
  20% { opacity: 0.95621;}
  25% {opacity: 0.58809;}
  30% {opacity: 0.56343;}
  35% {opacity: 0.45967;}
  40% {opacity: 0.22494;}
  45% {opacity: 0.51345;}
  50% {opacity: 0.83969;}
  55% {opacity: 0.67555;}
  60% {opacity: 0.25034;}
  65% {opacity: 0.86229;}
  70% {opacity: 0.77318;}
  75% {opacity: 0.11121;}
  80% {opacity: 0.97015;}
  85% {opacity: 0.39418;}
  90% {opacity: 0.42313;}
  95% {opacity: 0.36456;}
  100% {opacity: 0.76023;}
}


@keyframes turn-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(0) brightness(0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  50% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}

@keyframes turn-off {
  0% {
    transform: scale(1, 1.3) translate3d(0, 0, 0);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    -webkit-filter: brightness(10);
    filter: brightness(10);
  }
  99.99% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: scale(0, 0.0001) translate3d(0, 0, 0);
    -webkit-filter: brightness(50);
    filter: brightness(50);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.planetSpecies >.alienImage {
    cursor: pointer;
}

.planetSpecies > .alienImage:hover {
    border: solid calc(var(--baseSize) * 0.05) #fff;
}

.alienModal {
    position: absolute;
    width: calc(var(--baseSize) * 10);
    border: solid calc(var(--baseSize) * 0.05) #91e81e;
    border-radius: calc(var(--baseSize) * 0.2);
    left: calc(var(--baseSize) * 0.5);
    top: calc(var(--baseSize) * 0.25);
    background: #000;
    box-shadow: 0px 0px calc(var(--baseSize) * 0.2) #91e81e;
    padding: calc(var(--baseSize) * 0.25);
}


.alienModal .alienImage {
    margin-left: calc(var(--baseSize) * 2.5);
    margin-bottom: calc(var(--baseSize) * 0.5);
}

.alienTitle {
    font-family: 'Audiowide', cursive;
    color: #91e81e;
    font-size: calc(var(--baseSize) * 0.75);
    width: 100%;
    text-align: center;
}

.planetSurfaceModal {
    position: absolute;
    border: solid calc(var(--baseSize) * 0.05) #91e81e;
    border-radius: calc(var(--baseSize) * 0.2);
    right: calc(var(--baseSize) * 0.5);
    bottom: calc(var(--baseSize) * 0.25);
    background: #000;
    box-shadow: 0px 0px calc(var(--baseSize) * 0.2) #91e81e;
    padding: calc(var(--baseSize) * 0.25);
}

.planetSurfaceImgWrapper {
    position: relative;
    border: solid calc(var(--baseSize) * 0.05) #91e81e;
    border-radius: calc(var(--baseSize) * 0.1);
    background: #91e81e;
    overflow: hidden;
    margin-top: calc(var(--baseSize) * 1.5);
}

.planetSurfaceImg {
    filter: hue-rotate(var(--hue)) saturate(var(--saturation)) invert(var(--invert));
}

.planetSurfaceGrid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
}

.planetSurfaceSquare {
    box-sizing: border-box;
    border-left: solid 1px #91e81e;
    border-top: solid 1px #91e81e;
}

.planetSurfaceSquare:hover {
    background-color: rgb(145 232 30 / 50%);
}

.planetSurfaceSquare.surfaceResource {
    text-align: center;
    backdrop-filter: sepia(1);
    cursor: default;
    text-shadow: 1px 1px #000, -1px -1px #fff;
    font-size: calc(var(--baseSize) * 0.4);
}

#searchBox {
    position: absolute;
    top: calc(var(--baseSize) * 0.5);
    left: calc(var(--baseSize) * 0.1);
    color: #91e81e;
    box-sizing: border-box;
    border: solid calc(var(--baseSize) * 0.05) #91e81e;
    box-shadow: 0px 0px calc(var(--baseSize) * 0.1) #91e81e;
    border-radius: calc(var(--baseSize) * 0.1);
    padding: calc(var(--baseSize) * 0.1);
    background-color: #000;
}

input#search {
    border: none;
    border-radius: calc(var(--baseSize) * 0.05);
    outline: none;
    font-family: 'Syne Mono', monospace;
}

#other {    
    position: absolute;    
    top: calc(var(--baseSize) * 0.1);
    left: calc(var(--baseSize) * 0.1);
    font-family: 'Syne Mono', monospace
    font-size: calc(var(--baseSize) * 0.4);
}

#other a {
    color: #91e81e;
}

#playerName {
    position: absolute;
    color: #91e81e;
    top: calc(var(--baseSize) * 0.1);
    right: calc(var(--baseSize) * 0.1);
    font-family: 'Audiowide', cursive;
    font-size: calc(var(--baseSize) * 0.4);
}