@import 'https://fonts.googleapis.com/css?family=Press+Start+2P';
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap";

:root {
    --bg-color1: #ffffff;
    --bg-color2: #abbaab;
    --color1: #121212;
    --color2: #121212;
}

body {
    font-family: 'Poppins', 'Courier New', Courier, monospace;
    text-align: center;
    background-color: var(--bg-color1);
    color: var(--color1);
}

hr {
    width: 500px;
}

.top-menu {
    display: flex;
    background-color: var(--bg-color2);
    color: var(--color2);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    margin-left: 20%;
    margin-right: 20%;
    gap: 10px;
}

.top-menu div {
    font-size: calc(10px + 1vw);
}

.range-slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 200px;
    height: 25px; /* Specified height */
    border-radius: 10px;
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out; 
  }

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    border-radius: 13px;
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}
  
  /* Mouse-over effects */
.range-slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

.pre-settings-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    backdrop-filter: blur(4px) brightness(0.9);
    border-radius: 20px;
    box-shadow: 0px 0px 20px 5px;
    padding: 10px 20px;
    z-index: 100;
}

#restart-popup {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: transparent;
    backdrop-filter: blur(4px) brightness(0.8);
}

.close-cont-button {
    pointer-events: all;
    font-size: 18px;
    background: transparent;
    border: 0px solid black;
    border-radius: 5px;
    padding: 0px;
    margin: 1px;
    transition: all ease 100ms;
}
.close-cont-button:hover {
    filter: contrast(0.3);
    transform: translateY(-1px);
}


/* The Switch Button */
.checkbox-wrapper-12 {
position: relative;
}
.checkbox-wrapper-12 > svg {
position: absolute;
top: -130%;
left: -170%;
width: 110px;
pointer-events: none;
}
.checkbox-wrapper-12 * {
box-sizing: border-box;
}
.checkbox-wrapper-12 input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
margin: 0;
}
.checkbox-wrapper-12 input[type="checkbox"]:focus {
outline: 0;
}
.checkbox-wrapper-12 .cbx {
width: 24px;
height: 24px;
top: calc(50vh - 12px);
left: calc(50vw - 12px);
}
.checkbox-wrapper-12 .cbx input {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 2px solid #bfbfc0;
border-radius: 50%;
}
.checkbox-wrapper-12 .cbx label {
width: 24px;
height: 24px;
background: none;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
-webkit-filter: url("#goo-12");
filter: url("#goo-12");
transform: trasnlate3d(0, 0, 0);
pointer-events: none;
}
.checkbox-wrapper-12 .cbx svg {
position: absolute;
top: 5px;
left: 4px;
z-index: 1;
pointer-events: none;
}
.checkbox-wrapper-12 .cbx svg path {
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 19;
stroke-dashoffset: 19;
transition: stroke-dashoffset 0.3s ease;
transition-delay: 0.2s;
}
.checkbox-wrapper-12 .cbx input:checked + label {
animation: splash-12 0.6s ease forwards;
}
.checkbox-wrapper-12 .cbx input:checked + label + svg path {
stroke-dashoffset: 0;
}

@keyframes splash-12 {
40% {
    background: #2e8634;
    box-shadow: 0 -18px 0 -8px #2e8634, 16px -8px 0 -8px #2e8634, 16px 8px 0 -8px #2e8634, 0 18px 0 -8px #2e8634, -16px 8px 0 -8px #2e8634, -16px -8px 0 -8px #2e8634;
}
100% {
    background: #2e8634;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}


.dropdown-container {
    position: relative;
    overflow-wrap: anywhere;
    display: inline-block;
}
.description-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
}
.dropdown {
    display: none;
    position: absolute;
    background: #e6e6e6;
    z-index: 100;
    box-shadow: #898989 5px 5px 15px 0px;
    border-radius: 10px;
    padding: 10px;
    border: solid #454545 1px;
}
.dropdown-container.dropdown-active .dropdown {
    display: block;
}

.description-header i {
    transition: all 0.3s ease;
}

.dropdown-active .description-header i {
    transform: rotate(180deg);
}