:root
{
   --tollerance-gradient: 2%;
   --player-color: white;
}


body
{
   background: linear-gradient(
      135deg,
      hsl(0, 100%, 60%),
      hsl(30, 100%, 60%),
      hsl(60, 100%, 60%),
      hsl(90, 100%, 60%),
      hsl(120, 100%, 60%),
      hsl(150, 100%, 60%),
      hsl(180, 100%, 60%),
      hsl(210, 100%, 60%),
      hsl(240, 100%, 60%),
      hsl(270, 100%, 60%),
      hsl(300, 100%, 60%),
      hsl(330, 100%, 60%),
      hsl(360, 100%, 60%)
   );
   background-size: 1000% 1000%;

   font-family: Arial;

   padding-top: 30px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;

   animation: movebg 20s linear alternate infinite;
}

@keyframes movebg
{
   from {background-position: 0% 0%;}
   to {background-position: 100% 100%;}
}


#header
{
   color: white;
   text-shadow: 2px 2px 2px #262421;
   font-size: 50px;
   text-align: center;
   font-weight: bold;
   margin: 75px;
}



#joinscreen
{
   text-align: center;
}
#roomname
{
   font-size: 30px;
   text-align: center;
   border-radius: 5px;
   box-shadow: 2px 2px 2px #262421;
   width: 500px;
}
#joinbtn
{
   color: white;
   text-shadow: 0px 1px 1px #262421;
   font-size: 30px;
   font-weight: bold;

   background-color: #96bc4b;
   border: #7a993c;
   border-radius: 5px;
   box-shadow: 2px 2px 2px #262421;
   width: 80px;
   height: 40px;

   cursor: pointer;
}
#joinbtn:active
{
   box-shadow: inset 2px 2px 2px #262421;
}
#joinfield
{
   display: none;
}
#infofield
{
   color: white;
   text-shadow: 1px 1px 1px black;
   margin: 15px;
}



#paintscreen
{
   display: none;
   position: absolute;
   width: 100%;
   height: 100%;
   user-select: none;
}

#sheet
{
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;

   outline: 2px solid black;
}



#top
{
   position: absolute;
   top: 15px;
}
#bottom
{
   position: absolute;
   bottom: 15px;
}
.flex
{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   pointer-events: none;

   width: 100%;
}

#tollerance
{
   visibility: hidden;
   flex: 1;

   padding: 8px;
   max-width: 300px;

   background:
      linear-gradient(
         90deg,
         transparent calc(var(--tollerance-gradient)*0.902 + 17px - 2px),
         white     calc(var(--tollerance-gradient)*0.902 + 17px - 2px),
         white     calc(var(--tollerance-gradient)*0.902 + 17px + 2px),
         transparent calc(var(--tollerance-gradient)*0.902 + 17px + 2px)
      ),
      linear-gradient(
         90deg,
         white 17px,
         var(--player-color) calc(100% - 17px)
      );

   color: white;
   font-weight: bold;
   text-shadow: 1px 1px 2px black;
}
#players
{
   flex: 1;
   display: inline-flex;

   padding: 8px;
   max-width: 300px;

   height: 20px;
   text-align: left;
}

#colors
{
   height: 44px;
}



.options
{
   padding: 0px 5px 3px 5px;
   text-align: center;
   pointer-events: auto;

   background: linear-gradient(170deg, rgba(255, 255, 255, 0.3), var(--player-color));
   border: 2px solid #262421;
   border-radius: 5px;
   box-shadow: 2px 2px 0px #262421;
}
.options button
{
   border: none;
   background-color: transparent;
   outline: none;

   padding: 1px;

   cursor: pointer;

   font-size: 25px;
}

.options select
{
   text-align: center;
   border: none;
   border-radius: 5px;
   outline: none;
   background: none;

   font-size: 25px;

   width: 52px;
   cursor: pointer;
}
.options select option
{
   font-size: 20px;
}
#undo, #redo
{
   position: relative;
   bottom: -2px;
   font-size: 30px;
}

.options .selectedtop, .options .selectedbottom
{
   outline: 2px dashed deepskyblue;
}

.player
{
   z-index: 2;
   margin: 0px 5px 0px 5px;

   user-select: none;
}




#drawtextinput
{
   font-family: monospace;
   display: none;

   position: absolute;

   min-width: 250px;
   width: 250px;

   color: black;
   background-color: transparent;
   border: 2px dashed #62addf;
   outline: none;
}

#sizebar
{
   width: 400px;
}
#tollerancebar
{
   width: 100%;
}

#sizecount, #tollerancecount
{
   display: none;
   position: absolute;
   font-weight: bold;
   color: white;
   text-shadow: 1px 1px 1px black;
   text-align: center;
   width: 100px;
}
#tollerancecount
{
   font-size: 30px;
}



#colorpicker
{
   position: relative;
   top: 5px;

   appearance: none;
   background-color: transparent;
   width: 36px;
   height: 38px;
   border: none;
   cursor: pointer;
}
#colorpicker::-webkit-color-swatch
{
   border-radius: 50%;
   border: 2px solid black;
}
#colorpicker.transparent::-webkit-color-swatch
{
   background-color: initial !important
}



.pointer
{
   position: absolute;
   z-index: 2;

   user-select: none;
   pointer-events: none;
}




.range
{
   appearance: none;
   -webkit-appearance: none;
   overflow: hidden;

   height: 17px;
   border-radius: 15px;
   box-shadow: inset 0 0 5px #000;
}
.range::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 15px;
   height: 15px;

   border-radius: 50%;
   background: #333;

   cursor: pointer;
}
.range::-webkit-slider-thumb:hover {background: #666;}
.range::-webkit-slider-thumb:active {background: #999;}



@keyframes shake
{
   0% {transform: rotate(12deg);}
   25% {transform: rotate(-12deg);}
   50% {transform: rotate(6deg);}
   75% {transform: rotate(-6deg);}
   100% {transform: rotate(0deg);}
}
@keyframes bigShake
{
   0% {transform: rotate(20deg);}
   25% {transform: rotate(-20deg);}
   50% {transform: rotate(10deg);}
   75% {transform: rotate(-10deg);}
   100% {transform: rotate(0deg);}
}
@keyframes bounce
{
   0% {transform: scale(1);}
   50% {transform: scale(1.2);}
   100% {transform: scale(1);}
}
@keyframes left
{
   0% {transform: translateX(0);}
   50% {transform: translateX(-5px);}
   100% {transform: translateX(0);}
}
@keyframes right
{
   0% {transform: translateX(0);}
   50% {transform: translateX(5px);}
   100% {transform: translateX(0);}
}