/* mobile settings */
@media only screen and (max-width: 700px)
{
	.image{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 94.5vw;
	max-height: auto; }
	.imagecaption{
	text-align: center;
	font-style: italic;
	font-size: 1em;
	padding: 10px;
	}
    p{font-size: 1em;}
    h1{font-size: 2.5em;}
    h2{font-size: 2em;}
    h3{font-size: 1.5em;}
    ul{font-size: 1em;}
    ol{font-size: 1em;}
    .content{
    margin-left: 0;
    margin-right: 0vw;
    margin-bottom: 100px;}
    #content {padding: 1vw;}
}
@media only screen and (min-width: 700px) and (max-width: 1300px)
{
	.image{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 60vw;
	max-height: auto; }
	.imagecaption{
	text-align: center;
	font-style: italic;
	font-size: 1em;
	padding: 10px;
	}
	.bottombox{
	width: 10vw;}
    p{font-size: 1.25em;}
    h1{font-size: 2.5em;}
    h2{font-size: 2em;}
    h3{font-size: 1.5em;}
    ul{font-size: 1.25em;}
    ol{font-size: 1.25em;}
    .content{
    margin-left: 0;
    margin-right: 0vw;
    margin-bottom: 100px;}
    #content {padding: 1vw;}
}

/* pc settings */
@media only screen and (min-width: 1300px)
{
	.image{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 45vw;
	max-height: auto; }
	.imagecaption{
	text-align: center;
	font-style: italic;
	font-size: 1.25em;
	padding: 10px;
	}
	.bottombox{
	width: 10vw;}
    p{font-size: 1.5em;}
    h1{font-size: 2.5em;}
    h2{font-size: 2em;}
    h3{font-size: 1.75em;}
    ul{font-size: 1.5em;}
    ol{font-size: 1.5em;}
  .content{
    margin-left: 0;
    margin-right: 20vw;
    margin-bottom: 100px;}
    #content {padding: 1vw;}
}

body {
	background-color: #fcf5e8;
    line-height: 1.5;
}

.image { margin-top: 10px }

.sidebar {
  height: 100%; 
  width: 0; 
  position: fixed; 
  z-index: 1; 
  top: 0;
  left: 0;
  background-color: #f2cb7d; 
  overflow-x: hidden; 
  padding-top: 60px; 
  transition: 0.5s; 
}


.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: black;
  display: block;
  transition: 0.3s;
}


.sidebar a:hover {
  color: white;
}


.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #f2cb7d;
  color: white;
  padding: 8px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #fcecc9;
}

#content {
  transition: margin-left .5s; }

footer {
	background-color: oldlace;
	font-size: 14px;
	text-align: left; }

ul { list-style-position: inside;
color: black;
padding: 0;
list-style-type: disc;}

ol{ list-style-position: inside; 
color: black;
padding: 0;}

li{ margin: 0 0 18px 0;}