tr:nth-of-type(odd) {
    background-color: #eee;
}

tr th[scope="col"] {
    background-color: #505050;
    color: #fff;
}

tr th[scope="row"] {
  // background-color: #b3ffb3;
  background-color: lightgray;
}

tr th {
    font-size: 16px;
}

tr td {
    font-size: 15px;
}

body {
    font-weight: 50;
    font-size: 18px;
    font-family: Helvetica, Arial, sans-serif;
}

table {
    margin: 0 auto;
}

/* page styles */
.ax-hidden {
    visibility: hidden;
    position: absolute;
}

.center {
  margin-left: auto;
  margin-right: auto;
}


@-webkit-keyframes bounce {
      0% { margin-top:  0px; }
     50% { margin-top: -8px; }
    100% { margin-top:  0px; }
}

@keyframes bounce {
      0% { margin-top:  0px; }
     50% { margin-top: -8px; }
    100% { margin-top:  0px; }
}


.quiz {
    /* entire quiz height */
    --quiz-height: 600px;
    --quiz-width: 650px;
}

.quiz-container {
    top: 0px;                      /* gap between carousel and navig bar */
    display: flex;
    min-height: var(--quiz-height);
    margin: 0 auto;
    max-width: var(--quiz-width);
    position: relative;
    animation: spin 10s linear infinite reverse;
    justify-content: center;
    align-items: center;
  
    margin-top: -70px;      /* space btn top:0 and Quiz(list 2) */
    margin-left: 57px;      /* space btn top:0 and Quiz(list 2) */
}


.quizHeader {
    text-align: center;
    color: #cc00cc;
    line-height: 15px;
    font-size: 15px;
    margin-bottom: 27px;    /* navigation bar and "SAT (list4)" */
    padding-top: 80px;      /* center alignment of Syno table and Quiz */
}

.qzQuestion {
    text-align: center;
    color: #f3f1f1;
    line-height: 18px;
    margin-top: 2px;
    margin-bottom: 18px;    /* gap btn question? and table */
}

.quiz-btns {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.quiz-btn {
    border: 1.5px solid blue;
    color: black;
    height: 32px;                /* height of quiz button */
    width: 270px;                /* width of quiz button */
    padding: 13px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 3px;
    font-size: 17.5px;
}

.button {
  margin-bottom: -5px;
}


@media (min-width: 768px) {
    .quiz-btns {
        flex-direction: column;
    }

    .quiz-btn {
        flex: 1;
        margin: 1.0px;
   }
}


@media (min-width: 480px) {
    .quiz-btns {
        flex-direction: column;
    }

    .quiz-btn {
        flex: 1;
        margin: 1.5px;                 /* space gap between buttons */
   }
}

@media (min-width: 375px) {
    .quiz-btns {
        flex-direction: column;
    }

    .quiz-btn {
        flex: 1;
        margin: 1.5px;                 /* space gap between buttons */
   }
}


.qzCounter-p {
    text-align: center;
    line-height: 18px;
    font-size: 15px;
    color: gray;
    padding-top: 8px;
}


.nextQuizBtn {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.nextQuiz {
    color: white;
    background-color: #1583e9;
    border: none;
    padding: 12px 15px;
    border-radius: 6px;
    text-align: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 20px;
}

.quiz-section-center {
    font-family: Helvetica;
    display: block;
    margin-top: 170px;     /* space btw 'New Quiz' and 'Quiz Results Log'*/
    padding-bottom: 100px;  /* distance btw 'New Quiz' and quiz result log */
}


.quizHeaderTr {
    font-size: 15px;
    margin-left: -70px;
}

.qzResultTitle {
    text-align: center;
    color: black;
    font-size: 16px;
}


.quizTr {
    color: black;
    font-weight: 400;
}


/* -------- Dropdown -------- */
.dropdown {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 15px;
}

/* options */
.SaveScores,
.QuizSort,
.QuizSpeak,
.QuizOptions {
    margin-left: 25px;
}

.DemoMode {
    margin-left: 25px;
    display: none;
}

.filler {
    color: white; 
    font-size: 16px;
    visibility: hidden;
}

.classynav {
    justify-content: center;
    align-items: center;
}

.blank {
    color: #8c8c8c;    // gray
    color: #808080;    // gray
}


/* -------- Timer -------- */

.progress-container {
    display: flex;
    position: relative;
    height: 15px;
    width: 270px;
    background-color: yellow;
    margin-left: 50px;
}

.progress-bar {
    height: 15px;
    width: 270px;
    background-color: red;
    transition: width 1s;  /* Makes progressBar smooth */
    transition-timing-function: linear;    /* smooth progress */
}

.progress-text {
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: gray;
    font-size: 15px;
}


/* -------- Page transition effects -------- */

.transition {
    position: absolute;
    height: 112%;
    width: 15%;
    background: #ffffcf;   /* light yellow */
    transition: 2s all ease-in-out;

    color: black;
    font-size: 30px;
    content: "fishtoe.com";

    -webkit-transition: 2s all ease-in-out;
}

.anim-trans {
  animation: anim 2.5s ease-in-out;
}

@keyframes anim{
     10%   { transform: skewX(180deg) translateX(100);
 width:100%; z-index: 11; box-shadow: 10px 10px 5px #99ccff;}
}

/* -------- 

 width:100%; z-index: 11; box-shadow: 10px 10px 7px #cce6ff;}
 width:100%; z-index:11; box-shadow: 10px 10px 7px #b3ffb3;}
 width:100%; z-index:11; box-shadow: 10px 10px 5px #eaeaea;}

    background:#ffffe6;    // light light light yellow
    background:#ffffcc;    // light light yellow
    background:#b3ffff;    // light blue
    background:#99ccff;    // light blue
    background:#d6d6d6;    // light gray (origin)
    background:#99ff99;    // light green
    background:#e6ffe6;    // light light green
    background: #ff99ff    // light pink

-------- */