:root {
   --scale: calc((2vw + 2vh) / 2);
   --cursor: pointer;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   touch-action: none;
   user-select: none;
   font-weight: bold;
   font-family: cursive;
}
body {
   position: relative;
   width: 100vw;
   min-height: 100vh;
   display: grid;
   place-items: center;
   overflow: hidden;
   background: #2a2a3a;
}
canvas {
   background: #008f0e;
   box-shadow: 0 0 calc(var(--scale) / 2) #000000;
}
main {
   position: fixed;
   left: calc(var(--scale));
   top: calc(var(--scale));
   width: calc(var(--scale) * 3.4); 
   height: calc(var(--scale) * 3.2);
   z-index: 10;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(6px);
   border: solid calc(var(--scale) / 6) rgba(0, 0, 0, 0.5);
   border-radius: calc(var(--scale) / 2);
   overflow: hidden;
   transition: width linear 0.3s, height linear 0.3s;
   padding: 0;
}
main.active {
   position: fixed;
   width: calc(var(--scale) * 30);
   height: calc(var(--scale) * 20);
   padding: calc(var(--scale) / 2);
   padding-bottom: calc(var(--scale));
}
main #menu-icon {
   position: absolute;
   width: calc(var(--scale) * 3); 
   height: calc(var(--scale) * 3);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: var(--cursor);
   z-index: 1;
}
main #menu-icon span {
   position: absolute;
   width: calc(var(--scale) * 2.5);
   height: calc(var(--scale) / 3);
   border-radius: calc(var(--scale) / 1.5);
   background: #457dff;
   transition: ease-in-out 0.3s;
   transform: scale(1);
}
main #menu-icon span:first-child {
   transform: translateY(calc(var(--scale) / 1.5));
}
main #menu-icon span:last-child {
   transform: translateY(calc(var(--scale) / -1.5));
}


main.active #menu-icon span {
   width: calc(var(--scale) * 2.5);
   height: calc(var(--scale) / 3);
}
main.active #menu-icon span:first-child {
   transform: translateY(0) rotate(-225deg);
}
main.active #menu-icon span:nth-child(2) {
   transform: scale(0);
}
main.active #menu-icon span:last-child {
   transform: translateY(0) rotate(225deg);
}


main #options {
   position: relative;
   width: 100%;
   height: 100%;
   display: grid;
   transform: scale(0);
   opacity: 0;
   grid-template-rows: 2fr 5fr 8fr 4fr;
   transition: linear 0.3s;
}
main.active #options {
   transform: scale(1);
   opacity: 1;
}

#options .title {
   position: relative;
   font-size: calc(var(--scale) * 1.5);
   text-align: center;
   color: #ffffff;
}

#options .selection {
   position: relative;
   display: grid;
   padding: calc(var(--scale) * 1.5);
   padding-bottom: 0;
   grid-template-columns: 10fr 8fr;
   place-items: center;
}
#options .selection select {
   position: relative;
   border-radius: calc(var(--scale) / 2);
   outline: none;
   border: none;
   font-size: calc(var(--scale) * 1.2);
   transition: linear 0.2s;
   text-align: center;
   width: 80%;
   cursor: var(--cursor);
   padding: calc(var(--scale) / 8);
}

#options .selection .checkbox {
   position: relative;
   display: flex;
   gap: calc(var(--scale));
}
#options .selection .checkbox label {
   position: relative;
   color: #ffffff;
   font-size: calc(var(--scale) * 1.2);
   display: grid;
   place-items: center;
}
#options .selection .checkbox input {
   position: relative;
   width: calc(var(--scale) * 1.5);
   height: calc(var(--scale) * 1.5);
   cursor: var(--cursor);
}


#options .speed-size {
   position: relative;
   display: grid;
   padding: calc(var(--scale));
}
.row {
   position: relative;
   display: grid;
   grid-template-columns: 4fr 10fr 3fr;
   justify-content: space-around;
   color: #ffffff;
}
.row input {
   cursor: var(--cursor);
}
.row label {
   font-weight: 700;
   display: flex;
   justify-content: start;
   font-size: calc(var(--scale) * 1.2);
   padding-left: calc(var(--scale));
   align-items: center;
}
.row span {
   color: #457dff;
   font-weight: 400;
   text-align: center;
   display: flex;
   font-size: calc(var(--scale) * 1.2);
   justify-content: center;
   align-items: center;
}
.row span p{
   font-weight: 400;
   font-size: calc(var(--scale) * 1.2);
   color: #ffffff;
}

#options .buttons {
   position: relative;
   display: flex;
   justify-content: center;
   gap: calc(var(--scale) * 2);
   align-items: center;
}
#options .buttons input {
   position: relative;
   font-size: calc(var(--scale) * 1.2);
   width: calc(var(--scale) * 7);
   padding: calc(var(--scale) / 4) 0;
   border-radius: calc(var(--scale) / 2);
   border: none;
   border-bottom: solid calc(var(--scale) / 4) #5a5a5a;
   outline: none;
   cursor: var(--cursor);
}

#copyright {
   position: absolute;
   font-size: calc(var(--scale) * 1.5);
   right: calc(var(--scale));
   bottom: calc(var(--scale));
}
#copyright > *, #copyright{
   font-family: sans-serif;
   font-weight: 900;
   color: #000000;
}


.color {
   color: #0000d0;
}