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

body{
        background-color: #ddd4d4;
    } 

h1{font-size: 28px}

p {font-size: 20px}

}

@media screen and (min-width: 768px) {
    body{
        background-color: #666;
    } 
    
    h1{font-size: 36px}
    
    p {font-size: 16px}

}

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

    body{
        background-color: #2a627c;
    } 
   h1 {
    font-size: 42px;
    }
}
/* make images flexible */
img {
  max-width: 100%;
  height: auto;
}

/* make images fluid */
@media screen and (max-width: 479px) {
    body {
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: hidden; /* prevent horizontal scrolling */
    }

    nav ul {
        flex-wrap: wrap; /* wrap nav items so they don't overflow */
        gap: 10px; /* reduce gap for smaller screens */
        padding: 0 5px;
    }

    nav ul li a {
        padding: 10px 8px; /* smaller clickable areas */
        font-size: 14px;
    }

    /* Optional: reduce h1 font size on very small screens */
    h1 {
        font-size: 22px;
    }

    p {
        font-size: 16px;
    }
}