/* Root for main colors used throughout webpage */
:root  {
    /* Various colors */
    --main-bkgrd-color: white;
    --main-text-color: black;
    --button-color: rgb(80, 165, 245);
}

/* Wildcard to apply attributes to all selectors */
* {
    font-family: Arial, Helvetica, sans-serif;
}

/* Body of page */
body {
    font-size: 18px;
    color: var(--main-text-color);
    display: flex;
    flex-direction: column;
    min-height: auto;
}

/* "Coding Quiz Challenge" text */
h1 {
    font-size: 200%;
    font-weight: 600;
}

/* "View high scores" and "Time text" */
h2 {
    font-size: 150%;
}

/* Questions, Quiz end, High Scores */
h3 {
    font-size: 120%;
}

/* View Scores */
a {
    text-decoration: none;
    color: var(--main-text-color);
}

/* Very top of page: "View high scores" and "Time" */
header {
    flex: 0 0 60px;
    background-color: rgb(155, 219, 235);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 15px;
}

/* "View high scores" specifically */
header #view-scores {
    color: rgb(114, 114, 114);
}

/* Main content of page */
main {
    flex: 0 0 100%;
    width: 50%;
    align-self: center;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

/* To apply to all <p> in <main> */
main p {
    line-height: 1.5;
    margin: 5px;
}

/* To apply to all <button> in <main> */
main button {
    border: none;
    background-color: var(--button-color);
    color: var(--main-bkgrd-color);
    padding: 5px 10px;
    margin: 5px 0;
    display: block;
}

/* Add box shadow to button when clicked */
main button:active {
    box-shadow: 0 0 0 2px var(--main-bkgrd-color) inset;
  }

main button.inline {
    display: inline-block;
    margin-top: 0px;
  }

/* Hides most of page after "Coding Quiz Challenge" and <h2> values */
.hidden {
    display: none;
  }
  
  /* Align "Coding Quiz Challenge" section */
#coding-quiz-title {
    padding: 10px 0;
    text-align: center;
}

/* Add weight to <p> under the "Coding Quiz Challenge" header*/
#coding-quiz-title p {
    font-weight: 400;
}

/* Sets ordered list to have decimal values */
#show-scores ol {
    list-style: decimal;
}

/* Adding line border under questions page(s) */
#answers-correct-wrong {
    margin-top: 5px;
    border-top: 1px solid rgb(95, 95, 95);
    padding: 5px 0;
}

/* Adding color of "Correct!"/"Wrong!" and making them italic */
#answers-correct-wrong h3 {
    color: rgb(177, 177, 177);
    font-style: italic;
}

/* Media queries for size adjustments */
@media screen and (max-width: 992px) {
    main {
      width: 40%;
    }
}

@media screen and (max-width: 768px) {
    main {
      width: 100%;
    }
}