/* 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." */

html {
   background-color: #923bf5;
   background-image: url("/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;
    border-style: double;
    border-color: black;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/WrestleMania_XXX_panorama.jpg/1200px-WrestleMania_XXX_panorama.jpg?20140428015857);
    font-style: italic;
    color: white;
    width: 100%;
  
}

.button {
  background-color: gray;
  border-style: outset;
  border-color: gray;
  
  
  }
  
.button:hover {
  border-style: inset;
  
  }

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


.button {
  display: flex;
  margin-left: 15px;
  margin-right:15px;
  background-color: gray;
  border-style: outset;
  border-color: gray;
  
  }
  
.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;

}


.meme1 {
  margin-top: 20px;
  }
  

.favorites:hover {
    font-style: italic;
  }
  
  .bottom-banner {
  
    }
    
.headline {
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  border-style: double;
  border-color: black;
  background-image: url("/newsprint_background.jpg");
  border-radius: 25px;
  width: 300px;
  height: 300px;
  
  }
    
  
/*Blog page style
*/


.banner-blog {
  display: flex;
  border-style: double;

  }
  
  
  /*Newsletter page style
*/

.banner-newsletter {
  margin: auto;
  border-style: double;
  width: 900px;
}