* {
  box-sizing: border-box;
}

body{
   background: radial-gradient(circle,  #071834 0%, #041024 100%); 
  background-color:#041024;
}
.all{
  width:88%;
  display:block;
  margin-right:auto;
  margin-left:auto;
}

p{

}
 /* unvisited link */
a:link {
  color: #66ffff;
}

/* visited link */
a:visited {
  color: #66ffff;
}

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

/* selected link */
a:active {
  color: #66ffff;
} 
/*use for quotes*/
.quote{
  font-size:18px;
  color:#18fdf6;
  text-align: left;
  line-height:1.5;
}
.update{/*use on update subheader and to mark out new sections*/
 color:#f07ef7;
text-shadow: 0 0 5px #f291f8,0 0 10px #ff8cfc;
}

/*Fonts*/

/*Body*/.montserrat-alternates-regular {
  font-family: "Montserrat Alternates", serif;
  font-weight: 400;
  font-style: normal;
}
/*Subheaders*/.montserrat-alternates-semibold {
  font-family: "Montserrat Alternates", serif;
  font-weight: 600;
  font-style: normal;
}
/*Header*/
.montserrat-alternates-extrabold {
  font-family: "Montserrat Alternates", serif;
  font-weight: 800;
  font-style: normal;
}

/*header and subheaders*/
.header{
  background: radial-gradient(circle, #09306b 0%, #03203e 100%); 
  background-color:#03203e;
  color:#18fdf6;
  padding:40px;
  text-align: center;
  text-shadow: 0 0 5px #18fdf6,0 0 10px #8dfefb;
  margin-bottom:40px;
}
.headerimage{
  float:left;
  width:275px;
  margin-top:-25px;
  margin-right:-70px;
  margin-left:50px;
}
h1{
  font-size: 70px;
  margin-right:170px;
  margin-left:-60px;
}
h3{
  text-align: right;
}
h2{
  text-align: center;
  color:#18fdf6;
  text-shadow: 0 0 3px #18fdf6,0 0 8px #8dfefb;
  font-size: 25px;
}
.sideheader{
  font-size: 22px;
}
/*the four borders names reference the TEAL #3fc3d8 border color*/
.topright{
  box-shadow: 0 0 10px #105783,0 0 15px #14458d;
  border-top:4px solid #3fc3d8;
  border-right:3px solid #3fc3d8;
  border-bottom:2px solid #116eef;
  border-left:3px solid #116eef;
  border-radius:60px;
}
.topleft{
  box-shadow: 0 0 10px #105783,0 0 15px #14458d;
  border-top:3px solid #3fc3d8;
  border-right:2px solid #116eef;
  border-bottom:3px solid #116eef;
  border-left:4px solid #3fc3d8;
  border-radius:60px;
}
.bottomright{
  box-shadow: 0 0 10px #105783,0 0 15px #14458d;
  border-top:3px solid #116eef;
  border-right:4px solid #3fc3d8;
  border-bottom:3px solid #3fc3d8;
  border-left:2px solid #116eef;
  border-radius:60px;
}
.bottomleft{
  box-shadow: 0 0 10px #105783,0 0 15px #14458d;
  border-top:2px solid #116eef;
  border-right:3px solid #116eef;
  border-bottom:4px solid #3fc3d8;
  border-left:3px solid #3fc3d8;
  border-radius:60px;
}
/* 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-image: linear-gradient(to left, #03203e, #09306b);
  background-color:#03203e;
  padding:20px;
  margin-bottom:20px;
  text-align:left;
  color:#f0fdfd;
  font-size: 17px;
}
.rightbox{
   background-image: linear-gradient(to right, #03203e, #09306b);
   background-color:#03203e;
   padding:20px;
   margin-bottom:20px;
   text-align:left;
  color:#f0fdfd;
  font-size: 17px;
}
.middlebox{
  background-color:#03203e;
  padding:20px;
  margin-bottom:20px;
  text-align: justify;
  text-justify: inter-word;
  color:#f0fdfd;
  font-size: 17px;
  line-height:1.5;

}
/*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{
  background: radial-gradient(circle, #09306b 0%, #03203e 100%); 
  background-color:#03203e;
  padding:10px;
  margin-bottom:40px;
  text-align: center;
  font-size:25px;
  color:#18fdf6;
  width:90%;
  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;
}
}