* {
  box-sizing: border-box;
}

body{
  background-color:white;
  background: url('https://starfarersanctum.neocities.org/webbg.jpg');
  background-attachment: fixed;
}

.all{
  background-color:#6c6c6c;
  width:80%;
  display:block;
  margin: auto;
  margin-top:-75px;
  margin-bottom:50px;
  padding-right:20px;
  padding-left:20px;
  padding-bottom:40px;
  font-family: helvetica;
  border-top: 2px solid #b5dceb;
  border-right: 2px solid #f3eeb8;
  border-bottom: 2px solid #a7e4c5;
  border-left: 2px solid #eccbdc;
  border-radius:10px;
  outline: 2px solid black;
  box-shadow: 10px 15px rgba(1, 1, 1, 0.5);
}

h1{
  font-size:70px;
font-family:"Bebas Neue";
}

.header{
   width:80%;
  display:block;
  margin:auto;
  font-family:helvetica;
}

h2{
  font-family:"Bebas Neue";
  font-size:40px;
  margin:-20px;
  margin-bottom:0;
  padding:20px;
  padding-bottom:0px;
  border-bottom:3px dotted black;
}
.headerside{
  font-size:35px;
}

a:link {color:#6c6c6c;}
a:visited {color:#6c6c6c;}
a:hover {color:#898989;}

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

.right {
  width: 22%;
}
.middle {
  width: 60%;
}
.left {
  width: 18%;
}
.section{
     background-color:#e3e3e3;
     border-radius:10px;
     padding:20px;
     padding-top:5px;
     margin-top:20px;
     font-size:18px;
     line-height: 1.6;
  border: 2px solid black;
  box-shadow: 5px 7px rgba(1, 1, 1, 0.5);
  }

.bodytext{
  text-align:justify;
  text-justify:inter-word;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

 /* 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%;
  }

h1{
 font-size:45px; 
 text-align:center;
 margin-top:20px;
}
h2{
  text-align:center;
}
.all{
width:100%;
margin-top:0;
}
.bodytext{
text-align:left;
text-justify:none;
}
}