/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
box-sizing: border-box;

}

   html {
   background-color: #923bf5;
   background-image: url("Images/chain_link_fence.png");
   background-size: cover;
  }

body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: Verdana;
  color: black;
  margin: 0 auto; /*Zero sets top, bottom, left, and right margins to 0. Auto means the browser decides the margin*/
  max-width: 1200px;
  background-color: #262626;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231b1b1b' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  padding: 15px;
  border-radius: 25px;
  
}

.banner {
    display: flex;
    align-items: center; /*centers content on the y axis. Dependent on display: flex.*/
    justify-content: center; /*centers content on the x axis. Dependent on display: flex.*/
    text-shadow: 3px 3px 0px black;
    background-image: url(Images/wrestlemania_xxx_panorama.jpg);
    font-style: italic;
    color: white;
    width: 100%;
  
}

  

.links {
  display: flex;
  border: double;
  background: #6e9ce6;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 99%;
  
}


.button {
  display: flex;
  width: fit-content;
  margin-left: 15px;
  margin-right:15px;
  background-color: gray;
  border-style: outset;
  border-color: gray;
  padding-right: 2px;
  
  
  }
  
.button:hover {
  border-style: inset;
  
  }


.intro {
  border-style: double;
  border-color: black;
  padding-left: 5px;
  padding-right: 5px;
  background: #c59df2;
  margin-top: 10px;
  width: 99%;
  overflow-y: auto;
  height: 200px;
  border-radius: 25px;
  
}

.line1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  }

.favorites {
    border-style: double;
    border-color: black;
    background: #c59df2;
    width: 250px;
    height: 300px;
    border-radius: 25px;
    justify-content: flex-start;
    overflow-y: auto;

}


.meme1 {
  margin-top: 20px;
  }
  
  
 .bottom-banner {
  color: white; /*I just put this because I don't have anything for this segment yet and I'm tired of getting a warning flag*/
    }
    
.headline-home {
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  border-style: double;
  border-color: black;
  background-image: url("Images/white_paper_background.webp");
  border-radius: 25px;
  width: 300px;
  height: 150px;
  overflow-y:auto;
  
  }

  .headline-home:hover {
    font-style:italic;

  }
    
  
/*Blog page style
*/


.banner-blog {
  display: flex;
  width: 100%;
  justify-content: center;
  border-style: double;
  color: white;

  }

  .blog-body {
    font-family: times;
    color: white;
    background: #0f0f0f;
    border-radius: 25px;
    border-style:double;
    padding: 10px; /* Not defining the padding direction applies it to all sides. To specify for each, format: padding: xpx xpx xpx xpx. Order: Top, right, left, bottom.*/
    border-color: white;
    width: 100%;


  }

  .blog-entries {
    overflow-y:auto;

  }

  
  
  
  /*Newsletter page style
*/

.banner-newsletter {
  display: flex;
  justify-content: center;
  color: black;
  background-image: url("Images/white_paper_background.webp");
  width: 100%;
  border: black;
  border-style: double;
  font-family: courier;
  
}

.directory {
  display: flex;
  width:100%;

}

.headline {
  font-family: courier;
  width: 100%;
  text-align: center;
}

.oldnews {
  background-image: url("Images/newsprint_background.jpg");
  border-style: double;
  width: 15%;
  font-family: garamond;
  border-radius: 20px;
  padding-left: 5px;

}

.letter_body {
  display: flex;
  flex-wrap: wrap;
  background-image: url("Images/white_paper_background.webp");
  width: 80%;
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Times New Roman', Times, serif;
  text-align: left;
  border-radius: 25px;

    }

.segmenta {
height: 600px;
overflow-y:auto;

}

.segmentb {
width: 50%;
text-align: center;


}

.segmentc {
width: 50%;

}
  
  
  
  
  
  /*Style for Under-Construction*/
  
  .construction-message {
    display: flex;
    border-color: white;
    border-style: double;
    width:100%;
    
    }