/* Derek's CSS */
* {
    margin:0;
    box-sizing: border-box;
}

#container{
    position: relative;
    background-color: limegreen;
    width: 100%;
    height: 100%;

    text-align: center;

    /* font addition */
    font-family: Montserrat, sans-serif;
}

#quiz1{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40vw;
    margin: auto;
}

#question1{
    text-align: center;
    color: black;
    font-size: calc(10px + .8vw);
    padding: 3vw;
    display: inline;
}

header {
    width: 100%;
    background-color: #1DB954;
    /* color: #333 */
    text-align: center;
    padding: 10%;
    font-size: calc(10px + 2vh);
}

nav, footer {
    background-color: #191414;
}

nav ul{
    width: 65%;

    display: flex;
    justify-content: space-around;
    align-items: center;

    list-style: none;
    padding: 1%;

    margin: auto;
}

nav a{
    color: white;
    text-decoration: none;

    font-size: calc(10px + 2vw);
}

nav a:hover{
    background-color: limegreen;
    border-radius: 20px;
}

main {
    height: 100vh;
}

footer {
    color: white;

    padding: 2%;

    font-size: calc(1px + .8vw);
}

footer a {
    color: lightgrey;
    text-decoration: none;
}

label{
    font-size: calc(5px + .8vw);
    padding: 5%;
    margin: 1vw;
}

.myBut{
    background-color: grey;
    font-size: calc(10px + .8vw);
    font-family: Montserrat, sans-serif;
    padding: 2%;
    margin:5%
}

/* start Edison's */
main h3 {
    padding-top: 5%;
}

#output {
    list-style: none;
    font-size: calc(10px + 1vw);
    padding: 5%;
}

#output li {
    padding: 1%;
}

#output li a {
    color: black;
}

#output li a:hover {
    background-color: #1DB954;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../src/fonts/home-fonts/Montserrat/static/Montserrat-Light.ttf') format('truetype');
}

/* end Edison's'*/