/*Alexa Schuijt*/
:root {
	--secondary-color: rgb(255, 239, 218);
}

html{
	background-color: bisque;
	background-image: url("../images/mountainsBG.jpg");
	background-size: 100%;
}

head{
	background-color: bisque;
}


header{
	text-align: center;
	font-family: Sancreek, serif;
	margin: 0.625rem 1.111%;
	width: 100%;
	justify-self: center;
}

header h2{
	font-size: 300%;
	margin-bottom: 0.625rem; /* 10px */
	margin-top: -0.5625rem; /* -9px */
	justify-self: center;
}

header h3{
	font-family: "Maiden Orange", serif;
	margin-top: 0.3125rem; /* 5px*/
	font-size: 135%;
	justify-self: center;
}

header p{
	margin: 0;
	font-size: 115%;
	justify-self: center;
}

header img{
	max-width: 13.22%; /* 119px*/
}

#left{
	float: left;
}

#right{
	float: right;
}

nav ul{
	width: 100%;
	height: 7.5rem; /*120px*/
    justify-self: center;
	padding-inline-start: 13.1739%; /*20px*/
}

nav ul li {
	font-family: Sancreek, serif;
	text-shadow: 1px 1px 2px black;
	border: 3px solid black;
	border-radius: 10px;
	border-style: dotted;
	width: 14%;
	float: left;
	/* background-color: sandybrown;rgb(255, 221, 191) rgb(96, 52, 14) */
	background-image: linear-gradient(to right top, rgb(95, 45, 1), rgb(255, 221, 191) 75%);
	text-align: center;
	/*padding: 1.875rem 1.11112%;*/ /*30px 10px*/
	list-style-type: none;
	margin: 0.75rem 1.341%; /* 12px */
	a{
		padding: 1.875rem 7.992%; /*30px 10px*/
		color: white;
		text-decoration: none;
		display: block;
	}
	a:hover, a:focus{
		padding: 2rem 5%;
	}
	#current {
		color: black;
		text-shadow: 1px 1px 2px white;
	}
	/* a:hover, a:focus{background-color: rgb(224, 148, 81);} */
}


nav{
	li:hover, li:focus{
		background-color: rgb(224, 148, 81);
		/*padding: 2.5rem 1.665%;*/ /*40px 15px*/
		margin: 0.35rem 1.34%; /*7px*/
		/* margin makes up for the difference in how much it grows when you hover. */
	}
}

body{
	font-family: Bronco, Verdana, sans-serif;
    /* width: 95%; for responsive*/
	max-width: 900px; /*900px*/
    height: 890px; /*890px*/
	margin: 0.625rem auto;
	border: 8px solid var(--secondary-color, rgb(255, 239, 218));
	border-style: dotted;
    box-shadow: 5px 6px 10px 5px #ffd6bb;    
	background-color: rgb(117 73 52);
	padding: 15px;
}

main{
	padding: 5px 5px 5px 5px;
	min-height: 550px;
	img:hover, img:focus{
		transform: rotate(20deg);
	}
}

main section{
    justify-self: center;
	font-family: "Maiden Orange", serif;
	width: 85%;
	height: 25rem;
    border: 10px solid black;
	border-style: dotted;
    border-radius: 26%;
	font-size: 110%;
	margin-top: 5px;
	button:hover{
		background-color: rgb(224, 148, 81);
		padding: 3px 9px;
	}
    background-color: rgb(255, 221, 191);
    padding-bottom: 9%;
}

section h2{
    padding-top: 6%;
	justify-self: center;
}

/* quiz */

body {
    font-family: 'Poppins', sans-serif;
    background: #344c4f;
    /* display: flex; */
    justify-content: center;
  }
  
  .container {
    justify-self: center;
    width: 51%;
    height: 62%;
    padding: 20px;
    margin-top: 40px;
    background-color: #0a655e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
  }

  .container h1{
    color: white;
    margin-top: .5%;
  }
  
  h1 {
    text-align: center;
  }
  
  .question {
    font-size: 135%;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .options {
    margin-bottom: 20px;
    font-size: 130%;
  }
  
  .option {
    display: block;
    margin-bottom: 10px;
  }
  
  .button {
    padding: 10px 20px;
    background-color: rgb(224, 148, 81);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    margin-right: 10px;
  }

  #submit{
    /* padding: 4%; */
    float:right;
    font-family: Sancreek, serif;
  }

  #showAnswer{
    float: inline-end;
    font-family: Sancreek, serif;
  }

  #retry{
    font-family: Sancreek, serif;
  }
  
  .button:hover {
    padding: 12px 22px;
    background-color: rgb(117 73 52);
    font-size: 16px;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .result {
    color: beige;
    font-size: 268%;
    /* padding-bottom: 4%; */
    text-align: center;
    /* margin-top: 20px; */
    font-weight: bold;
  }

  #result p{
    font-size: 85%;
    margin: 0;
  }
  
  .hide{
    display: none;
  }

  .result img{
    width: 40%;
    height: 8rem;
  }

  input[type="radio"]{
    accent-color: rgb(224, 148, 81);
  }

/*  */

footer{
	font-family: "Maiden Orange", serif;
	text-align: center;
	padding: .3125rem .556%; /*5px*/
}

@media (max-width: 430px)
{
	nav ul li a{
		font-size: 50%;
	}
    body{
        box-shadow: none;
        width: 383px;
    }
	section h2{
        width: 80%;
        margin-bottom: 0;
        text-align: center;
    }
    .container{
        margin: 0;
    }
    #submit{
        margin-left: 20%;
        float: none;
        justify-self: center;
    }
    footer{
        margin: 1%;
    }
}