@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*#724319
#B16938
#FEEAC7
#CAD182
#800E13
#F7B1B0*/

p{
	color: #724319;
	font-family: Balsamiq Sans;
}

h2 {
	color:#800e13;
	font-family:Emilys Candy;
	font-size:60px;
}

h3 {
	color:#800e13;
	font-family:Emilys Candy;
	font-size:25px;
}

li{
	color: #724319;
	font-family: Balsamiq Sans;
}

a {
	color:#B16938;
}

a:visited {
	color:pink;
}

a:hover {
	color:yellow;
}

ul {
	font-family:Balsamiq Sans;
	padding-top:15px;
	padding-bottom:25px;
	
}

table{
	border-collapse:collapse;
	width:600px;
	font-family:Balsamiq Sans;
	margin:20px;
}

th, td{
	border: 1px solid black;
	padding:20px;
	background:#FEEAC7;
	color:#B16938;
}

th{
	background:#CAD182;
	color:#724319;
}

td{
	text-align: center;
}

#section img{
	border-radius:25px;
}

#header{
	background:tan;
	position:relative;
	width:90%;
	max-width:900px;
	margin:auto;
	padding:10px;
	margin-bottom:10px;
}

#nav{
	background:#CAD182;
	position:relative;
	width:90%;
	max-width:900px;
	margin:auto;
	padding:10px;
	margin-bottom:10px;
}

#title{
	background:tan;
	position:relative;
	width:90%;
	max-width:900px;
	margin:auto;
	padding:10px;
	margin-bottom:10px;
}

#section{
	background:#F7B1B0;
	position:relative;
	width:90%;
	max-width:900px;
	margin:auto;
	padding:10px;
	margin-bottom:10px;
}

#footer{
	background:#CAD182;
	position:relative;
	width:90%;
	max-width:900px;
	margin:auto;
	padding:10px;
	margin-bottom:10px;
}


body{
	background:#FEEAC7;
}

#header h2{
	text-align:center;
}

#nav li{
	display:inline;
	padding-right:60px;
}

#nav a{
	color:#D88180;
}

#nav ul{
	text-align:center;
}

#section a{
	color:#ad2831;
}

#section h1{
	color:#800e13;
}


#header img{
	width:100%;
}

#title h2{
	text-align:center;
}

@media screen and (max-width: 670px) {
	#title{
		display:none;
	}
   }

   .sidebar {
float: right;
width: 32%;
height: auto;
margin-left: auto;
margin-right: auto;
padding:10px;
}

.sidebar-bottom {
display: none;
}

@media screen and (max-width: 670px) {

.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;
}
}

.red{
	padding:10px;
	position:relative;
	max-width:670px;
}

.judgey{
	float:left;
	position:relative;
	width:25%;
	max-width:670px;
	padding:10px;
}

.rat{
	float:left;
	position:relative;
	width:26%;
	max-width:670px;
	padding:10px;
}

.rat2{
	float:right;
	position:relative;
	width:22%;
	max-width:670px;
	padding:5px;
}

.maria{
	float:left;
	position:relative;
	width:22%;
	max-width:500px;
	padding:10px;
	margin:4px;
}

.noelle{
	float:left;
	position:relative;
	width:20%;
	max-width:500px;
	padding:10px;
	margin:4px;
}

.bookstore{
	float:left;
	position:relative;
	width:25%;
	max-width:670px;
	padding:10px;
}

.collection{
	float:right;
	position:relative;
	width:20%;
	max-width:670px;
	padding:10px;
}

.zelda{
	float:right;
	position:relative;
	width:25%;
	max-width:670px;
	padding:10px;
}

.JBQ{
	float:left;
	position:relative;
	width:23%;
	max-width:670px;
	padding:10px;
}

.sisters{
	position:relative;
	width:70%;
	max-width:670px;
	padding:10px;
}

.friends{
	float:right;
	position:relative;
	width:20%;
	max-width:670px;
	padding:10px;
}

.smiling{
	float:right;
	position:relative;
	width:27%;
	max-width:670px;
	padding:10px;
}

.lajada{
	float:left;
	position:relative;
	width:30%;
	max-width:670px;
	padding:10px;
}

.izzy{
	float:left;
	position:relative;
	width:30%;
	max-width:670px;
	padding:10px;
}