html {
   --simon-table-size: 54vh;
   --simon-btncnt-size: calc((var(--simon-table-size)) - var(--gap) * 2);
   --simon-center-size: calc(var(--simon-table-size) / 2.6 - 3px);
   --gap: calc(var(--simon-table-size) / 36);
   --btn-size: calc((var(--simon-table-size) / 2) - var(--gap));

   --switch-border: 0.3vh;
   --switch-width: calc(3.9vh + var(--switch-border));
   --switch-height: 3vh;

   --slider-size: 2vh;
   --slider-margin: calc(var(--switch-border) / 2);
   --slider-translation: calc(var(--switch-width) / 2 - 1vh);
}

* {
   -webkit-tap-highlight-color: transparent;
}

body {
   margin: 0;
   background-color: #102626;
   font-family: 'Montserrat', sans-serif;
}

.video-container {
   height: 100vh;
   overflow: hidden;
}

video {
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.switch-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: absolute;
   top: 53%;
   left: 50%;
   transform: translateX(-50%);
}

.switch {
   position: relative;
   margin: 0 auto;
   display: inline-block;
   width: var(--switch-width);
   height: 3vh;
}

.interface-checkbox {
   width: 0;
   height: 0;
   opacity: 0;
}

.slider {
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   cursor: pointer;
   border: var(--switch-border) rgb(24, 56, 55) solid;
   background-color: rgba(180, 214, 212, 54%);
   transition: 0.4s;
   border-radius: 3vh;
   box-sizing: border-box;
}

.slider:before {
   position: absolute;
   content: '';
   height: var(--slider-size);
   width: var(--slider-size);
   left: calc(var(--slider-margin) * 2);
   bottom: var(--slider-margin);
   background-color: rgba(180, 214, 212, 81%);
   transition: 0.4s;
   border-radius: 9vh;
}

input:checked + .slider:before {
   left: calc(100% - var(--switch-border));
   transform: translateX(-100%);
}

.slider:active:before {
   width: calc(var(--slider-size) * 1.3);
}

h6 {
   margin: 0 auto;
   font-size: 0.6rem;
   color: rgb(180, 214, 212);
}

.simon {
   position: absolute;
   width: var(--simon-table-size);
   height: var(--simon-table-size);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background-color: #183837;
   overflow: hidden;
}

.btn-container {
   margin: var(--gap);
   cursor: pointer;
}

.grn-btn {
   background-color: #59c574;
}

.grn-btn.light {
   background-color: #c2ffcb;
}

.red-btn {
   background-color: #f6724e;
}

.red-btn.light {
   background-color: #ffc8c2;
}

.yel-btn {
   background-color: #feca64;
}

.yel-btn.light {
   background-color: #ffe6c2;
}

.blu-btn {
   background-color: #1e8dc9;
}

.blu-btn.light {
   background-color: #c2f4ff;
}

/* Classic */
.btn-container-c {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   transition: 300ms;
}

.btn-c {
   position: relative;
   width: calc(var(--btn-size) - var(--gap) / 2);
   height: calc(var(--btn-size) - var(--gap) / 2);
   transition: 150ms;
}

.grn-btn-c {
   border-top-left-radius: 100%;
}

.red-btn-c {
   left: var(--gap);
   border-top-right-radius: 100%;
}

.yel-btn-c {
   top: var(--gap);
   border-bottom-left-radius: 100%;
}

.blu-btn-c {
   top: var(--gap);
   left: var(--gap);
   border-bottom-right-radius: 100%;
}

/* /Classic */

/* Modern */
.btn-container-m {
   display: grid;
   overflow: hidden;
   border-radius: 50%;
   height: var(--simon-btncnt-size);
   width: var(--simon-btncnt-size);
   box-sizing: border-box;
   grid-template-areas:
      'grn-btn grn-btn red-btn'
      'yel-btn simon-center red-btn'
      'yel-btn blu-btn blu-btn';
   gap: var(--gap);
   transform: rotate(-30deg);
   transition: 150ms;
}

.grn-btn-m {
   grid-area: grn-btn;
   border-bottom-right-radius: 50%;
}

.red-btn-m {
   grid-area: red-btn;
   border-bottom-left-radius: 50%;
}

.yel-btn-m {
   grid-area: yel-btn;
   border-top-right-radius: 50%;
}

.blu-btn-m {
   grid-area: blu-btn;
   border-top-left-radius: 50%;
}
/* /Modern */

.simon-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: var(--simon-center-size);
   height: var(--simon-center-size);
   margin-left: -1px;
   background-color: #183837;
   grid-area: simon-center;
   border-radius: 50%;
   z-index: 2;
}

.simon-logo {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 18vh;
}

.modal {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(16, 38, 38, 42%);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 3s;
}

.start-button {
   width: 60vh;
   height: 6rem;
   background-color: #102626;
   color: rgba(180, 214, 212, 54%);
   font-family: 'Montserrat', sans-serif;
   border-radius: 1.5rem;
   border: 3px solid rgba(101, 136, 136, 15%);
   cursor: pointer;
   font-size: 1.8rem;
}

.start-button:hover {
   background-color: #183837;
}

.hide {
   display: none;
}

.try-again,
.win {
   width: 60vh;
   background-color: #102626;
   border: 3px solid rgba(101, 136, 136, 15%);
   border-radius: 1.5rem;
   color: rgba(180, 214, 212, 54%);
   text-align: center;
   font-family: 'Montserrat', sans-serif;
}

.play-again {
   cursor: pointer;
}

.play-again:hover {
   cursor: pointer;
   filter: brightness(132%);
}