body {  
    background-color: #e0f7fa;  
    font-family: 'Arial', sans-serif;  
    color: #004d40;  
}  

h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
    color: #00796b;  
}  

a {  
    color: #004d40;  
    text-decoration: none;  
    border-bottom: 1px dashed #004d40;  
}  

a:hover {  
    color: #00796b;  
    border-bottom: 1px solid #00796b;  
}  

button {  
    background-color: #00796b;  
    color: #ffffff;  
    border: none;  
    padding: 10px 20px;  
    cursor: pointer;  
    border-radius: 5px;  
    transition: background-color 0.3s ease;  
}  

button:hover {  
    background-color: #004d40;  
}  

.froge-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 20px;  
    justify-content: space-around;  
    padding: 20px;  
}  

.froge-item {  
    background-color: #b2dfdb;  
    border: 1px solid #004d40;  
    border-radius: 10px;  
    padding: 15px;  
    max-width: 300px;  
    text-align: center;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
}  

.froge-item img {  
    max-width: 100%;  
    height: auto;  
    margin-bottom: 15px;  
    border-radius: 50%;  
}  

.froge-item h3 {  
    margin: 0 0 10px;  
}  

.froge-item p {  
    margin: 0 0 15px;  
}  

@media (max-width: 600px) {  
    .froge-container {  
        flex-direction: column;  
        align-items: center;  
    }  
}  

/* Extra Froge Love */  
.froge-heart {  
    position: relative;  
    color: #ff4081;  
    font-size: 24px;  
    animation: beat 1s infinite;  
}  

@keyframes beat {  
    0%, 100% {  
        transform: scale(1);  
    }  
    50% {  
        transform: scale(1.1);  
    }  
}  

.froge-heart:hover {  
    animation-duration: 0.5s;  
}