/* Root color varibles */
:root {
  --backgroundColor: black;
  --backgroundColorNinja: #343030;
  --ninja-color: red;
  --buttonBackColor: #369739;
}

/* global settings */
* {
  font-family: Arial;
  background-color: var(--backgroundColor);
  color: white;
}

/* header  */
header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  width: 80%;
  position: relative;
  left: 10%;
}

h1, h2,h3 {
  background-color: var(--backgroundColor);
}

.title {
  display: flex;
  justify-content: center;
  width: 100%;
}

.scores {
  padding: 20px;
  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */
}

.headerImage {
  width: 300px;
}

.headerImage img {
  margin: auto;
  display: block;
}

.time {
  
  justify-content: center;
  font-size: 250%;
  color: var(--ninja-color);
}

.ninja {
  font-family: cursive;
  color: var(--ninja-color);
  font-size: 150%;
}

/* Wrapper for user input  */
.wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  width: 80%;
  position: relative;
  left: 10%;
  background-color: var(--backgroundColorNinja);
  border-radius: 20px 20px 20px 20px;
  padding: 20px;
}


.wrapper div {
  background-color: var(--backgroundColorNinja);
}

.wrapper h1,h2 {
  background-color: var(--backgroundColorNinja);
}

.wrapper p {
  background-color: var(--backgroundColorNinja);
}



.ninjaBlock {
  font-family: cursive;
  color: var(--ninja-color);
  font-size: 150%;
  background-color: var(--backgroundColorNinja);
}


.wrapper button {
  width: 150px;
  height: 30px;
  background-color: var(--buttonBackColor);
  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */
    --padding-x: 1.2em;
  border-color: transparent; 
}

.wrapper ul {
  background-color: inherit;
  list-style-type: none; /* Remove bullets */
}

.wrapper li {
  background-color: inherit;
  font-size: 20px;
  margin: 3px;
}

.wrapper li:hover {
  background-color: var(--buttonBackColor);
  
}


/* default display tags */
#start {
  display: flex;
}

#questions {
  display: none;
}

#end {
  display: none;
}