/* Welcome to the froge.ai style explorer! 🌿🐸

   This CSS file is here to make your browsing
   experience as smooth as a frog leaping through a
   lily pond. Enjoy the delightful visuals! */

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styling */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #e0f7fa; /* Mild teal background */
  color: #006064; /* Deep teal font color */
}

/* Headers Styling */
h1, h2, h3 {
  color: #004d40; /* Darker shade for headers */
  text-align: center;
  margin-top: 20px;
}

/* Link Styling */
a {
  color: #00796b; /* Bright teal links */
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #004d40; /* Darker on hover */
}

/* Frog Button Styling */
.button {
  background-color: #004d40;
  color: #ffffff;
  padding: 15px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 5px #999;
  text-align: center;
}

.button:hover {
  background-color: #00796b;
}

.button:active {
  box-shadow: 0 3px #666;
  transform: translateY(2px);
}

/* Footer Styling */
footer {
  background-color: #004d40;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .button {
    padding: 10px 15px;
  }
}