body {
  font-family:
    ms gothic,
    Arial,
    Helvetica,
    sans-serif,
    poppins,
    Paradise;
padding-top: 60px;
max-height: 1000px;
max-width: 760px;
    width:80%;
        margin-left:auto;
        margin-right:auto;

}



.parent {
display: grid;
 max-width: 750px;
  max-height: 1024px;
padding: 10px;
padding-bottom: 5px;
  margin: auto;
  width: 750px;
  background-image: url(images/beachbg.png);
background-size: 110%;
border: 1px black solid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 7px;
grid-row-gap: 5px;
}

li {
 
  list-style-type: none;
 
}

.nav { grid-area: 1 / 1 / 6 / 2; 
background-color: rgb(255, 255, 255);
display: none;
 max-width: 750px;
  max-height: 1024px;
  font-size: 25px;
border: 1px black solid;
padding: 0.1rem;



}
.info {

 font-size: 15px;
}



 
.main { grid-area: 1 / 2 / 6 / 6; 
background-color: rgb(255, 255, 255);
padding: 5px;
display: block;
 max-width: 750px;
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
border: 1px black solid;
}
.deco { grid-area: 6 / 1 / 7 / 6; 

display: block;
 max-height: 300px;
 overflow: hidden;
}



 .main::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }
 a:link {
  color: #285ace;
  text-decoration-line: none;
}

a:visited {
   color: #285ace;
  text-decoration-line: none;
  
}

a:hover {
  color: #ff9547;
  text-decoration-line: none;
}


@media only screen and (max-width: 500px){
  

    .body {
  font-family:
    ms gothic,
    Arial,
    Helvetica,
    sans-serif,
    poppins,
    Paradise;
padding-top: 0px;
max-height: 1000px;
    width:80%;
        margin-left:auto;
        margin-right:auto;

.parent {
display: grid;
 max-width: 340px;
 max-height: 500px;
  margin: auto;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
background-image: url(images/beachbg.png);
background-size: 400%;
border: 1px black solid;
padding: 0.5rem;
}

.nav {grid-area: 5 / 1 / 6 / 6; 
background-color: rgb(255, 255, 255);
border: 1px black solid;
text-align: center;
  height: 2rem;
  display:block;
}

.nav br {
    display: none; 

  }
.main { grid-area: 1 / 1 / 5 / 6; 
background-color: rgb(255, 255, 255);
border: 1px black solid;
padding: 0.3rem;
height: 445px;
max-height: 450px;
overflow-y:scroll;
overflow-x:hidden;
}
.deco {  grid-area: 6 / 1 / 7 / 6; 
background-color: rgb(255, 255, 255);
border: 1px black solid;
display: none;}

a:link {
  color: #285ace;
  text-decoration-line: none;
}

a:visited {
   color: #285ace;
  text-decoration-line: none;
  
}

a:hover {
  color: #ff9547;
  text-decoration-line: none;
}
.info {

  display:none;
}

}

ul {
  gap: 4vw;
  padding-left: 0;
  overflow-y: auto;
  margin-top: 0.4rem;
  list-style-type: none;
  scroll-marker-group:after;
}