:root {
    --bg: #000000;
    --fg: #ffffff;
    --primary: yellow;
    --primary-light: #d1d100;
    --secondary: blue;
    --border-color: rgb(85, 85, 85);

    --shadow-color: var(--fg);
    --shadow-elevation-low:
      0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
      0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
      1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
    --shadow-elevation-medium:
      0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
      0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
      2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
      5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
    --shadow-elevation-high:
      0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
      1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
      2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
      4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
      7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
      11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
      17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
      25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

@font-face {
    font-family: RecursiveSans;
    src: url(3e30ceb974d55fbb.otf) format("opentype");
}

*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
    font-family: 'Recursive', monospace;
    background: linear-gradient(to bottom,  #000000 0%,#333333 100%);
    /* height: 100vh; */
}

p {
    font-size: 0.8rem;
}

.webgl
{
    top: 0;
    left: 0;
    outline: none;
}

.ratio-off {
    position: fixed;
}

.point {
    position: absolute;
    top: 50%;
    left: 50%;
}

.point:hover .text {
    opacity: 1;
}

.point.visible .label {
    transform: scale(1, 1)
}

h1 {
    font-size: 36px;
}

.point .label {
    position: absolute;
    top: -20px;
    left: -100px;
    width: 60px;
    height: 40px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 40px;
    font-weight: 100;
    font-size: 14px;
    /* cursor: help; */
    transform: scale(0, 0);
    transition: transform 0.3s;
}

.point .text {
    opacity: 0;
    position: absolute;
    top: 30px;
    left: -100px;
    width: 80px;
    border-radius: 4px;
    background: var(--fg);
    color: var(--bg);
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 40px;
    font-weight: 100;
    font-size: 14px;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.entity-labels-side {
    color: var(--fg);
    /* font-size: 1.2rem; */
    position: absolute;
    top: 50%;
    left: 75%;
    width: 500px;
    display: none;
    z-index: 1;
}

.label-padding {
    padding-left:15px;
}

.hundred-u-label {
    display: flex;
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
    top: -320px;
    left: 100px;
    position: absolute;
}

.ten-u-label {
    display: flex;
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
    top: -100px;
    position: absolute;
    /* transform: translateY(5vh) translateX(-2vw); */
}

.one-u-label {
    display: flex;
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
    /* top: 120px;
    left: -200px; */
    /* position: absolute; */
    transform: translateY(14vh) translateX(-7vw);
}

.zero-point-one-u-label {
    display: flex;
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
    /* top: 220px;
    left: -320px;
    position: absolute; */
    transform: translateY(20vh) translateX(-20vw);
}

.zero-point-zero-one-u-label {
    display: flex;
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
    /* left: -360px;
    top: 250px;
    position: absolute; */
    transform: translateY(22vh) translateX(-24vw);
}

.rotate-caret {
    transform: rotate(45deg) translateY(-15px);;
}

.arrow-keys {
    position: absolute;
    /* top: 42%;
    left: 84%;
    transform: translateX(-50%); */
}

.arrow {
    /* color: var(--fg);
    height: 40px;
    width: 80px;
    border: 1px solid var(--fg);
    border-radius: 5px;
    position: absolute;
    cursor: pointer;
    background-color: var(--bg) 1px solid;
    box-shadow: var(--shadow-elevation-medium);
    transition: all 0.2s; */
}

.arrow:hover {
    /* background-color: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
    /* animation: glow 0.5s ease-in-out infinite alternate; */
    /* box-shadow: var(--shadow-elevation-high); */
}

.arrow:active {
    /* box-shadow: var(--shadow-elevation-low);
    background-color: #b91b4d; */
}

.spacebar {
    /* color: var(--fg);
    height: 40px;
    width: 80px;
    border: 1px solid var(--fg);
    border-radius: 5px;
    position: absolute;
    cursor: pointer;
    font-size: 1.4rem;
    z-index: 101;
    background-color: var(--bg) 1px solid;
    box-shadow: var(--shadow-elevation-medium);
    transition: all 0.2s;
    transform: translateY(90px); */
}

/* .ratio-button {
    color: var(--fg);
    height: 40px;
    width: 80px;
    border: 1px solid var(--fg);
    border-radius: 5px;
    position: absolute;
    transform: translateY(120px) translateX(120px);
    cursor: pointer;
    font-size: 1.4rem;
    z-index: 101;
    background-color: var(--bg) 1px solid;
    box-shadow: var(--shadow-elevation-medium);
    transition: all 0.2s;
} */

/* .spacebar:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
    box-shadow: var(--shadow-elevation-high);
}

.ratio-button:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
    box-shadow: var(--shadow-elevation-high);
}

.spacebar:active {
    box-shadow: var(--shadow-elevation-low);
    background-color: #b91b4d;
}
.ratio-button:active {
    box-shadow: var(--shadow-elevation-low);
    background-color: #b91b4d;
} */

/* .up-arrow:hover ~ .scale-up-label {
    display: block;
}

.down-arrow:hover ~ .scale-down-label {
    display: block;
}

.spacebar:hover ~ .shift-camera-label {
    display: block;
}

.ratio-button:hover ~ .button-ratio-label {
    display: block;
} */

/* .scale-up-label {
    text-align: right;
    width: 134px;
    display: none;
    position: absolute;
    transform: translateX(-40px) translateY(-30px);
    color: var(--primary);
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
}

.scale-down-label {
    text-align: right;
    width: 134px;
    display: none;
    position: absolute;
    transform: translateX(-44px) translateY(210px);
    color: var(--primary);
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
}

.shift-camera-label {
    text-align: right;
    width: 134px;
    display: none;
    position: absolute;
    transform: translateX(-50px) translateY(90px);
    color: var(--primary);
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
}

.button-ratio-label {
    text-align: right;
    width: 134px;
    display: none;
    position: absolute;
    transform: translateX(70px) translateY(90px);
    color: var(--primary);
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg);
} */

/* .down-arrow {
    transform: translateY(180px);
}

.left-arrow {
    transform: rotate(-0.25turn) translateY(-42px) translateX(-42px);
}

.right-arrow {
    transform: rotate(90deg) translateY(-42px) translateX(42px);
} */

.control-panel {
    color: var(--fg);
    position: relative;
    display: block;
    margin-left: 42vw;
    margin-top: 18vh;
    /* top: 25vh;
    left: 90vw; */
    /* text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg), 0 0 22px var(--bg), 0 0 30px var(--bg); */
}

.current-height-scientific-notation {
    font-size: 6vw;
    line-height: 7vw;
    text-align: left;
    font-family: 'RecursiveSans';
    /* font-variation-settings: "mono" 1, "wght" 400; */
}
.current-height-standard-notation {
    font-size: 6vw;
    line-height: 5vw;
    text-align: left;
    font-weight: 300;
}

.special-color {
    color: var(--primary);
    /* text-shadow: 0 0 10px var(--bg), 0 0 20px var(--bg), 0 0 30px var(--primary), 0 0 40px var(--primary), 0 0 50px var(--primary), 0 0 60px var(--primary), 0 0 70px var(--primary); */
    /* animation: glow 1s ease-in-out infinite alternate; */
}

.glow {
    animation: glow-box 0.8s ease-in-out alternate infinite;
    /* animation-iteration-count: 4; */
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px var(--bg), 0 0 20px var(--bg), 0 0 30px var(--primary), 0 0 40px var(--primary), 0 0 50px var(--primary), 0 0 60px var(--primary), 0 0 70px var(--primary);
  }
  to {
    text-shadow: 0 0 20px var(--primary-light), 0 0 30px var(--primary-light), 0 0 40px var(--primary-light) 0 0 50px var(--primary-light), 0 0 60px var(--primary-light), 0 0 70px var(--primary-light), 0 0 80px var(--primary-light);
  }
}

@-webkit-keyframes glow-box {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.8;
    }
  }

