body{
  background-color: #d8dbe2;
  font-family: 'Zilla Slab', serif;
  margin: 0px;
  min-width: 100px;
}
#title{
  font-size: 90px;
  color: black;
  text-align: center;
  background-color: #d8dbe2;
}
#button1{
  background-color: #f8e8b5;
}
#button2{
  background-color: #f7a1a1;
}
#button3{
  background-color: #d9e5d6;
}
#button4{
  background-color: #f4dd90;
}
button{
  font-family: 'Zilla Slab', serif;
  padding: 10px 10px;
  font-size: 15px;
  outline: none;
  border: none;
}
button:hover{
  cursor: pointer;
}
.header{
  /* position: fixed; */
  display: flex;
  background-color: #a9bcd0;
  justify-content: space-between;
  justify-content: left;
  flex-wrap: wrap;
}

/* index.html */
.contents{
  padding-left: 5%;
  padding-right: 5%;
}
img{
  display: flex;
  width: 300px;
  border-radius: 25px;
  height: auto;
}
.text{
  margin-left: 20px;
  margin-right: 10px;
  max-width: 900px;
}
.onlytext{
  margin-left: 20px;
  margin-right: 10px;
  max-width: 1200px;
}
.post, .oct31post{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  font-size: 20px;
  line-height: 30px;
  background-color: #a9bcd0;
  padding:10px;
  margin-bottom: 15px;
  border-radius: 25px;
}
/* more than 1200px */
@media screen and (min-width: 1200px){
  .oct31post{
    display: flex;
    flex-wrap: nowrap;
  }
}
/* more than 800px */
@media screen and (min-width: 800px){
  .post, #sam, #jenna{
    display: flex;
    flex-wrap: nowrap;
  }
  .noflex, .contactNoFlex{
    display: flex;
  }
}
@media screen and (max-width: 800px) and (min-width: 600px){
  #october31pt3, #october31pt4{
    margin-left: 7px;
  }
}
/* less than 800px */
@media screen and (max-width: 800px){
  .oct31post{
    display: flex;
  }
  .text, img{
    width: 100%;
  }
  #sampic, #jennapic{
    width: 50%;
    text-align: center;
  }
  .noflex, .contactNoFlex{
    display: block;
  }
}
/* multiple picture posts */
@media screen and (max-width: 1200px){
  .noflex{
    display: block;
  }
}
#date{
  font-size: 30px;
}
#june29pt2, #april19, #june1pt1, #july3, #july2, #july9pt1, #july9pt2, #july10, #july10pt2, #july14, #july14pt2, #july15, #july15pt2, #july16, #july16pt2, #july17, #july17pt2, #july18, #july18pt2, #july24, #july24pt2, #july31, #july31pt2, #august5pt2, #august5, #august10, #august10pt2, #august29, #august29pt2, #september14, #september14pt2, #september17, #september17pt2, #october31pt1, #october31pt2, #october31pt3, #october31pt4{
  margin-bottom: 7px;
}
#june1pt1, #june29pt2, #july3, #july2, #july9pt1, #july9pt2, #july10, #july10pt2, #july14, #july14pt2, #july15, #july15pt2, #july16, #july16pt2, #july17, #july17pt2, #july18, #july18pt2, #july24, #july24pt2, #july31, #july31pt2, #august5, #august5pt2, #august10, #august10pt2, #august29, #august29pt2, #september14, #september14pt2, #september17, #september17pt2, #october31pt1, #october31pt2, #october31pt3, #october31pt4{
  margin-right: 7px;
}
a{
  color: black;
}

/* about.html */
.person{
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #a9bcd0;
  padding-bottom: 3%;
  padding-top: 3%;
}
.aboutdescription{
  font-size: 20px;
  color: black;
  margin-left: 20px;
  margin-right: 40px;
  line-height: 33px;
  max-width: 900px;
}
#hiimname{
  font-size: 38px;
}
#sam{
  background-color: #d8dbe2;
}
#sampic, #jennapic{
  text-align: left;
  height: auto;
  margin-right: 5%;
  border-radius: 30%;
  border:6px double;
  margin-left: 2%;
  margin-bottom: 5%;
  margin-top: 4%;
}
#sampic{
  border-color: #a9bcd0;
}
#jennapic{
  border-color: #d8dbe2;
}

/* theme.html */
.themebody, .contactbody{
  background-color: #a9bcd0;
  padding-top: 3%;
  padding: bottom: 3%;
  margin-bottom: 5%;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 25px;
}
#themedescription, #contactdescription{
  margin-left: 5%;
  margin-right: 5%;
  line-height: 40px;
  font-size: 20px;
}
form{
  font-size: 20px;
  margin-right: 5%;
  margin-left: 5%;
  padding-top: 10px;
  padding-bottom: 5%;
}
#theme{
  width: 85%;
  height: 30%;
  margin-right: 10%;
  padding: 10px;
}

input, textarea{
  font-family: 'Zilla Slab', serif;
  font-size: 15px;
  border: none;
  outline: none;
  border-radius: 12px;
  padding: 5px;
  color: black;
  background-color: #d8dbe2;
}
::placeholder{
  color: black;
  font-size: 15px;
}
input[type = submit]:hover, .hide_file + label:hover{
  cursor: pointer;
  background-color: white;
}
.hide_file + label{
  font-size: 15px;
  padding: 5px;
  border-radius: 12px;
  background-color: #d8dbe2;
}
.hide_file{
  width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

/* contact.html */
.contactbody{
  display: flex;
  justify-content: center;
}
#contactform{
  margin-right: 5%;
  align-items: center;
}

/* submission.html */
.submissionBody{
  background-color: #a9bcd0;
  font-size: 40px;
  border-radius: 12px;
  padding: 3%;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 25vh;
  margin-bottom: 25 vh;
  text-align: center;
  justify-content: center;
  align-items: center;
}
#submission{
  font-size: 20px;
}