{
    margin: 0;
    padding: 0;
}
body {
    background-color: yellow;}
.banner{
    font-family: sans-serif;
    position: relative;
  text-align: center;
  color: #FFF000;
}
.opening{
    font-family: sans-serif;
    position: relative;
  text-align: center;
  color: green;
      text-align: center;
  letter-spacing: 5px;
}


.banner-text{
  font-family: sans-serif;
  font-size: 1.7vw;
  text-align: justify;
  letter-spacing: 13px;
  line-height: 1.5;
  word-spacing: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.stuckbar {
    position: -webkit-sticky;
	position: sticky;
	bottom: 0;
}
#navbar {
  text-align: center;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  background-color: #187654;
  position: fixed;
  bottom: 0;
  width: 100%;

}
#navbar li {
  float: left;
  margin: .05% 12%;
    
    
    
    
     font-family: sans-serif;
  letter-spacing: 5px;
  display: block;
  color: #fff000;
  text-align: center;
  padding: 0 0;
  text-decoration: none;
}
#navbar a {
  font-family: sans-serif;
  letter-spacing: 5px;
  display: block;
  color: #fff000;
  text-align: center;
  padding: 0 0;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #067899;
}

.active {
  background-color: #FFF000;
}

.container {
    font-family: sans-serif;
    text-align: center;
    width: 100%;
    display: grid;
    grid-auto-flow: dense;
    grid-template: "1fr 1fr 1fr" 50vh
                   "1fr 1fr 1fr" 50vh;
}
.container-text{
  font-family: sans-serif;
  font-size: 80%;
  text-align: right;
  letter-spacing: 5px;
  line-height: 1.5;
  word-spacing: 5px;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ffff00;
}

.box.a:hover .overlay {
  opacity: 1;
}
.box.b:hover .overlay {
  opacity: 1;
}
.box.c:hover .overlay {
  opacity: 1;
}
.box.d:hover .overlay {
  opacity: 1;
}
.box.e:hover .overlay {
  opacity: 1;
}
.box.f:hover .overlay {
  opacity: 1;
}
.descriptiong {
  color: darkgreen;
  font-family: sans-serif;
  font-size: 57%;
  text-align: center;
  letter-spacing: 5px;
  line-height: 1.5;
  word-spacing: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}.descriptiony {
  color: yellow;
  font-family: sans-serif;
  font-size: 57%;
  text-align: center;
  letter-spacing: 5px;
  line-height: 1.5;
  word-spacing: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container .box {
    position: relative;
    background: #FFFF00;
    margin: 1%;
}
.container .box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container .box.a, {
    grid-column: span1;
}
.container .box.b, {
    grid-column: span1;
}
.container .box.c, {
    grid-row: span1;
}
.container .box.d, {
    grid-row: span1;
}
.container .box.e, {
    grid-row: span1;
}
.container .box.f, {
    grid-row: span1;
}

@media (max-width: 991px) 
{
    .container
    {
        grid-template: "1fr 1fr 1fr" 500px
                       "1fr 1fr 1fr" 500px;
    }
}
@media screen and (max-width: 768px)
{
    .container
    {
        grid-template: "1fr 1fr" 250px
                       "1fr 1fr" 250px
                       "1fr 1fr" 250px;
    }
    
}
@media screen and (max-width: 600px) {
#navbar li {float: none;}
        .container
    {
        grid-template: "1fr" 250px
                       "1fr" 250px
                       "1fr" 250px
                       "1fr" 250px
                       "1fr" 250px
                       "1fr" 250px;
}
    
    .container .box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    }}