/* sets the branding colours across the doc for use in var() */
:root {
    --purpleBase: #5603ad;
    --purpleHighlight: #8267c6;
    --greenBase: #b3e9c7;
    --greenHighlight: rgb(196, 247, 204);
    --background: #f1fff2;
    --text: #393043;
}

/* sets the universal strcuture for the document to bored box, as well as with pseudo elements
 using teh html tag allows us to adjust this universally if required later on, as well as allowing us to target specific containers and their children
 if we want to adapt a specific area we also attch this to teh pseudo elements */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /*websafe fonts use for efficiency*/
    text-decoration: none;
    padding: 0;
    margin: 0;
}


/* targets the nav element */
body {
    width: 100%;
    background-color: var(--background);
    /* this stops words from breaking halfway through, creating a hyphen, then completing on the next line 
    Have added this to the body as I want it to apply to all children*/
    hyphens: none;

}

/* targets the nav element */
nav {
    display: flex;
    background-color: var(--purpleHighlight);
    width: 100%;
    padding: 20px;
}

/* keeping that logi within the flex box */
nav ul {
    width: 100%;
    height: auto;
    justify-content: space-between;
    align-items: center;
}

/* targets our section elements */
section {
    display: flex;
    flex-direction: column;
    padding: 20px;
    align-items: center;
    justify-content: space-around;
}

/* targets our list elements and children */
ul {
    list-style-type: none;
    /*removes bullet points*/
    display: flex;
   }

/* targets our section elements */
h1 {
    padding: 20px;
    color: var(--purpleBase);
    font-size: 40px;
    text-align: center;

}

h2{
    padding: 20px;
    color: var(--purpleHighlight);
    text-align: center;

}

p {
    text-align: center;
    padding: 20px 10px 50px 10px;
    line-height: 1.5;
    color: var(--text);
    font-weight: 600;

}

a {
    color: var(--greenBase);
    font-size: 30px;
}

/* hover pseudo element over anchor tags, repeated effect to increase boldness */
a:hover {
    text-shadow: 0px 0px 10px var(--greenHighlight),
        0px 0px 30px var(--greenHighlight),
        0px 0px 50px var(--greenHighlight);
}

/* once anchor is clicked active pseudo element over the anchor */
a:active {
    color: var(--purpleBase);
    text-shadow: 0px 0px 10px var(--greenHighlight),
        0px 0px 30px var(--greenHighlight),
        0px 0px 50px var(--greenHighlight);
}

button {
    padding: 5px;
    background-color: var(--greenBase);
    border-radius: 10%;
    font-size: 20px;
}

/* hover pseudo element over the button */
button:hover {
    box-shadow: 0px 0px 30px 10px var(--greenHighlight);
}

/* once button is clicked active pseudo element over the button */
button:active {
    background-color: var(--purpleBase);
    box-shadow: 0px 0px 30px 10px var(--greenHighlight);
}

/* creating a style for the little message that pops up incorrect/correct */
cite{ 
    text-decoration: overline;
    font-weight:200;
    font-size: 15px;

}

form{
    display: flex;
    flex-direction: column; 
    padding: 20px; 
    justify-content: center;
    align-items: center;
    align-content: center;
}

input[type=text]{
    padding:20px;
    margin: 50px;
    box-sizing: border-box;
    border: 3px solid var(--purpleBase);
    background-color: var(--greenBase);
    border-radius: 25px;
    color: var(--text);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 600;
    width:100%;

}

.logo {
    max-height: 80px;
    /* max height directly targeting image as it was blowing up out past the nav */
    border-radius: 50%;
    /* ensurses teh box element follows teh shape of the logo */
}

/* hover pseudo element over the logo class */
.logo:hover {
    box-shadow: 0px 0px 30px 10px var(--greenHighlight);

}

/* once logo is clicked active pseudo element over the logo */
.logo:active {
    box-shadow: 0px 0px 30px 10px var(--purpleBase);
    }

/* Created this button section class for my buttons of the high scores html, that way we can be a bit mor specific about their styling */
.button-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    padding: 30px;

}

/* This class is crated for teh button that links back to an href, it is used to style an anchor link to look like the other buttons */
.anchor-button-style {
    padding: 5px;
    border: 2px solid #000;
    background-color: var(--greenBase);
    border-radius: 10%;
    font-size: 20px;
    color: #000;
}

/* hover pseudo element over the button that is an anchor tag */
.anchor-button-style:hover {
    box-shadow: 0px 0px 30px 10px var(--greenHighlight);
}

/* once anchor button is clicked active pseudo element happens, this is exactly as per button */
.anchor-button-style:active {
    box-shadow: 0px 0px 30px 10px var(--greenHighlight);
    background-color: var(--purpleBase);
}


/* highscores styling */
#high-scores{
    display: flex;
    flex-direction: column;
    font-weight: 600;
    padding: 5px;
}
/* high scores list itms are used to return and record all high scores, stored in local storage
I want the returned lines to alternate bewteen styling, I am using nth child to do so */
#high-scores li:nth-child(odd) {
    background-color: var(--purpleHighlight);
    color: var(--greenBase);
    padding: 5px;
}
#high-scores li:nth-child(even) {
    background-color: var(--greenBase);
    color: var(--purpleHighlight);
    padding: 5px;
  
}

#timer {
    color: var(--greenBase);
    font-size: 30px;
}

#quizContainer h2{ /* styling quiz questions */
    width: 50%;
    display: flex;
    flex-direction: column;
}

#quizContainer ul{ /* styling quiz questions */
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px 10px 50px 10px;
    line-height: 3;
    color: var(--text);
    font-weight: 600;
    font-size: 20px;
}
/* targeting he clear button on the highscores page specifically for javascript */
#clear {}

@media screen and (max-width: 600px) {}