@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/0tez6e.jpg');  
  background-color: #1c1c1c;
  display:flex;
  flex-direction:column;
}

#resize{
font-size: 1%;  
}

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: #b5ee80;
  font-family: mainFont;
  text-align: center;
  text-shadow: 3px 3px 6px black;
}

h3 {
  padding: 1px 10% 0 10%;
  font-size: 150%;
  color: #db9573;
  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;
}

h5{
  padding: 0 10% 0 10%;
  margin: 0 25% 0 25%;
  font-size: 100%;
  color: #b5ee80;
  font-family: mainFont;
  text-align: center;
  text-shadow: 3px 3px 6px black;
}

a{
    color: #9d73db;
}

img{
max-height:100%;
max-width:50%;  
}

.glow{
  filter: drop-shadow(0 0 16px rgba(242, 214, 99, 0.5));
}

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

.gallery{
grid-template-columns: repeat(3, 5%);
grid-template-rows: repeat(3, 3%);
grid-gap: 3%;
display: grid;
width:auto;
text-align:center;
}

.gallery img{
max-height:10%;
max-width:10%;  
height:3%;
width:3%;
}

#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:fixed;
  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;
max-width:100%;  
}