@charset "utf-8";

/*
Styles for
Sudoku
*/


@media (prefers-color-scheme: dark) {
   body {
       background: #242323;
       color: white;
   }
   table.spuzzle td{
      background-color: rgb(177, 177, 177);
   }
}

@media (prefers-color-scheme: light) {
   body {
       background: #ffffff;
   }
   table.spuzzle td{
      background-color: rgb(255, 255, 255);
   }
}

/* Table Styles */


table.spuzzle {
   width: 90%;
   border-collapse: collapse;
   margin: 0px auto;
   font-size: 2vw;
}

table.spuzzle td {
   color: black;
   border: 0.2vw solid black;
   width: 33.3%;
}

/* Inner Table Styles */

table.subTable {
   border-collapse: collapse;
   width: 100%;
}

table.subTable td {
   box-shadow: inset 0px 0px 1vw rgba(0, 0, 0, 0.3);
   border: 0.1vw solid black;
   color: rgb(80, 80, 80);
   height: 33.3%;
   text-align: center;
   vertical-align: middle;

   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: background-color 0.1s;
}

table.subTable td:hover {
   background-color: #02b87520;
}

table.subTable td:active {
   background-color: #02b87540;
}

td.goldBox {
   padding: 0px;
}

td.greenBox {
   padding: 0px;
}

input {
   all: unset;
   width: 100%;
   text-align: center;
   -webkit-aspect-ratio: 1/1;
   -moz-aspect-ratio: 1/1;
   aspect-ratio: 1/1;
}

.Filled {
   color: black;
}

/* Top Bar Thing */

ul {
   font-family: Arial;
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #02b875;
   bottom: 0;
   height: 5vh;
   font-size: 1.8vh;
}

.active {
   padding: 1.5vh 1.7vh;
   display: block;
   color: white;
   text-align: center;
   text-decoration: none;
}

div a:hover:not(.Item) {
   background-color: #04AA6D;
}

/* General Styles */

body {
   margin: 0;
}

@media only screen and (max-width: 980px) {
   div#half {
      font-family: monospace, Arial, Helvetica, sans-serif;
      width: 100%;
      float: left;
   }

   div#half h1 {
      text-align: center;
      font-size: 2em;
      margin: 0.5vw 0vw 1vw 0vw;
      text-indent: 5%;
   }

   div#half p {
      text-align: center;
      font-size: 1em;
      margin: 0.5vw 0vw 1vw 0vw;
   }

   div#howToPlay {
      background-color: rgba(0, 2, 129, 0.05);
      text-align: center;
      width: 75%;
      margin: auto;
      margin-bottom: 1%;
      padding: 1%;
   }

   div#specialList p {
      margin: 0px;
      font-weight: bold;
   }

   table.subTable {
      font-size: 4vw;
   }
}

@media only screen and (min-width: 981px) {
   div#half {
      font-family: monospace, Arial, Helvetica, sans-serif;
      width: 50%;
      float: left;
   }

   div#half h1 {
      font-size: 2em;
      margin: 0.5vw 0vw 1vw 0vw;
      text-indent: 5%;
   }

   div#half p {
      font-size: 1em;
      margin: 0.5vw 0vw 1vw 0vw;
      text-indent: 5%;
   }

   div#howToPlay {
      background-color: rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 75%;
      margin: auto;
      padding: 1% 0% 2% 0%;
   }

   div#howToPlay p {
      text-indent: 0%;
   }

   div#specialList p {
      margin: 0px;
      font-weight: bold;
   }

}