/*CSS defaults sizing for mobile devices*/
* {
	box-sizing: border-box;
}

body {
	margin:0;
	background-image: url("images/background.png");
	background-repeat: no-repeat;	
	background-size:30%;
	background-position:bottom;
	background-color: rgb(245, 245, 245);"
}

h1,h2,h3 {
	font-family: 'My Soul', cursive;
}

.nav{
	display:flex;
	background-color: black;
	font-family: 'Cormorant Upright', serif;
}
.nav a {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: black;
}
	
.nav a:hover {
  background-color: rgb(138, 135, 135);
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	}

.header{
	background-color:black;
}

.main {
	flex: 2;
	padding:10px;
	font-family: 'Cormorant Upright', serif;
	line-height:1.75em;
	background: rgba(242, 245, 245, 0.8);
}

.side-1{
	flex: 1;
	font-family: 'Reenie Beanie', cursive;
	padding:10px;
}

.side-2{
	flex: 1;
	padding:10px;
	font-family: 'Cormorant Upright', serif;
}

.footer{
	padding:10px;
}

/* Desktops */
@media screen and (max-width: 700px) {
	
.flex-container, .nav {
	flex-direction: column;
}	
	
.side-1{
	order:3;
}

}