/* Universal selector */
* {
    box-sizing: border-box;
    padding: 2%;
    margin: 0;
    font-family: "Baskerville", "Rockwell Extra Bold", "New Century Schoolbook", "Times New Roman", Times, serif;

}

/* Color selectors */
:root {
--light-blue: #3A606E;
--dark-blue: #152429;
--light-green: #8fa18f;
--dark-green:  #3d463d;
--off-white: #e0e0e0;
}

/* *************************** */
/*     Element selectors       */
/* *************************** */

/*Background formatting, font, and color*/
body {
    background-color: var(--off-white);
    font-family:'Baskerville', 'Rockwell Extra Bold', 'New Century Schoolbook', 'Times New Roman', Times, serif;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0
}

/*Header formatting, font, and color*/
header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100px;
    font-weight: bold;
    color: var(--dark-text);
    text-decoration: none;
    border-style: 20px hidden;
}

/* Main formatting, font, and color */
main {
    display: flex;
}

/* Section formatting, font, and color */
section {
    display: flex;
    margin: auto;
    margin-top: 25px;
    width: 500px;
    justify-content: space-around;
    align-items: flex-start;
    text-align: center;
    flex-direction: column;
}

/* Article formatting, font, and color */
article {
    text-align: center;
    position: relative;
    justify-content: center;
    padding: 2%;

}

/* Title formatting, font, and color */
h1 {
    font-size: 32px;
}

h2 {
    font-size: 24px;
}

/* Paragraph formatting, font, and color */
p {
width: 500px;
padding: .5%;
line-height: 150%;
color: var(light-blue);
}

input {
padding: 1%;
}

button {
position: relative;
display: inline-block;
overflow: hidden;
background-color: var(--light-green);
color: var(--dark-green);
padding: 10px;
border: 1px solid var(--dark-green);
border-radius: 8px;
line-height: 15px;
text-decoration: none;
cursor: pointer;
user-select: none;
touch-action: manipulation;
}

/* *************************** */
/*      Class selectors        */
/* *************************** */
.header {
    display: flex;
    height: 20%;
    padding: 1%;
    text-decoration: none;
    color: var(--dark-blue)
}

.timerText {
    display: flex;
    justify-content: right;
    padding: 1%;
    text-decoration: none;
}

.quiz-container {
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

/* buttons */
.alt-text-button span:first-child {
    position: relative;
    transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
    z-index: 10;
    color: var(--dark-green)
}

.alt-text-button span:last-child {
    color: var(--off-white);
    display: block;
    position: absolute;
    bottom: 0;
    transition: all 200ms cubic-bezier(0.48, 0, 0.12, 1);
    z-index: 100;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translateY(225%) translateX(-50%);
    height: 14px;
    line-height: 13px;
}

.alt-text-button:after {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-green);
    transform-origin: bottom center;
    transition-delay: 50ms;
    transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
    transform: skewY(9.3deg) scaleY(0);
    z-index: 50;
  }
  
.alt-text-button:hover:after {
    transform-origin: bottom center;
    transform: skewY(9.3deg) scaleY(2);
}
  
.alt-text-button:hover span:last-child {
    transform: translateX(-50%) translateY(-100%);
    opacity: 1;
    transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}

.highscores li:nth-child(odd) {
    background: var(--light-blue);
    list-style-position: inside;
}

.highscores li:nth-child(even) {
    background: var(--offwhite);
    list-style-position: inside;
}

.hide-item {
    display: none;
}

.show-item {
    display: contents;
}

/* *************************** */
/*        ID selectors         */
/* *************************** */

#view-highscores {
display: flex;
justify-content: flex-start;
color: var(--dark-blue)
}

#timer-text {
display: flex;
justify-content: flex-end;
color: var(--dark-blue)
}

#start {
    text-align: center;
}

/* buttons */

#questions {
    text-align: center;
}

#question-title {
    text-align: center;
}

#answers {
    padding: 5px 10px;
    margin: 10px;
    display: block;
    text-align: left;
}

#answers button {
    display: flex;
    padding: 5px 10px;
    margin: 10px;
    display: block;
}

#end {
    text-align: center
}

/* *************************** */
/*       Media Queries         */
/* *************************** */

/* Laptop */
@media screen and (max-width: 1024px) {

}

/* iPads and Tablets */
@media screen and (max-width: 768px) {

}

/* Mobile devices */
@media screen and (max-width: 480px) {

}