body {
  background-color: darkslategrey;
  font-family: Arial, sans-serif;
}

img {
  border: 2px solid black;
  box-shadow: 0 0 10px 2px black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-radius: 10px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  font-size: large;
}

.navlinks a {
  display: block;
  color: white;
  text-align: center;
  padding: 15px 100px;
  text-decoration: none;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-item {
  float: left;
}

.active{
  background-color: #04AA6D;
}

li a:hover {
  background-color: #111;
}

h1 {
  color: rgb(207, 207, 208);
  text-align: center;
}

p{
  font-size: large;
  text-align: justify;
}

b{
  font-size: large;
  text-align: justify;
}

.map {
  display:inline-block;
  position:absolute;
  left: 15%;
  top: 20%;
}


.botao {
  width: 18px;
  height: 18px;
  font-size: 7px;
  border-radius: 100%;
  text-align: center;
  border: 1px solid white;
  color: white;
  cursor: pointer;
}

.legenda  {
  padding: 10px;
  width: 100px;
  border: 0;
  cursor: none;
  color:rgb(207, 207, 208);
}

#len1 {
  position: absolute;
  left: -15%; 
  top: 10%;
}

#len2 {
  position: absolute;
  left: -15%;
  top: 15%;
}

.dinossauro {
  background-color:rgb(143, 50, 0);
}

.outro {
  background-color:rgb(118, 132, 0);
}

.dinossauro:hover {
  background-color: rgba(77, 28, 0);
}

.outro:hover {
  background-color: rgb(0, 82, 11);
}

#b1 {
  position:absolute;
  left:37px;
  top:430px;
}

#b2 {
  position:absolute;
  left:37px;
  top:413px;
}

#b3 {
  position:absolute;
  left:54px;
  top:438px;
}

#b4 {
  position:absolute;
  left:50px;
  top:400px;
}

#b5 {
  position:absolute;
  left:54px;
  top:420px;
}

#b6 {
  position:absolute;
  left:48px;
  top:454px;
}

#b7 {
  position:absolute;
  left:67px;
  top:392px;
}

#b8 {
  position:absolute;
  left:69px;
  top:427px;
}

#b9 {
  position:absolute;
  left:58px;
  top:542px;
}

#b10 {
  position:absolute;
  left:33px;
  top:462px;
}

#b11 {
  position:absolute;
  left:33px;
  top:446px;
}

#b12 {
  position:absolute;
  left:125px;
  top:280px;
}

#b13 {
  position:absolute;
  left:141px;
  top:183px;
}

#b14 {
  position:absolute;
  left:183px;
  top:733px;
}

#b15 {
  position:absolute;
  left:75px;
  top:358px;
}

#portugal {
  border: none;
  box-shadow: none;
}

#target {
  background-color:rgb(143, 50, 0);
  width: 600px;
  height: 600px;
  padding: 40px 20px;
  border-style: solid;
  border-width: 10px;
  border-color: rgba(77, 28, 0);
  border-radius: 20px;
  box-shadow: 0 0 10px 2px black;
  font-size: larger;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color:aliceblue;
  position:absolute;
  left:45%;
  top:28%;
}

#initial-text {
  text-align: center;
  color: aliceblue;
}

.disclaimer {
  font-size: 13px;
}

figure {
  float: right;
  max-width: 100%;
  text-align: center;
  font-size: medium;
  font-style: italic;
  text-indent: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 60%;
}

#fig1 {
  top: 50%;
  left: 37%;
}

#fig2-1 {
  top: 70%;
  left: 10%;
}

#fig2-2 {
  top: 70%;
  left: 50%;
}

#fig3-1 {
  left: 4%;
}

#fig3-2 {
  left: 53%;
}

#fig4{
  top: 55%;
  left: 24%;
}
#fig5-1{
  left: 2%;
}

#fig5-2{
  left: 51%;
}

#fig6{
  left: 5%;
}

#fig7{
  top: 50%;
  left: 18%;
}

#fig8, #fig13, #fig14 {
  left: 23%;
}

#fig9 {
  top: 56%;
  left: 14%;
}

#fig10 {
  top: 55%;
  left: 22%;
}

#fig11, #fig12 {
  top: 55%;
  left: 25%;
}

#fig13 {
  top: 50%;
}

#fig15{
  top: 48%;
  left: 6%;
}

/* QUIZ */

.quiz-body {
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.container {
  width: 800px;
  max-width: 80%;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px 2px;
}

.btnGrid {
  display: grid;
  gap: 10px;
  margin: 20px 0px;
}

.btn {
  border: 1px solid black;
  background-color: solid white;
  border-radius: 5px;
  padding: 5px 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: larger;
}

.btn:hover {
  background-color: lightgray;
}

.btn.correct {
  background-color:forestgreen;
}

.btn.wrong {
  background-color:indianred;
}

.startbtn, .nextbtn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
}

.controls{
  display: flex;
  justify-content: center;
  align-items: center;
}

#question{
  text-align: center;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bolder;
  font-size: large;
}

.hide {
  display: none;
}

.sources {
  line-height: 30px;
  font-size: larger;
  border: 5px solid #333;
  color: #333;
  padding: 30px;
  text-align: center;
  background-color:rgb(207, 207, 208);
}

.source:hover {
  background-color:rgb(207, 207, 208);
  color: darkblue;
}

.about {
  text-align: center;
  color: rgb(207, 207, 208);
}

#nova {
  border: none;
  box-shadow: none;
}