/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
 background-image: url('pics/flowers.jpg');
 background-size: 250px;
  color: black;
  font-family: "Roboto Serif", "Libre Baskerville", serif;
}
 
@media screen and (orientation: portrait){
  section {
    margin: 20px 5% 20px 5%;
  }
}

@media screen and (max-width: 900px){
  section {
    margin: 20px 5% 20px 5%;
  }
}

/* Ensure proper sizing */
* {
  box-sizing: border-box;
}

/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;
}

.side {
  flex: 30%; 
  padding: 0 11% 0 1.5%;
  height:100%;
}

.main {
  flex: 70%; 
  padding: 0 1.5% 0 11%
}

.Textwrap {
  float: left;
margin: 10px;
}
/* class=Textwrap */

.Textwrap2 {
  float: right;
margin: 10px;
}

.Textwrap3 {
  float: right;
margin: -15px;
}

header {
  background-color: #FFFAE5;
  border-style: solid;
  border-width: 3px;
  border-color: #E6E0C5;
  padding: 0 15px 20px 15px;
  margin: 50px 11% 20px 11%;
  text-align: center;
  border-radius: 2px;
}

section {
  background-color: #FFFAE5;
  border-style: solid;
  border-width: 3px;
  border-color: #E6E0C5;
  padding: 5px 15px 5px 15px;
  margin: 20px 0 20px 0;
  border-radius: 2px;
}

h1 {
  text-align: center;
}

hr {
  height:1px;
  color:black;
  background-color:black
}

 /* unvisited link */
a:link {
  color: #A1210D;
}

/* visited link */
a:visited {
  color: #A10D43;
}

/* mouse over link */
a:hover {
  color: #C12710;
}

/* selected link */
a:active {
  color: #EC3013;
} 

button {
  background-color: #FFFAE5;
  margin: 0 5% 0 5%;
  border-style: none;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
/*Remember: If CSS doesn't save, try viewing then empty the cache*/