* {
  box-sizing: border-box;
}

body{
background: #DED6F7;
background: linear-gradient(30deg,rgba(222, 214, 247, 1) 0%, rgba(238, 214, 247, 1) 50%, rgba(247, 214, 238, 1) 100%);  
color:#23125d;
background-attachment: fixed; 
font-family:Georgia;
}
.body{
   background-image: url("https://images2.imgbox.com/65/eb/2YcCFgwM_o.png");
    background-attachment: fixed; 
}
.all{
  width:80%;
  display:block;
  margin-right:auto;
  margin-left:auto;
}

 /* unvisited link */
a:link {
  color: #49125d;
}

/* visited link */
a:visited {
  color: #49125d;
}

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

/* selected link */
a:active {
  color: #49125d;
} 
/*use for quotes*/
.quote{
  font-size:18px;
  color:#49125d;
  text-align: left;
  line-height:1.5;
}

/*header and subheaders*/
.header{
  padding:40px;
  text-align: center;
  margin-bottom:40px;
}
.headerimg{
  float:left;
  height:320px;
  margin-top:-40px;
}
h1{
  font-size: 70px;
  color:#63187e;
  margin-right:250px;
  margin-left:-50px;
}
h3{
  text-align: right;
  color:#63187e;
}
h2{
  text-align: center;
  font-size: 25px;
  color:#63187e;
}
.sideheader{
  font-size: 22px;
}
.emilys-candy-regular {
  font-family: "Emilys Candy", serif;
  font-weight: 400;
  font-style: normal;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

/*these go around each group of writing in the columns*/
.leftbox{
  background-color:RGBA(255, 255, 255, 0.2);
  border:1px solid RGBA(255, 255, 255, 0.5);
  border-radius:10px;
  padding:20px;
  margin-bottom:20px;
  text-align:left;
  font-size: 16px;
}
.rightbox{
  background-color:RGBA(255, 255, 255, 0.2);
  border:1px solid RGBA(255, 255, 255, 0.5);
  border-radius:10px;
   padding:20px;
   margin-bottom:20px;
   text-align:left;
  font-size: 16px;
}
.middlebox{
  background-color:RGBA(255, 255, 255, 0.25);
  border:1px solid RGBA(255, 255, 255, 0.5);
  border-radius:10px;
  padding:20px;
  margin-bottom:20px;
  text-align: justify;
  text-justify: inter-word;
  font-size: 16px;
  line-height:1.6;

}
/*Used whenever a box is really long instead of a back to top*/
.sticky{
   position: sticky;
  top: 0;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/*footer*/
.footer{
  padding:10px;
  margin-bottom:40px;
  text-align: center;
  font-size:25px;
  color:#23125d;
  display:block;
  margin:auto;
  margin-top:30px;
  font-style: italic;
}
 /* Responsive layout - when the screen is less than 800px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
  .middlebox{
  text-align: left;
  text-justify: none;
  }
.headerimage{
  float:none;
  width:150px;
  margin-top:-25px;
  margin-bottom:-20px;
  display:block;
  margin-right:auto;
  margin-left:auto;
}
h1{
  font-size: 40px;
  margin-right:0px;
  margin-left:0px;
}
h3{
  text-align: center;
}
.sideheader{
  font-size: 25px;
}
.footer{
  width:100%;
  font-size: 20px;
}
.sticky{
 position:relative;
}
}