@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Dancing+Script:wght@400..700&family=Quicksand:wght@300..700&display=swap');

/*main text*/
p{
	color: #211E1E;
	font-family:Quicksand;
}

/*main headers*/
h1{
	color: #d9b3be;
	font-family:Dancing Script;
	text-align: center;
}

h3{
	color: #8fa182;
	font-family:Cormorant Garamond;
}

/*lists*/
ul{
	color:#211E1E;
	font-family:Quicksand;
}

/*all tables*/
table{
	border-collapse:2px dotted lightpink;
	width: 550px;
	color:#211E1E;
	font-family:Quicksand;
	
}

/*table borders*/
th,td{
	border:2px dotted lightpink;
	padding: 20px;
}

/*table titles*/
th{
	background:#b7c6ae;
	font-family:Cormorant Garamond;
}
/*table text*/
td{
	background: #ffff;
	font-family:Quicksand;
}

/*links*/
a{
	color:#d9b3be;
}
a:visited{
	color:#a99589;
}
a:hover{
	color:#f8f4ef;
}
/*^^^^*/


#header{
	background: #f4dce2;
	position: relative;
	width: 90%;
	margin:auto;
	max-width: 900px;
	margin-bottom:10px;
}

#section{
	background: #f4dce2;
	position: relative;
	width: 90%;
	margin:auto;
	max-width: 900px;
	margin-bottom:10px;
	padding: 10px;
}

#nav{
	background: #f4dce2;
	position: relative;
	width: 90%;
	margin:auto;
	max-width: 900px;
	margin-bottom:10px;
	padding: 10px;
}

#footer{
	background: #f4dce2;
	position: relative;
	width: 90%;
	margin:auto;
	max-width: 900px;
	margin-bottom:10px;
	padding: 10px;
}

/*all other background8*/
.pretty{
	background: #FFF5F8;
}

#footer p{ 
	text-align: center;
 }

#nav li{
	display: inline;
	padding-right: 30px
}

#nav ul{
	text-align: center;
}

/* index background*/
body{
	background: #f8f4ef;
}

.fish{ margin-bottom: 10px }

img{ margin:auto; display:block; }

#header image{
	width: 100%;
}

@media screen and (max-width: 480px) {
	#titles{
		display: none;
	}
}
.sidebar {
float: right;
width: 30%;
height: auto;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}

.sidebar-bottom {
display: none;
}


@media screen and (max-width: 500px) {

.sidebar {
display: none;
}

.sidebar-bottom {
display: block;
position: relative;
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
border: 1px solid white;
background: white;
}
}

@media screen and (max-width: 70px){
	#nav li {
		font-size: 10px;
	}
}