/*  JavaScript 7th Edition
    Chapter 5
    Hands-on Project 5-1

    Filename: styles.css
*/

/* Quiz layout layered on top of the site's shared terminal theme */
#quiz-app {
   overflow: hidden;
}

#container {
   display: grid;
   grid-template-columns: minmax(220px, 0.75fr) minmax(420px, 1.5fr);
   gap: 2rem;
   position: relative;
   margin-top: 1.5rem;
}

#instructions {
   padding: 1.25rem;
   border: 1px solid #2d8f4f;
   border-radius: 6px;
   background: #08100b;
}

#instructions p {
   margin-top: 0;
}

#startquiz {
   display: block;
   width: 100%;
   margin: 1.25rem 0;
   padding: 0.7rem 1rem;
   border: 1px solid #35ff75;
   border-radius: 4px;
   background: #12351f;
   color: #7cff9b;
   font: inherit;
   font-weight: bold;
   cursor: pointer;
}

#startquiz:hover,
#startquiz:focus {
   background: #7cff9b;
   color: #050807;
   box-shadow: 0 0 12px rgba(124, 255, 155, 0.65);
}

#instructions label {
   display: block;
   color: #b9ffd0;
   text-align: center;
}

#quizclock {
   display: block;
   width: 7rem;
   height: 7rem;
   margin: 0.75rem auto 0;
   border: 2px solid #35ff75;
   border-radius: 50%;
   background: #050807;
   color: #7cff9b;
   font: 3rem "Courier New", Courier, monospace;
   text-align: center;
   text-shadow: 0 0 8px rgba(124, 255, 155, 0.8);
   box-shadow: inset 0 0 18px rgba(53, 255, 117, 0.18);
}

#quiz {
   position: relative;
   min-height: 360px;
   padding: 1rem;
   border: 1px solid #2d8f4f;
   border-radius: 6px;
   background: #08100b;
}

#quiz table {
   margin: 0;
}

#quiz td {
   padding: 0.8rem;
   font-size: 1.05rem;
}

#quiz td:last-child {
   white-space: nowrap;
}

#quiz em {
   color: #7cff9b;
   font-style: italic;
}

#quiz input {
   width: 5rem;
   padding: 0.4rem;
   border: 1px solid #2d8f4f;
   background: #050807;
   color: #d6ffe2;
   font: inherit;
   text-align: center;
}

#quiz input:focus {
   outline: 1px solid #7cff9b;
   box-shadow: 0 0 8px rgba(124, 255, 155, 0.5);
}

#quiz input.wronganswer {
   border-color: #ff6d6d;
   background: #4b1111;
   color: #ffd6d6;
}

#overlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: calc((100% - 2rem) * 0.6667);
   z-index: 1;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   border: 1px solid #2d8f4f;
   border-radius: 6px;
   text-align: center;
}

#overlay p {
   color: #7cff9b;
}

#overlay.hidequiz {
   display: flex;
   background:
      repeating-linear-gradient(
         0deg,
         rgba(53, 255, 117, 0.025) 0,
         rgba(53, 255, 117, 0.025) 1px,
         transparent 1px,
         transparent 4px
      ),
      #08100b;
}

#overlay.showquiz {
   display: none;
   background: transparent;
}

@media (max-width: 760px) {
   #container {
      grid-template-columns: 1fr;
   }

   #overlay {
      top: auto;
      width: 100%;
      height: 360px;
   }

   #quiz {
      overflow-x: auto;
   }
}