:root {
    --background-dark-blue: #00003A;
    --slightly-lighter-than-background-dark-blue: #0D0D42;
    --font-gray: #EEEEEE;
    --font-yellow: #FAB85B;
    --j-archive-gold: #E5A561;
    --lime-green: #32CD32;
    --aqua-blue: #03FCF8;
    --magenta: #FF00FF;
    --daily-double-red: #D10000;
    --clue-screen-blue: #0000AF;
    --green: #03FC18;
    --yellow: #F3F312;
    --orange: #ED7802;
    --red: #FF0000;
    --white: #FFFFFF;
  }


  
  html {
    scrollbar-face-color: var(--white);
    scrollbar-arrow-color: #00003A;
    scrollbar-highlight-color: #DDDDDD;
    scrollbar-shadow-color: #CCCCCC;
    scrollbar-3dlight-color: #666666;
    scrollbar-track-color: #00003A;
    scrollbar-darkshadow-color: #222222;
  }
  
  body {
    font-family: arial, verdana, helvetica, sans-serif;
    background-color: var(--background-dark-blue);
    color: var(--font-gray);
    font-size: 75%;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
  }
  
input[type=text] {
  background-color: #0000AF;
}
  
  html, body, .fullpageheight {
    height: 100%;
  }
  
  div {
    width: 100%;
  }
  
  input.text, textarea, checkbox {
    background-color: #000099;
    color: var(--white);
  }
  
  input.final_clue_correct_response_input {
    background-color: #505050;
    color: #00FFFF;
    width: 250px;
    border: 0px;
  }
  
  input.final_clue_response_text_input {
    background-color: var(--clue-screen-blue);
    color: var(--white);
    width: 180px;
    border: 0px;
  }
 
  td.category_input {
    text-align: center;
    width: 0px;
  }
  
  td.clue {
    vertical-align: top;
    background-color: var(--clue-screen-blue); /* Clue screen blue */
    border-width: 2px;            /* Comment out for no depth. */
    border-style: outset;         /* Comment out for no depth. */
    border-bottom-color: #000088; /* Comment out for no depth. */
    border-left-color:   #0000EE; /* Comment out for no depth. */
    border-right-color:  #000099; /* Comment out for no depth. */
    border-top-color:    #0000FF; /* Comment out for no depth. */
    width: 152px;                 /* Comment out for no depth. */
   /* width: 160px; Pre-depth value */
  }
  
  td.clue_input {
    width: 0px;
  }
  
  td.category {
    background-color: var(--clue-screen-blue); /* Clue screen blue */
    border-width: 2px;            /* Comment out for no depth. */
    border-style: outset;         /* Comment out for no depth. */
    border-bottom-color: #000088; /* Comment out for no depth. */
    border-left-color:   #0000EE; /* Comment out for no depth. */
    border-right-color:  #000099; /* Comment out for no depth. */
    border-top-color:    #0000FF; /* Comment out for no depth. */
    width: 152px;                 /* Comment out for no depth. */
   /* width: 160px; Pre-depth value */
  }
  
  td.category_comments_input {
    text-align: center;
  }
  
.category textarea {
  height: 40px; width: min(100%, 1100px);
  font-family: Arial, Helvetica, sans-serif !important;
}

.clue textarea {
  height: 102px; width: min(100%, 1100px);
  font-family: Arial, Helvetica, sans-serif !important;
}

.clue input[type=text] {
  width: min(100%, 1100px);
  color: gold;
  margin-top: 1px;
  font-family: Arial, Helvetica, sans-serif !important;
}

#single_round table, #double_round table, #final_round table {
  background: #0000AF;
  width: min(1100px, 100%);
}

@media screen and (min-width: 1100px) {
  textarea, input[type=text] {
      font-size: 14px;
  }
  /* show it on small screens */
}

.start-button{
  width: 200px;
  background-color: #5e0845;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


#restartGame, #restartGame2, #restartGame3, #setup, #changeName {
  margin: 0;
  position: fixed;
  width: min(max(20%,500px),90%);
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: linear-gradient(to left bottom, #684608, #8a5e0f, #593b08, #6d480b, #ffa71a);
  padding: 50px;
  border-radius: 25px;
  font-size: 16px;
}

h2 {
  position: sticky;
  top: 20px;
  z-index: 200;
}

.trash_icon {
  height:14px;background-color: white;cursor: pointer;display:none;position:absolute;right:0;bottom:0;
}

.move_icon {
  cursor: pointer;height:14px; background-color: white; display:none;position:absolute;right:15px;bottom:0;
}