nav {background-color: white; position: fixed; left:-10;top: 0; width: 100%;z-index:10;  padding: 0px 5% 0px 5%;}
nav .div {display: flex; flex-wrap: nowrap;}
footer {background-image:none;background-color: white; position:relative; bottom:0; width: 100%;z-index:10;}
footer p {padding: 50px 20px 80px 20px;}
	body {background-image: url("images/sea.webp"); background-size:100% 100%; background-attachment: fixed; background-position: center; padding: 60px 0px; margin:0px 0px; font-family:alice;}
	.box {background: radial-gradient(ellipse at center, #fffffd 0%, #F0EFE7 100%); margin:120px auto; padding: 10px 50px 80px 120px; border: 3px solid #3a211c; border-radius: 6px;}
	h1 {color:#6f4a3a; font-size:300%; text-align: center; margin: 40px auto 30px;font-family:metamorphous;text-transform: uppercase;}
	h2 {color:#8c5e3a; font-size:180%; margin: 120px auto 20px; font-family:metamorphous;text-transform: uppercase;}
	h3 {color:#8c5e3a; font-size:150%; margin: 60px auto 10px; font-family:metamorphous;}
	h4 {color:#3a211c; font-size:125%;  margin: 40px auto 0px; font-family:metamorphous;}
	p {color:black;text-align:justify;line-height:1.3}
	.sp {color:white;text-align:center; font-size:24px;margin:0px 0px 0px 0px; padding:20px 10%;line-height:1.5;}
	a {color:#8c5e3a; text-decoration:none;}
	.note {
	text-align:center;
    border-radius: 12px;
	color:#3a211c;
	background-color: #dec4a9;
	border: 3px solid #8c5e3a;
	width: 80%;
	margin: 40px auto;
	padding: 30px 40px 20px 40px;
	}
    .note > h4 {color:#6f4a3a; padding:5px 0px 10px; margin:0px;}
	.desc {
	text-align:justify;
	color: #605e51;
	line-height:1.6;
	background-color: white;
	border: 1px solid #8b7e71;
	border-radius: 3px;
	width: 70%;
	margin: 40px auto;
	padding: 15px 40px;
	}
	.highlight {
	text-align:justify;
	color: black;
	background-color: #ead8c9;
	border: 1px solid #454340;
	border-radius: 3px;
	width: 80%;
	margin: 30px auto 10px;
	padding: 20px 40px 25px;
	}
   .highlight h4 {margin: 10px 30px 0px 0px;}

table.big {
	table-layout: fixed;
	width:100%;
  	border: 2px solid #3a211c;
  	border-collapse: collapse;
	margin: 40px 0px;
	color:#ead8c9; 
	text-align:center;
	padding:20px 0px;
	}
	th.big {background-color: #8c5e3a;}


tr:nth-child(odd) {
  background-color: #dec4a9;
}
tr:nth-child(even) {
  background-color: #ead8c9;
}
th {
padding: 10px 25px;	
background-color: #8c5e3a;
color:white;
}
td {
padding: 15px 20px;	
color:black; 
}
td.mark {
	background-color: #8c5e3a;
	color: white;
	border: 1px solid #421b2a;
}

table.small {
table-layout: fixed;
margin:20px auto;
padding: 0px 0px;
font-size:90%;
border: 2px solid #421b2a;
border-collapse: collapse;
background-color: #8a6a75;
color:white;
}

.options {
width:100%;
padding:30px 0px;
margin:auto;
}

li {color:black;line-height:1.5;}

a.hd {
  padding:10px 7.5%;
  display:flex;
  flex-wrap:nowrap;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition-duration: 0.4s;
  cursor: pointer;
}

a.hd:hover {
  color: black;
}

a.tb {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #69374a;
  color: white;
  border: none;
}
a.tb:hover {
  background-color: white;
  color: #421e2b;
}

a.light {
  padding: 15px 30px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #d6c9b2;
  color: #0f0b12;
  border: none;
}
a.light:hover {
  background-color: white;
  color: #421e2b;
}

a.button {
  padding: 12px 25px;
  margin: 10px 10px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #8c5e3a;
  color: white;
  border: 3px solid #8c5e3a;
}

a.button:hover {
  background-color: white;
  color: #8c5e3a;
  border: 3px solid #dec4a9;
}

a.buy {
  padding: 20px 30px;
  margin: 10px;
  border-radius: 40px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 24px;
  transition-duration: 0.5s;
  cursor: pointer;
  background-color: #6f4a3a;
  color: white;
  border: none;
}

a.buy:hover {
  background-color: #ead8c9;
  color: #3a211c;
}


a.small {
  padding: 10px 15px;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #6f4a3a;
  color: white;
  border: none;
}

a.small:hover {
  background-color: white;
  color: #421e2b;
}

.sidebar {
  height:70%;
  padding: 70px 30px;
  width: 340px;
  position: fixed;
  overflow: auto;
  z-index:10;
}

.sidebar h3{text-align:center;}
/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 10px 10%;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #dec4a9;
  color: #3a211c;
  border-radius:6px;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  padding: 10px 5%;
}

@media screen and (min-width: 1541px) {
.content {margin-left:350px; margin-top:0px;}
.box {width:70%; }
}
@media screen and (max-width: 1540px) {
	.sidebar {
	width:310px;}
	.content {margin-left:320px; margin-top:50px;}
}	
/* make the sidebar into a topbar */
@media screen and (max-width: 1000px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: fixed;
	top:60px;
	left:0px;
    padding: 10px 10px 10px 10px;
  background-color: white;	
  }
  .sidebar a {float: left;}
  .content {margin-left: 0; margin-right: 0px; margin-top:150px;}
}

@media screen and (max-width: 800px){
   p, td, th, h4 {font-size: 88%;}
   body {background-color: #F0EFE7;}
   .box {width:100%; margin-top:50px;}
   h3 {font-size: 96%;}
   a.button {font-size: 16px;}
   .highlight {font-size: 88%;}
   h2 {font-size:100%; padding: 0px 0px; margin 10px 10px;}
   .sp {font-size:20px; padding:20px 40px;}}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
  .content {margin-left: 0;margin-top:350px;}
}

.statblock {
    font-size: 88%;
    line-height: 1.2em;
    display: inline-block;
    vertical-align: top;
    width: 300px;
    background: white;
    padding: 10px 3% 20px;
    margin: 20px 20px;
	border: 1px solid #8b7e71;
	border-radius: 3px;
}

.statblock h3 {
	text-transform: uppercase;
	margin: 25px auto;
	font-size:20px;
	text-align: center;
	color: black;
}
.statblock p {
  	padding 0px 20px;
    text-align: left;
	line-height:1.3;
}

.statblock table {
    text-align: center;
    color: black;
  	margin-left: auto;
  	margin-right: auto;
	border: none;
}
.statblock td {
	background-color: #dec4a9;
    font-size: 10px;
}
.statblock th {
	background-color: white;
	color: black;
    font-size: 10px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
}