@font-face {
  font-family: 'mainFont'; /* set name */
  src: url('https://rayepierre335.neocities.org/assets/NewRocker-Regular.ttf') format('truetype');
}

body{
  background-image: url('https://files.catbox.moe/2vuy2l.jpg');
  background-repeat: repeat;
  background-size:25%;
  background-color: #050505;
  max-width:100%;
  height:auto;
  display:flex;
  padding:5%;
  flex-direction:column;
}

.boat{
  background-image: url("https://files.catbox.moe/zceey2.jpg");
  background-repeat: repeat;
  background-size:6.6%;
}

img{
max-height:100%;  
width:20%;
opacity: 0.5;
}

img:hover {
max-height:100%;  
width:22%;
opacity: 1;
}

a{
  font-size:20px;
  margin: 0 0 0 2%;
  text-align: center;
}

h1 {
  margin: 0 25% 0 25%;
  font-size: 400%;
  color: #f2d663;
  font-family: mainFont;
  text-align: center;
  text-shadow: 3px 3px 6px black;
}

h2 {
  margin: 2% 10% 0 10%;
  font-size: 225%;
  color: #db9573;
  font-family: mainFont;
  text-align: center;
  text-shadow: 3px 3px 6px black;
}

h3 {
  display:block;
  padding: 1px 10% 0 10%;
  font-size: 150%;
  color: #b5ee80;
  font-family: mainFont;
  text-align: justify;
  text-shadow: 5px 5px 10px black;
}

h4{
  padding: 0 10% 0 10%;
  font-family: mainFont;
  color: #b5ee80;
  text-align: center;
  text-shadow: 5px 5px 10px black;
}

.PWA{
  position: absolute;
  bottom: 8px;
  right: 0px;
}

#Navi{
max-height:100%;
width:50%;
}

#Navi:hover{
width:75%;
filter: invert(100%);
}

.navContent{
display: grid;
position:relative;
width:auto;
text-align:center;
margin-top:2%;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(3, 50%);
grid-gap: 5%;
padding:5%;
}

.PDA{
height:0;
width:35%;
z-index:1;
position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
overflow:hidden;
transition:0.3s;
background-color:#9c1c00;
opacity:0.8;
}

.PDA a{
  padding: 8px;
  text-decoration: none;
  font-size: 125%;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

.PDA img{
max-height:100%;
width:100%;
opacity: 0.8;
}


@media (max-width: 80rem) {
img{
max-height:100%;  
width:44%;
opacity: 0.8;
}

img:hover {
max-height:100%;  
width:46%;
opacity: 1;
}
}