.ruler-measurements {
    color: var(--fg);
    position: absolute;
    top: 38%;
    left: 6.2%;
    width: 5vw;
    text-align: right;
}
.mid {
    margin-top: 139px;
}
.bot {
    margin-top: 139px;
}

.gridding {
    position: absolute;
    width: 320px;
    top: 300px;
    left: 172px;
}

.entity-name-container {
    height: 120px;
    color: var(--fg);
    text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 6px var(--bg), 0 0 8px var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg), 0 0 18px var(--bg);
    padding-left: 100px;
    margin-bottom: 2rem;
    line-height: 1.4;
    position: relative;
}

.entity-name {
    font-weight: 300;
    font-size: 4rem;
    margin-left: -4px;
}

.entity-information {
    width: 30vw;
    font-weight: 100;
    /* display: none; */
}

.exponent {
    transition: all 0.3s ease-in-out;
}

.scale-button:hover .exponent {
    color: var(--primary);
}

.hide {
    display: none;
}

.dark-theme {
    filter: invert(100%) sepia(20%) saturate(2204%) hue-rotate(309deg) brightness(124%) contrast(110%);
    color: white;
    text-shadow: none;
}

.one {
    background-color: var(--fg);
}

.two {
    background-color: rgba(18, 73, 81, 0.66);
}
.three {
    background-color: rgba(18, 73, 81, 0.33);
}

