:root{
    --RosePink: #C21E56;
    --PalePink: #fbeff3;
    --Yellow: #FFD100;
    --DarkYellow:#d26c44;
    --PaleYellow: #fffbeb;
}

@media screen and (min-width: 768px) { /* Adjust breakpoint as needed */
    main{
        padding:0% 15% 5% 15%;
    }
    /**Menu**/
    nav {
        display: flex;
        justify-content: center; /* Align menu items horizontally */

    }

    .menu {
        visibility: visible; /* Always visible on larger screens */
        position: static; /* Remove fixed positioning */
        display: flex;
        flex-direction: row; /* Horizontal alignment */
        justify-content:space-evenly; /* Spreads items evenly on larger screens */
        gap: 1rem;
        align-items: center; /* Center vertically */
        background: none; /* Remove mobile-specific background */
        padding: 0; /* Reset padding for alignment */
        width: auto; /* Adjust width */
    }

    .menu li {
        flex: 0 0 auto; /* Prevents items from stretching too much */
        font-size: 1.8rem;
        padding: 0.5rem 1rem ; /* Add spacing between menu items */
        margin: 0;
        border: none; /* Remove borders for a cleaner look */
        width: auto;
        background: none;
        border-right: 1px solid #000; /* Black vertical line */
        padding: 0 1rem; 
    }
    .menu li:last-child {
        border-right: none; /* Remove the line from the last item */
    }

    .container {
        display: none; /* Hide the mobile menu button */
    }
    .menu li a{
        position: relative;
        top: 0;
        transition: top ease 0.4s;
      }
    .menu li:hover a{
        top: -20px;
        text-decoration: underline;
    }
    /**END menu**/

    /**Link hover buttons**/
    .pinkLink{
        transition: background-color 0.7s ease, color 0.7s ease, font-size 0.5s ease;
    }
    .pinkLink:hover,#activities a.toGites:hover{
        color:var(--RosePink);
        background-color:transparent;
        font-size: 1.5rem;
    }
    #activities .yelLink{
        transition: background-color 0.7s ease, color 0.7s ease, font-size 0.5s ease, font-weigh 0.5s ease;
    }
    #activities .yelLink:hover{
        color:var(--DarkYellow);
        background-color:transparent;
        font-size: 1.5rem;
        font-weight: 700;
    }
    /**END Link hover buttons**/
    /**Gallery bts**/
    .left_btn{
        left: -10%;
        opacity: 0.5;
        border-radius: 0%;
        
    }
    
    .right_btn{
        right: -10%;
        opacity: 0.5;
        border-radius: 0%;
    }
    .btn:hover{
        transition: opacity 0.5s ease;
        opacity: 1;
    }
            
    /**END Gallery bts**/
    #title{
        flex-direction: row;
        justify-content: space-evenly;
    }
}

@media screen and (min-width: 1100px) {
    
}