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

h2 {
  color: DarkRed;
}

h1 {
  color: Black;
}

body {
    background: black;
    background-image: url("wallpaper.png");     /* red, blue, yellow, etc */
    background-size:cover; 
    background-repeat:   no-repeat;
    font-family: 'Arial', serif;
    color: black;            /* red, blue, yellow, etc */
    font-size: 18px;        /* 0px - 100px and beyond */
    margin-top: 10px;        /* From 0px and upwards   */
    margin: 0;
    text-align: center;
}

#main {
  background: rgba(255, 128, 128, 0.7);
  border: 2px solid;
  border-color:rgba(255, 0, 0, 0.7);
  padding: 0px 20px 20px 20px;
  margin: 10px auto;
  text-align: center;
}

li em {
  color: rebeccapurple;
}

.bold {
  color: darkred;
  font-weight: bold;
}

.container {
  text-align: center; /* Centers the <ul> block in the container */
}

ul {
  display: inline-block; /* Allows the <ul> to be centered by the parent's text-align */
  text-align: left; /* Reverts text alignment for list items back to left */
  padding-left: 0; /* Optional: adjust default padding if needed */
}

.funnel-sans-<uniquifier> {
  font-family: "Funnel Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

#bumper {
    height:113px;
    width: 1009px;
    margin: 10px auto;
}

#bumper img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
}

.image-container img {
    max-width: 100%; /* Ensures the image doesn't exceed the container's width */
    min-width: 100%; /* Ensures the image doesn't exceed the container's width */
    height: auto;    /* Automatically adjusts the height to maintain the aspect ratio */
}

.iframe-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */ 
}

.fullwidth {
  display: grid;
  grid-template-columns: 1fr minmax(0, 90%) 1fr;
}

.maxwidth {
  color: white;
  padding: 10px;
  grid-column: 2;
  text-align: center;
}

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
gap: 6px;
margin: 0 auto;
}

.div1 { grid-area: 1 / 1 / 2 / 2; 
    width: 90%;
}
.div2 { grid-area: 2 / 1 / 3 / 2;
    width: 90%;
}

.div3 { grid-area: 1 / 2 / 4 / 5; 
    width: 100%;
}