.block {
    background-color: rgba(18, 73, 81, 0.33);
    border-right: var(--fg) solid 1px;
    border-left: var(--fg) solid 1px;
}

.center {
    background-color: var(--primary);
}

.special {
    color: var(--primary);
}

.current-height-standard-notation-number {
    /* cursor: help; */
}

.standard-notation {
    /* cursor: help; */
    transition: all 0.3s ease-in-out;
}

.panel-text {
    font-size: 1vw;
    padding-left: 0.4vw;
    /* opacity: 50%; */
    /* font-family: monospace; */
}

.label-mode {
    display: none;
    position: fixed;
    height: 100%;
    width: 25%;
    left: 50px;
}

.square-1 {
    background-color: var(--fg);
    opacity: 40%;
    height: 0px;
    width: 50px;
    margin: 0 auto;
}

.square-2 {
    background-color: var(--fg);
    opacity: 80%;
    height: 100px;
    width: 50px;
    margin: 0 auto;
}

.square-3 {
    background-color: var(--primary);
    height: 10px;
    width: 50px;
    margin: 0 auto;
}

.square-4 {
    background-color: var(--fg);
    opacity: 80%;
    height: 1px;
    width: 50px;
    margin: 0 auto;
}

.square-5 {
    background-color: var(--fg);
    opacity: 40%;
    height: 0.1px;
    width: 50px;
    margin: 0 auto;
}

#ratio-overlay img {
    width: 70%;
    height: 70%;
    z-index: 1;
    position: absolute;
}

#ratio-overlay {
    display: none;
}

#second-overlay img {
    top: 100px;
    width: 70%;
    height: 70%;
    z-index: 1;
    position: absolute;
}

#second-overlay {
    display: none;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    /* width: 50%; */
    width: 100%;
    top: 0;
    margin: 0 auto;
    /* border-radius: 20px; */
    overflow: auto; /* Enable scroll if needed */
    background: rgba(56, 56, 56, 0.3);
    backdrop-filter: saturate(180%) blur(10px);
}

/* Modal Content/Box */
.modal-content {
    background-color: rgba(56, 56, 56, 0.3);
    margin: 15% auto; /* 15% from the top and centered */
    padding: 100px;
    border-radius: 15px;
    box-shadow: var(--shadow-elevation-medium);
    width: 60%; /* Could be more or less, depending on screen size */
    color: var(--fg);
}

.no-bg {
    background-color: rgba(0,0,0,0);
    box-shadow: none;
}

