body {  
    background-color: #e0f7fa; /* A fresh and calming froge color scheme! */  
    font-family: "Comic Sans MS", cursive, sans-serif; /* Fun and friendly font for a playful vibe! */  
    color: #004d40; /* Dark teal for a harmonious reading experience */  
}  

h1, h2, h3 {  
    color: #00796b; /* A deeper teal to prioritize important headers */  
}  

p {  
    line-height: 1.6; /* Comfortable line spacing for readability */  
}  

a {  
    color: #ffffff; /* White text for contrast against the froge-themed scheme */  
    text-decoration: none; /* No underlining for links unless hovered over */  
    font-weight: bold; /* Bold text to enhance link visibility */  
    background-color: #80cbc4; /* A soft minty-green background to contribute to froge aesthetic */  
    padding: 5px 10px; /* Small padding to make links more clickable! */  
    border-radius: 8px; /* Rounded corners for a friendly appearance */  
    transition: background-color 0.3s; /* Smooth transition for hover effect */  
}  

a:hover {  
    background-color: #4db6ac; /* Slightly darker minty-green on hover */  
}  

footer {  
    background-color: #004d40; /* Dark, froge-inspired footer to cement the page */  
    color: #e0f7fa; /* Contrasting text to maintain readability */  
    padding: 20px 0; /* Vertical padding for balanced aesthetics */  
    text-align: center; /* Centered text for symmetry and balance */  
}  

/* Responsive Design Principles for Froge Lovers! */

@media only screen and (max-width: 768px) {  
    body {  
        padding: 10px; /* Ensure content fits nicely on smaller screens */  
    }  
    h1 {  
        font-size: 1.5em; /* Slightly smaller font for mobile headers */  
    }  
    a {  
        font-size: 0.9em; /* Reduce link size for smaller viewports */  
    }  
}