header img {
    height: 80px;
    margin-left: 40px;
}
.banner img {
    width:100%
}

body {

padding: 10px;
font-family: sans-serif;
}
main {
    color: white;
}

header {
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    align-items: center;
    box-shadow: 0 0 25px 0 black;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    color:white;
    text-decoration: none;
}
.left{
    display:flex;
    float:left;
}
.right{
    display:flex;
    float:right;
}

.inner_div {
    background-color: whitesmoke;
    padding: 15px;
    border: 2px solid black;
    width: 320px;
    height: 320px;
    align-items: center;
    
}
#div1 {
    text-align: center;
}

#wrapper0 {
    background-color: rgb(224, 224, 224);
    
    
    display: flex;
    justify-content: space-evenly; /* Change this line */
    align-items: center; /* Add this line */
    flex-wrap: wrap;
    margin: 50px 0 0 0px;
}


#wrapper {
    background-color: rgb(224, 224, 224);
    height: 55vh;
    display: flex;
    justify-content: space-evenly; /* Change this line */
    align-items: center; /* Add this line */
    flex-wrap: wrap;
    margin: 50px 0 0 0px;
}

.footer {
    
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #525253;
    color: white;
    text-align: center;
 }

 
 
.container {
    display:flex;
    max-width: 1000px;
    height: 650px;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

* {
    box-sizing: border-box;
  }


  @import "https://unpkg.com/open-props";
  @import "https://unpkg.com/open-props/normalize.min.css";
  
  .media-scroller {
      --_spacer: var(--size-3);
      display: grid;
      gap: var(--spacer);
      grid-auto-flow: column;
      grid-auto-columns: 21%;
      padding: 0 var(--_spacer) var(--_spacer);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
  }
  
  .media-scroller--with-groups {
      /*border: 2px solid hotpink;*/
      grid-auto-columns: 100%;
  
  }
  
  .media-group {
      /*border: 2px solid limegreen;*/
      display: grid;
      gap: var(--_spacer);
      grid-auto-flow: column;
  }
  .media-element {
    display: grid;
    grid-template-rows: min-content;
    gap: var(--_spacer);
    padding: var(--_spacer);
    background: var(--surface-2);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
  }
  
  .media-element > img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  
  }
  
  .snaps-inline {
      scroll-snap-type: inline mandatory;
      scroll-padding-inline: var(--_spacer, 1rem);
  }
  
  .snaps-inline > * {
   scroll-snap-align: start;
  }
  
  
  
  /* generalstyleing*/
  
  .container {
      inline-size: min(100% - 4rem, 70rem);
      margin-inline: auto;
  }
  
  .flow {
      display: grid;
      gap: var(--size-3);
  }
  



/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
  }