/* CSS HEX */

* {
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
}

body {
   overflow: hidden; 
   width: 100vw; 
   height: 100vh; 
   display: flex; 
   flex-direction: column;
   align-items: center; 
   justify-content: space-evenly;
}

#grid {
   position: relative;
   width: 90vw;
   height: 80vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   border: black 5px solid;
   border-radius:20px ;
   -webkit-border-radius:20px ;
   -moz-border-radius:20px ;
   -ms-border-radius:20px ;
   -o-border-radius:20px ;
}

#gridLimit {
   pointer-events: none;
   z-index: 100;
   position: absolute;
   width: 100%;
   height: 100%;
   box-shadow: inset 0px 0px 10px white, 
   inset 0px 0px 15px white,
   inset 0px 0px 20px white,
   inset 0px 0px 30px white;
}

footer {
   width: 100vw;
   height: 10vh;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
}

#colorSelect {
   padding: 0px 2vw;
   gap: 10px;
   width: fit-content;
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
}

.colorPick  {
   width: 50px;
   height: 50px;
   border: 5px black solid;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
   transition: transform 0.2s ease;
   -webkit-transition: transform 0.2s ease;
   -moz-transition: transform 0.2s ease;
   -ms-transition: transform 0.2s ease;
   -o-transition: transform 0.2s ease;
}

.colorPick:hover {
   transform: translate(0px,-10px);
   -webkit-transform: translate(0px,-10px);
   -moz-transform: translate(0px,-10px);
   -ms-transform: translate(0px,-10px);
   -o-transform: translate(0px,-10px);
}

#purple {
   background-color: #7200FF;
}
#red {
   background-color: #FF4800;
}
#green {
   background-color: #00FF8C;
}

#yellow {
   background-color: #ffbf00ff;
}

#pink {
   background-color: #c98ca7ff;
}

#blue {
   background-color: #5ba4dd;
}

#brown {
   background-color: #472C1B;
}

#darkGreen {
   background-color: #293F14;
}

#dark {
   background-color: #000000;
}

#pixelSelect {
   display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;
   height: 100%;
   padding: 15px;
   border: black 5px solid;
   border-radius:20px ;
   -webkit-border-radius:20px ;
   -moz-border-radius:20px ;
   -ms-border-radius:20px ;
   -o-border-radius:20px ;
}

#validate {
   color: white;
   font-weight: bolder;
   margin: 5px;
   text-align: center;
   padding: 10px 5px;
   background-color: grey;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
   transition: all 0.2s ease;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
}

#validate:hover {
   transform: scale(1.1);
   -webkit-transform: scale(1.05);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
   box-shadow: 3px 3px 3px #0000006a;
}

#timer {
   display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;
   height: 100%;
   padding: 10px;
   border: black 5px solid;
   border-radius:20px ;
   -webkit-border-radius:20px ;
   -moz-border-radius:20px ;
   -ms-border-radius:20px ;
   -o-border-radius:20px ;
}

#time {
   padding: 5px;
   font-size: 20px;
   font-size: bolder;
   text-align: center;
   width: 100%;
}

.select {
   transform: scale(1.1) translate(0px,-10px);
   -webkit-transform: scale(1.1) translate(0px,-10px);
   -moz-transform: scale(1.1) translate(0px,-10px);
   -ms-transform: scale(1.1) translate(0px,-10px);
   -o-transform: scale(1.1) translate(0px,-10px);
}

#connect {
   box-shadow: 0px 0px 3px black;
   font-weight: bolder;
   font-size: 30px;
   color: white;
   padding: 15px 10px;
   background-color: grey;
   border: 5px black solid;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   transition: all 0.2s ease;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -ms-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
}

#connect:hover {
   color: #111;
   background-color: rgb(208, 208, 208);
   transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
}

#colorBars {
   width: 90vw;
   height: 20px;
   border: solid 3px black;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   display: flex;
   justify-content: space-between;
}

#redBar {
   width: 100%;
   height: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   transition: width 0.2s ease;
   -webkit-transition: width 0.2s ease;
   -moz-transition: width 0.2s ease;
   -ms-transition: width 0.2s ease;
   -o-transition: width 0.2s ease;
   background-color:#FF4800;
}

#purpleBar {
   width: 100%;
   height: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   transition: width 0.2s ease;
   -webkit-transition: width 0.2s ease;
   -moz-transition: width 0.2s ease;
   -ms-transition: width 0.2s ease;
   -o-transition: width 0.2s ease;
   background-color: #7200FF;
}


#greenBar {
   background-color:#00FF8C;
   width: 100%;
   height: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   transition: width 0.2s ease;
   -webkit-transition: width 0.2s ease;
   -moz-transition: width 0.2s ease;
   -ms-transition: width 0.2s ease;
   -o-transition: width 0.2s ease;
}



@media (max-width: 600px) {
   #grid {
      height: 50vh;
   }

   footer {
      height: 45vh;
      flex-wrap: wrap;
      padding-bottom: 10vh;
   }

   #pixelSelect, #timer {
      font-size: 15px;
      max-width: 40%;
      padding: 5px;
      height: fit-content;
      flex-direction: row;
   }
   #pixelSelect {
      text-align: center;
      flex-direction: column;
   }

   #colorSelect {
      width: 100%;
   }

   #connect {
      font-size: 15px;
   }

   #validate {
      font-size: 15px;
   }
 }