*{
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   line-height: 1.5;
   color: #333;
   background: lightgray;
}

p {
   padding: 2vw 0;
}

#main-header {
   background-color: rgb(45, 230, 230);
   font-size: 1.6vw;
   line-height: 3vw;
}

.headercontainer {
   width: 60%;
   margin: 0;
   overflow: hidden;
   justify-self: left;
}

#navbar {
   background-color: #333;
   color: #fff;
}

#navbar ul {
   padding: 0;
   list-style: none;
}

#navbar li {
   display: inline;
}

#navbar a {
   color: #fff;
   text-decoration: none;
   font-size: 1.8vw;
   padding-right: 15px;
}



.container {
   width: 80%;
   margin: auto;
   overflow: hidden;
}

#main {
   background-image: url(../images/Ripples.jpg);
}
.grid-container {
   max-width: 960px;
   margin: 10px auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
   /* grid-auto-rows: minmax(200px auto); */
}

.grid-item {
   background: #eee;
   min-width: 200px;
   border: #333;
   border-radius: 3vw;
   padding: 2vw;

}

.grid-item:nth-of-type(1) {
   grid-row: 1 / 3;
   grid-column: 1 / 3;
}

#item1photo {
   width: 100%;
   height: 100%;
   border-radius: 2vw;
}

.grid-item:nth-of-type(2) {
   justify-items: center;
}

.grid-item:nth-of-type(4) {
   grid-column: 1 / 3;
}

.grid-item:nth-of-type(6) {
   grid-column: 1 / 3;
}

@media (max-width: 500px) {
   .grid-container {
      grid-template-columns: 1fr;
   }
}

footer {
   width: 100%;
   background-color: #333;
   color: #fff;
   font-size: 1.5vw;
   justify-items: center;
}