/*

Author: Mark Bowley
Author URI: http://bowleydesign.com
Description: Flag Quiz
Version: 1.0

*/

body { font-family: "IBM Plex", sans-serif; text-align: left; padding: 2rem; background-color: #FDF5AA; color: #113F67; font-size: 1rem;}

h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0; }
h2 { font-size: 1rem; font-weight: 400; }
h3 { font-size: 1.5rem; font-weight: 400;  }
a { text-decoration: none; color: #113F67; }
a.current { border-bottom: 2px solid #58A0C8; padding-bottom: .2rem; }
a:visited { color: inherit; }

#container { display: flex; flex-direction: column; justify-content: left; background-color: white; max-width: 800px; border: 10px solid #053333; border-radius: 20px; margin: 0 auto; padding: 2rem 4rem; }
#container-blank { display: flex; flex-direction: row; justify-content: left; max-width:900px;  padding: 1rem 0; margin: 0 auto; }
#container-blank p { font-size: .7rem; }
/* #title { display: flex; flex-direction: row; justify-content: space-between; }
#title p { font-size: 1.5rem; font-weight: 400; margin: 1rem 0 .5rem 0; }
.label { display: flex; flex-direction: column; align-items: center; background-color: #34699A; padding: .1rem .5rem; }
*/
#quiz { display: flex; flex-direction: column; justify-content: left; border-top: 1px solid #58A0C8; margin-top: 1rem; }
#footer {  padding: 1rem 0; }
#footer p { color: #aaa; line-height: 1.5; }
#comment { padding: 1rem 0; display: flex; flex-direction: column; justify-content: left; }


.nav-links {
    list-style: none;  
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem; 
  }

  .nav-links li { margin: 0; }
  .nav-links a { text-decoration: none; color: inherit; }

img { border: 1px solid black; width: 600px; height: auto; margin-bottom: 1rem; box-shadow: 5px 10px 0px #888888:}

button { cursor:pointer; border-radius: 5px; color: white; display: block; margin-right: 0.5rem; margin-bottom: .5rem; padding: 0.5rem 1rem; font-size: 1rem; background-color: #34699A; border: none;}
button:hover { background-color: #113F67; }
button#nextBtn, button#shareBtn { background-color: #113F67; }
button#nextBtn:hover:, button#shareBtn:hover { background-color: black; }

#score { font-weight: bold; margin: 1rem 0; }
#questionCounter { color: #aaa; font-size: .8rem;}
#options {
display: flex;
flex-direction: row;
justify-content: left;
gap: .2rem;
flex-wrap: wrap;
}

@media only screen and (max-width: 1500px) { 
img { width: 300px;}
}

@media only screen and (max-width: 600px) { 
h1 { font-size: 1.8rem; margin-top: .2rem; }
img { width:200px;}
body { padding: .5rem; }
#container { padding: 2rem; }
#quiz { margin-top: .5rem; }
#score { margin: .2rem 0; }
.nav-links { flex-direction: column; }
}