body {
  background-color: #061016;
  margin: 0;
  padding: 0;
  font: status-bar;
}

h1 { /* Titles */
  background-color: blue;
  color: aqua;
  font-size: 200%;
  text-align: center;
  border-style: double;
  border-color: navy;
  border-width: 7px;
} 
h2 { /* Links and Buttons */
  color: lightblue;
  text-align: left;
  } 
  
h3 { /* Headings */
  color: aqua;
  }

h4 { /* Sub-Headings, like steps or sum */
  color: lightblue;
} 

h5 { /* Notes and Warnings */
  color: orange;
  }

p { /*paragraphs*/
  color: white;
  } 

a { /*mainly links*/
  text-decoration: none;
  color: white;
  font-style: italic;
} 

h6 { /*Announcements*/
  color: navy;
  font-size: 120%;
  line-height: 1;
  }

summary { /*menu color*/
  color: white;
  list-style-type: none;
  font-size: 23px;
  background-color: navy;
  border-style: solid;
  border-width: 5px;
  border-color: navy;
  padding: 3px;
  margin: 3px;
  width: fit-content;
}

summary:hover {
  color: navy; 
  background-color: lightblue;
  border-style: solid;
  border-width: 5px;
  border-color: navy;
  }

img {
  width: 70%;
  height: 70%;
  Margin: 5px;
  }

@media (min-width: 760px) {
 
  img {width: 20vw;
      height: auto;}
  
  h1 {
    font-size: 30px;
    }
  
  p {
    font-size: 17px;
    }
    
  h2 {
    font-size: 20px;
    }
    
  h3 {
    font-size: 18px;
    }
  
  h5 {
    font-size: 17px;
    }
  
  .gallery {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
    box-sizing: border-box;
    }
  
  .photo {
  display: grid;
  grid-template-areas: 
  'photo-image'
  'photo-description';
  width: 22vw;
  height: auto;
  background-color: black;
  margin: 5px;
  }
  
.photo-image {
  grid-area: photo-image;
  display: block;
  margin: auto;
  border-color: black;
  border-style: solid;
  border-width: 10px;
  }
  
.photo-description {
  grid-area: photo-description;
  text-align: center;
  color: white;
  font-size: 15px;
  }
  
  .home-body {
   display: grid;
   grid-template-columns: 50% 50%;
  }
  
  .will-and-wont {
    width: 50%;
    margin: auto;
    color: white;
    }
  
  .large {
  width: 50vw;
  display: block;
  margin: auto;
  }
  
  .icon {
  width: 50px;
  height: auto;
  }
  
  .menu-item { /*Larger menu text*/
  font-size: 150%;
  }
  
  
  }

@media (max-width: 759px) {
  
  .gallery {
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
    }
  
   .photo {
  display: grid;
  background-color: black;
  width: 80%;
  margin: 10px;
  grid-template-areas: 
  'photo-image'
  'photo-description';
  }
  
.photo-image {
  grid-area: photo-image;
  width: 85%;
  height: auto;
  border-color: black;
  border-style: solid;
  border-width: 10px;
  display: block;
  margin: auto;
  }
  
.photo-description {
  grid-area: photo-description;
  text-align: center;
  color: white;
  font-size: 15px;
}
  
.large {
  margin: auto;
  }
  
.icon {
  width: 40px;
  height: auto;
  }
  
.menu-item { /*Larger menu text*/
  font-size: 120%;
  }
  
  
  
  
  }



.menu-item {
  background-color: navy;
  border-style: inset;
  border-width: 5px;
  border-color: navy;
  padding: 3px;
  margin: 3px;
  width: fit-content;
  }

.menu-item:hover {
  color: navy; 
  background-color: lightblue;
  border-style: inset;
  border-width: 5px;
  border-color: white;
  }

.roomy {
  margin: 7px;
  }

.text-box { /*adds colored box behind words*/
  padding: 1px;
  background-color: navy;
}

.second-box { /*box for commissions status*/
  background-color: aqua;
  text-align: center;
  margin: 10px;
  border-style: solid;
  border-width: 5px; 
  border-color: magenta; 
}

.third-box { /*box for announcements*/
  background-color: lightblue;
  margin: 10px;
  border-style: inset;
  border-width: 5px;
  border-color: white;
  }

.center-text {
  text-align: center;
  }
  
.navy-text {
  color: navy;
  }
  
.socials { /*using for making the socials bigger*/
  font-size: 150%;
  list-style-type: none;
  }

.access { /*For when u wanna restrict access to somewhere on ur website*/
  color: white;
  background-color: magenta;
  font-size: 20px;
  border-color: white;
  }
  
.access:hover {
  color: magenta;
  background-color: white;
  cursor: pointer;
  }
  
.bordered {
  border-style: solid;
  border-width: 7px;
  border-color: black;
  }
  
.service-offer {
  position: relative; 
  width: 70%;
  }
 
.servimage {
  display: block;
  border-style: solid;
  border-width: 7px;
  border-color: black;
  }
 
.overlay {
  position: absolute; 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: #45585c; 
  } 
 
.servtext {
  font-size: 20px;
  color: white;
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
 
.service-offer:hover .overlay {
  opacity:1;
  } 
  
.web-box {
  background-color: #152a28; 
  border-style: inset;
  border-color: #357068;
  border-width: 5px;
  }
  
.button {
  color: magenta;
  font-size: 23px;
  background-color: aqua;
  border-style: inset;
  border-width: 5px;
  border-color: aqua;
  padding: 3px;
  margin: 3px;
  }
  
.button:hover {
  color: magenta; 
  font-size: 23px;
  background-color: lightblue;
  border-style: inset;
  border-width: 5px;
  border-color: white;
  padding: 3px;
  margin: 3px;
  }
  
li {
  margin: 20px;
  }
  
.queue-name {
  color: white;
  border-bottom: dashed; 
  border-color: blue;
  border-width: 4px;
  }
  
.queue-box {
  width: fit-content;
  }

.light {
  color: lightblue; 
  }
  
footer {
  background-color: navy;
  }
  
.footer-box {
  font-size: 120%;
  color: white;
  }
  
.footer-content {
  margin: 7px;
  }
  
.new-menu {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: 1fr;
  justify-content: center;
  }

.magenta-text {
  color: magenta;
  }