.no-bg img {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.no-bg .loader {
    margin-top: -200px;
}

/* The Close Button */
.close {
    color: var(--fg);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: var(--fg);
    text-decoration: none;
    /* cursor: pointer; */
}

/* .down-arrow {
    transform: translateY(240px);
}

.spacebar{
    transform: translateY(120px);
} */

.overview-panel {
    background-color: rgba(0,0,0,0.6);
    position: fixed; 
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
}

.overview {
    /* filter: invert(15%) sepia(20%) saturate(3112%) hue-rotate(151deg) brightness(95%) contrast(91%) */
        /* drop-shadow(0 0 2px var(--bg)) drop-shadow(0 0 4px var(--bg)) drop-shadow(0 0 6px var(--bg)); */
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: flex-end;
}

.overview-icon {
    width: 25px;
    filter: invert(100%);
}

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

.comparison-label {
    color: white;
    font-size: 1rem;
    filter: drop-shadow(2px 2px var(--bg));
}

.comparison-icon {
    filter: invert(100%) drop-shadow(2px 2px var(--bg));
}

.icon-10x {
    width: 100px;
}

.icon-100x {
    width: 10px;
}

.special .overview-icon {
    filter: invert(96%) sepia(100%) saturate(2884%) hue-rotate(357deg) brightness(107%) contrast(103%);
}

.special {
    color: var(--primary);
    font-weight: 500;
}

.tooltip {
    display: none;
    color: var(--fg);
    margin-left: -100px;
    margin-right: -100px;
    margin-bottom: 10px;
}

.special .tooltip {
    color: var(--primary);
}

.overview-step {
    align-self: flex-end;
    cursor: pointer;
    /* min-width: 24px; */
    color: var(--fg);
    font-size: 0.6rem;
    text-align: center;
    /* padding: 5px; */
    font-weight: 100;
    transition: all .2s ease-in-out; 
}

.half {
    min-width: 22px;
}

.overview-step:hover { 
    cursor: pointer;
    font-size: 1rem;
}

.overview-step:hover .tooltip {
    font-size: 1rem;
}

.overview-step:hover .tooltip {
    display: block;
}

.overview-groups {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: flex-end;
    color: var(--fg);
}

.overview-group-step {
    text-align: center;
    font-size: 0.8rem;
    min-width: 116px;
    /* border-top: var(--fg) 1px solid; */
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all .2s ease-in-out; 
    font-weight: 100;
    border-right: 1px solid var(--border-color);
    padding-left: 10px;
    padding-right: 10px;
}

.icon-group {
    display: flex;
    justify-content: space-around;
    border-right: 0;
}

.overview-group-step:last-child {
    border-right: none;
}

.overview-group-step-special {
    border-top: var(--primary) 1px solid;
    color: var(--bg);
    background-color: var(--primary);
    font-weight: 500;
}

.cursor-out {
    position: absolute;
    margin: 0 0;
    width: 0px;
    height: 0px;
    /* border: 0px solid var(--fg); */
    /* background-color: rgba( 255, 255, 255, 0.5); */
    background-color: var(--secondary);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--fg);
    font-size: 0;
    z-index: 10;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, margin 0.2s ease-in-out,
    color 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.cursor-in {
    position: absolute;
    margin: 0 0;
    width: 0px;
    height: 0px;
    /* border: 0px solid var(--fg); */
    /* background-color: rgba( 255, 255, 255, 0.5); */
    background-color: var(--secondary);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--fg);
    font-size: 0;
    z-index: 10;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, margin 0.2s ease-in-out,
    color 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.unit-tooltip {
    position: absolute;
    margin: 0 0;
    width: 0px;
    height: 0px;
    /* border: 0px solid var(--fg); */
    /* background-color: rgba( 255, 255, 255, 0.5); */
    background-color: var(--secondary);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--fg);
    font-size: 0;
    z-index: 10;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, margin 0.2s ease-in-out,
    color 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.cursor-big {
    text-align: center;
    z-index: 11;
    font-size: 1rem;
    width: 150px;
    height: 50px;
    padding: 10px 20px;
    border-color: var(--primary);
}
.cursor-big-unit {
    text-align: center;
    z-index: 11;
    font-size: 1rem;
    width: 200px;
    height: 50px;
    padding: 20px 30px;
    border-color: var(--primary);
}

.hide {
    visibility: hidden;
}

.body {
    height: 100vh;
    z-index: 300;
    /* cursor: none; */
}

.disable {
    color: grey;
    opacity: 50%;
    box-shadow: 0;
    cursor: not-allowed !important;
}

.unit {
    border: 1px solid;
    position: absolute;
    z-index: 300;
    cursor: help;
    font-size: 0.8rem;
    opacity: 0.3;
    font-weight: 100;
    transition: all 0.3s ease-in-out;
    height: 1.2vw;
    width: 1.2vw;
    line-height: 1.2vw;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */
    text-align: center;

    margin-top: 2vw;
    margin-left: 1vw;
}

.unit:hover {
    opacity: 1;
}

.up-arrow {
    top:0;
    right: 0;
    height: 40vh;
    width: 40vw;
    position: absolute;
    opacity: 0;
    border: 0;
    background: radial-gradient(var(--primary), rgba(0,0,0,0), rgba(0,0,0,0));
    z-index: 300;
    cursor: zoom-out;
    border-radius: 100px;
}

.down-arrow {
    top: 68vh;
    left: 16vw;
    height: 10vw;
    width: 10vw;
    position: absolute;
    opacity: 0;
    border: 0;
    background: radial-gradient(var(--primary), rgba(0,0,0,0), rgba(0,0,0,0));
    z-index: 300;
    cursor: zoom-in;
    border-radius: 100px;
}

.cursor-text {
    display: none;
}

.mode-switcher {
    display: flex;
    gap: 0;
    color: var(--fg);
    padding-left: 96px;
    padding-top: 50px;
    position: relative;
}

.mode-switcher .container {
    background: rgba(56, 56, 56, 0.4);
    backdrop-filter: saturate(180%) blur(10px);
    border-radius: 5px;
    box-shadow: var(--shadow-elevation-low);
    display: flex;
    /* border: 1px solid var(--fg); */
}

.mode-switcher .tab {
    font-size: 0.8rem;
    font-weight: 100;
    background-color: rgba(0,0,0,0);
    color: var(--fg);
    opacity: 0.6;
    border: 0;
    border-right: 1px solid var(--border-color);
    padding: 8px 15px;
    margin: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.mode-switcher .tab:first-child {
    border-radius: 5px 0px 0px 5px;
}

.mode-switcher .tab:last-child {
    border-radius: 0px 5px 5px 0px;
    border-right: 0px solid var(--fg);
}

.mode-switcher .tab:hover {
    background-color: var(--secondary);
}

.active {
    opacity: 1 !important;
    background-color: rgba(39, 39, 39, 0.6) !important;
    background-color: var(--secondary) !important;
    /* font-weight: bold !important; */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.center-it {
    right: 0;
    left: 0;
    margin: 0 auto;
}

/** Switch
 -------------------------------------*/

 .switch input {
    position: absolute;
    opacity: 0;
  }
  
  /**
   * 1. Adjust this to size
   */
  
  .switch {
    display: inline-block;
    font-size: 20px; /* 1 */
    height: 1em;
    width: 2em;
    background: #272727;
    opacity: 0.8;
    border-radius: 1em;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
  }
  
  .switch div {
    height: 1em;
    width: 1em;
    border-radius: 1em;
    background: #FFF;
    box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
    -webkit-transition: all 300ms;
       -moz-transition: all 300ms;
            transition: all 300ms;
  }
  
  .switch input:checked + div {
    -webkit-transform: translate3d(100%, 0, 0);
       -moz-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  .hidden {
    visibility: hidden;
  }

  .wrong-window-size-modal {
    display: block; /* Hidden by default */
    position: absolute; /* Stay in place */
    /* width: 50%; */
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0 auto;
    /* border-radius: 20px; */
    overflow: auto; /* Enable scroll if needed */
    background: rgba(56, 56, 56, 0.8);
    backdrop-filter: saturate(180%) blur(10px);
}

.scaling-loader {
    width: 200px;
    margin-bottom: -50px;
    margin-right: -50px;
    z-index: 10;
    right: 0;
    bottom: 0;
    position: fixed;
}

@media screen and (min-width: 900px) {
    .wrong-window-size-modal {
        display: none;
    }
}

@media screen and (min-width: 1441px) {
    .control-panel {
        margin-top: 23vh;
    }
}

@media screen and (min-height: 850px) {
    .control-panel {
        margin-top: 23vh;
    }

    .down-arrow {
        left: 12vw;
    }
}

.turned-off {
    display: none;
}

/*# sourceMappingURL=main.css.map*/