.container {
  display: flex;
  
}
/* Allows the items to be side by side*/



.Background {
  padding: 1em;
  background-color: Lavender;
  margin-top: 50px;
  margin-left: -50px;
  position: relative; 
  min-height: 450;
  max-width: 1000px;
   float: left;
  /* Locks the minimum height and max width*/
}

.Side-Background {
  padding: 1em;
  background-color: Lavender;
  margin-top: 100px;
  margin-left: 100px;
  position: relative; 
  min-height: 450px;
  max-width: 500px;
  float: right;
  /* Locks the minimum height and max width */
}



* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0 20px; 
}

header, footer {
    background-color: #FFA07A;
    color: #F0FFF0;
    padding: 1rem;
    text-align: center;
  
}/* Adjusts the look of the header and footer*/


.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 1rem 0;
} /* Sets up the grid in the flexbox*/

.grid-item {
    background-color: #FFFAF0;
    border: 1px solid #ddd;
    padding: 1rem;
    text-align: center;
} /* Adjusts the items in the grid*/

.image {
  max-width: 100%;
  height: auto; 
  display: block;
  margin: 1rem auto;
  object-fit: cover; 
  
}/* Ensures the images stay within the flexbox*/

.image:hover{
  filter: drop-shadow(20px 20px 20px #8FBC8F);
  
}

.LargeText{
  font-family: Monaco;

  
}
.SmallText{
  font-family: Georgia;
  
}

@media screen and (min-width: 600px) {
    .grid-container {
        grid-template-columns: repeat(1, 300px);
      max-width: 800px;
      
    }
} /* Sets up small screen size */

@media screen and (min-width: 1024px) {
    .grid-container {
      grid-template-columns: repeat(3, 300px);
      max-width: 1000px;
     
    }
    body {
        padding: 0 75px; 
    }
}/* Sets up large screen size*/