.menu {
   /* border: 2px solid red; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
    flex-wrap:wrap;
    scroll-snap-type: y mandatory;
}

.menu div{
    /* border: 2px solid pink; */
    width: 50%;
    color: white;
    text-align: center;
    height: auto;
    margin: 10px; padding: 10px;
    scroll-snap-align: start;
}

.menu2 {
    /* border: 2px solid red; */
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-self: center;
     align-items: center;
     justify-content: center;
     z-index: 2;
     position: relative;
     flex-wrap:wrap;
     scroll-snap-type: y mandatory;
 }
 
 .menu2 div{
     /* border: 2px solid pink; */
     width: 50%;
     color: white;
     text-align: center;
     height: auto;
     scroll-snap-align: start;
 }

h1{
    font-family: "Montserrat", sans-serif;
    font-size: 24pt;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  color: white;
}

h3{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

p{
    font-family: "Montserrat", sans-serif;
    font-size: 18pt;
  font-optical-sizing: auto;
  font-weight: 500;
  color: lightgray;
}

.linkimg{
    width: 25%; height: auto;
    min-width: 100px;
}

.logo{
    width: 50%; height: auto;
    min-width: 150px;
    animation: float 5s ease-in-out infinite;
}

.logostill{
    width: 60%; height: auto;
    min-width: 150px;
    margin: 10px;
    filter: drop-shadow(5px 5px 5px #333333);
    transition: all 1s ease;
}

.logostill:hover{
    width: 65%; height: auto;
    min-width: 150px;
    transition: all 1s ease;
}

.logostill2{
    width: 80%; height: auto;
    min-width: 150px;
    margin: 10px;
    filter: drop-shadow(5px 5px 5px #333333);
    transition: all 1s ease;
}

.logostill2:hover{
    width: 85%; height: auto;
    min-width: 150px;
    transition: all 1s ease;
}

#RPBanner{
    background-image: url("./img/RPBG_Day.png");
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-left: 25%;
    padding-right: 25%;
    border-top: 8px solid #6C26D6;
}

#NHBanner{
    background-image: url("./img/NHBIG.png");
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-left: 25%;
    padding-right: 25%;
    border-bottom: 8px solid #6C26D6;
    padding-bottom: 100px;
}

h1 span{
    background: #00000049;
}

p span{
    background: #00000049;
    font-size: 18pt;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Responsive Design for Mobile */
@media screen and (max-width: 480px) {
    .menu div{
        width: 80%;
    }

    .menu2 div{
        width: 80%;
    }
    
    #RPBanner{
        padding-left:10%;
        padding-right:10%;
    }

    #NHBanner{
        padding-left:10%;
        padding-right:10%;
    }

    .logostill{
        width: 75%;
    }

    .logostill2{
        width:100%;
    }

    .logostill2:hover{
        width: 105%;
    }

    .logo{
        width: 70%;
    }
}