/*
The CSS code gets to executed from top to bottom and left ro right
Basic rules to write CSS
- write GENERAL rules first (for all the paragraph tags in the website for example) and only after that write CSS for SPECIFIC tags (for example the paragraph tags inside the footer)
- write the css styles to define for the parent (outside) container and THEN the children (inside containers) of that parent and THEN the children (inside containers) of the child above
*/


/* -------------------------------------
CSS reset
(all the browsers will see the website in the same by setting every tag to 0 (the website will look the same on all browsers))
*/

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /*The box-sizing property is used to tell the browser what the sizing properties (width and height) should include border-box.*/
    box-sizing: border-box;
    /*reset Chrome user agent styles*/
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-before: 0px;
    -webkit-padding-after: 0px;
    -webkit-padding-start: 0px;
    -webkit-padding-end: 0px;
}


/* -------------------------------------
General styles (General Module, wrapping around the modules bellow)
(the styles used everywhere in the page (like the Body) or styles which are used in more than 2 of the modules bellow (h2, h3, h4, h5, h6, p, a, ul, li))
*/

html {
    background: rgba(0, 0, 0, 0) url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Map_of_USA_OH.svg/2000px-Map_of_USA_OH.svg.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {}


/* -------------------------------------
Header styles (Main Module)
(all the styles inside the < header > or < nav > tags)
*/

#myHeaderh1 {
    background-color: ;
    background-position: center center;
    text-align: center;
    height: 50px;
}


/* -------------------------------------
Content styles (Main Module)
(all the styles inside the < sections > or < aside > tags)
*/

#startQuiz,
#quizSection,
#results {
    background-image: url("../img/transparent.jpg");
    border-radius: 0.5rem;
    padding: 2rem;
    width: 34rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
}

.questionAnswer {
    padding: .5rem;
    text-align: justify;
}

.myQuestions {
    padding-bottom: .2em;
}

#choices {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-top: .5em;
}

.myAnswers {
    margin-right: .3em;
}

.text {
    padding-bottom: 1rem;
}

.start-button,
.submit {
    background-color: darkgrey;
    border-color: darkgrey;
    border-radius: 30px;
    border-style: none;
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
    text-shadow: none;
    width: 9.688rem;
    color: black;
    margin-top: 1em;
    margin-bottom: 1em;
}

.mySpan {
    color: blue;
}

#results {
    background-color: lightgrey;
}


/* -------------------------------------
Footer styles (Main Module)
(all the styles inside the < footer > tag)
*/


/* -------------------------------------
place all the desktop styles above this line
Responsive styles
(the very last module in the CSS, contains all the media queries and it is dealing with the compatibility with mobiles and tablets)
place all the mobile tables styles bellow this line
*/