body{
  background-image: linear-gradient(#232857, #382357);
  background-color:#170059;
     background-attachment: fixed;
}
.all{
 background-color:#15161b;
 color:white;
 width:75%;
 display: block;
 margin-right:auto;
 margin-left:auto;
 margin-top:-25px;
 margin-bottom:-20px;
 padding-bottom:50px;
}
p{
  line-height:1.6;
}
/*font for title and subtitles*/
.carattere-regular {
  font-family: "Carattere", cursive;
  font-weight: 400;
  font-style: normal;
}
/*font for body*/
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*links*/
a:link {
  color: #d9e6f3;
}
a:visited {
  color: #d9e6f3;
}
a:hover {
  color: #e9e6fc;
  text-decoration: none;
}
a:active {
  color: #d9e6f3;
}
.topbutton{
  font-size:20px;
  text-align: center;
}
.navbar{
  position: sticky;
  top: 0;
}
/*Header*/
.header{
  background: url('https://images2.imgbox.com/80/e9/le3PT6ij_o.jpg') no-repeat bottom;
  background-size: cover;
  background-attachment: fixed;
  min-height:300px;
  margin-top:-70px;
  border-bottom: 2px solid #b6b6b6;
}
h1{
 font-size: 80px;
 text-align:center;
 text-shadow: 0px 0px 20px white;
 padding-top:100px;
 }
.moon{
  float:left;
  margin-top:50px;
  margin-left:70px;
  margin-right:-50px;
}

/*Subheader*/
h2{
  font-size:38px;
}

.header-side{
  font-size:30px;
}
h4{
  font-size:35px;
  margin-bottom:-5px;
  text-align:center;
}
/*Footer*/
.footer{
  padding:40px;
  background: url('https://images2.imgbox.com/80/e9/le3PT6ij_o.jpg') no-repeat bottom;
  background-size: cover;
  background-attachment: fixed;
  margin-bottom:-70px;
  margin-top:40px;
  font-size:18px;
  border-top: 2px solid #b6b6b6;
}
.footerquote{
  font-size:40px;
}
/*Poetry pages*/
.poem{
  text-align: center;
  font-size:17.5px;
}
.poem-info{
  width:80%;
  text-align: center;
  display:block;
  margin-right:auto;
  margin-left:auto;
}

.divider{
  width:400px;
  display:block;
  margin-right:auto;
  margin-left:auto;
  margin-top:30px;
  margin-bottom:-10px;
}


/*Columns*/
.col-container {
  display: table; /* Make the container element behave like a table */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top:-30px;
}

.col {
  display: table-cell; /* Make elements inside the container behave like table cells */
 padding: 20px;
}

.main{
  font-size:16px;
  text-align: justify;
  text-justify: inter-word;
}

.side{
  font-size:15px;
  width:200px;
}
/*if only have one column*/
.single-col{
  width:90%;
  display: block;
  margin-left:auto;
  margin-right:auto;
  font-size:16px;
  text-align: justify;
  text-justify: inter-word;
}
 /* If the browser window is smaller than 600px, make the columns stack on top of each other */
@media only screen and (max-width: 800px) {
  .all{
    width: 100%;
  }
  .header{
    padding-bottom:20px;
    margin-bottom:20px;
  }
h1{
  padding-top:20px;
  font-size:60px;
}
 .moon{
   float:none;
   display:block;
   margin-left:auto;
   margin-right:auto;
   padding-top:70px;
   margin-bottom:-40px;
   width:200px;
 }
  .col {
    display: block;
    padding:10px;
    padding-left:15px;
    text-align:left;
  }
.header-side{
  font-size:35px;
  text-align: left;
}
.side{
  font-size:16px;
    max-width:100%;

} 
.navbar{
  position: static;
}
.single-col{
width:100%;
text-align: left;
padding-left:5px;
}
.poem-info{
  width: 100%;
}
.poem{
  font-size: 16px;
}
.divider{
  width:250px;
}
.footer{
  margin-bottom:-70px;
  margin-top:20px;
  font-size:20px;
}
.footerquote{
  font-size:30px;
}
}