/* styles.css */
/* General Style rules */
body{
background-color: bisque;
font-family: 'Times New Roman', Times, serif;
}

main {
  width: 960px;
  margin: auto;
  margin-top: 30px;
}

header nav{
  background-color: #99c0c1;
  width: 900px;
  height: 100px;
  margin: auto;
  margin-top: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  border-radius: 20px;
}

h1{
  font-family: 'Redressed', cursive;
  font-size: 3em;
  border: 3px solid #ebe773;
  border-radius: 20px;
  padding: 7px;
  margin-top: 15px;
  margin-left: 10px;
  display: inline-block;
}

h6 {
  font-weight: bold;
  margin-bottom: 5px;
}

h3 {
  margin-bottom: 5px;
}

nav ul {
  float: right;
}
#starting{
  height: 500px;
  display:block;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  border-radius: 10px;
  margin-left: auto;
  margin-right:auto;
  margin-top: 30px;
}
div {
  height: 200px;
  background-color: #99c0c1;
  width: 500px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  border-radius: 10px;
  margin: auto;
  margin-top: 200px;
  font-size: 2em;
  text-decoration: none;
}
div h4{
  display:block;
}
div a:hover{
  color: rgb(117, 2, 248);
  transition: 0.3s;
}
#plane {
  position: absolute;
  top: 0px;
  right:0px;
  height:300px;
  opacity: 1;
}
div a{
  display: inline-block;
  margin-top: 50px;
  background-color: white;
  padding: 10px;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  border-radius: 10px;
}
nav li {
  display: inline-block;
}

nav li:nth-child(:first) {
  margin-top: 5px;
  margin-left: 5px;
}

nav li:not(:first-child) {
  margin-right: 15px;
  height: 100px;
  width: 125px;
}

nav li:nth-child(2) {
  margin-right: 0;
}

nav a{
  color: white;
  text-decoration: none;
  line-height: 100px;
  display: block;
  text-align: center;
}

#game-container{
  background-color: #91d291;
  height: 600px;
  width: 900px;
  margin:auto;
  margin-top: 30px;
  border-radius: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  position: relative;
  overflow: hidden;
}

#question-box {
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: rgba(255, 255, 255, .70);
  padding: 10px;
  width: 400px;
  border-radius: 10px;
}

#question-box label {
  display: block;
  margin-top: 3px;
}

#question-box input {
  float: left;
}

#question-box button {
  float: right;
  margin-top: 3px;
}

#luggage-counter{
  margin-bottom: 0px;
    display: inline-block;
    margin-top: 5px;
}

#game-container h2{
  font-size: 2em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 560px;
  text-align: center;
  border: 1px solid black;
  background-image: linear-gradient(#ebe773, #d08c8c);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  border-radius: 10px;
}

#game-container h2:hover {
  background-image: linear-gradient( #d08c8c, #ebe773);
}

.back-images{
  height: 600px;
  width: 900px;
}

.corner-images {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

#foot {
  background-color: #d08c8c;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 15px;
  width: 900px;
  border-radius: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  padding: 5px;
}

footer section {
  width: 900px;
  margin: 5px;
}

/* these styles affect photo-cred.html */

.photo-cred {
  width: 900px;
  background-color: #91d291;
  border-radius: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  padding: 10px;
}

.photo-cred p {
  font-size: 21px;
  font-weight: bold;
}

.photo-cred li:first-child {
  font-size: 18px;
  margin-top: 10px;
}

.photo-cred li:not(:first-child) {
  font-size: 18px;
  margin-top: 5px;
}

.photo-cred a {
  text-decoration: none;
}

.photo-cred a:link {
  color: #444;
}

.photo-cred a:visited {
  color: #444;
}

.photo-cred a:hover {
  color: rgb(117, 2, 248);
  transition: 0.5s;
}

/* these styles affect the high score page */

#leader-main {
  width: 900px;
  margin: auto;
  margin-top: 30px;
  border-radius: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .48);
  background-color: #d08c8c;
}

#leader-name {
  list-style: decimal inside;
  width: 300px;
  display: inline-block;
  margin-top: 50px;
  margin-left: 150px;
  margin-bottom: 50px;
  line-height: 35px;
  font-size: 25px;
  font-weight: bold;
}

#leader-name li {
  font-weight: normal;
}

#leader-board {
  width: 300px;
  display: inline-block;
  line-height: 35px;
  font-size: 25px;
  font-weight: bold;
}

#leader-board li {
  font-weight: normal;
}