body {
  font-family: 'Arial Rounded MT Bold', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f0f5f9;
}

header {
  background-color: #6495ed;
  color: #fff;
  padding: 20px;
  text-align: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 20px;
}

h1,
h2,
h3 {
  color: #6495ed;
}

pre {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

code {
  font-family: 'Courier New', Courier, monospace;
}

.developer {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  text-align: center;
}

.developer img {
  /* border-radius: 50%;
    width: 10 */
  border-radius: 50%;
  width: 100px; /* Set the width of the image */
  height: 100px; /* Set the height of the image */
  object-fit: cover;
}

.developer_images_container {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.title {
  color: white;
}

#easter-egg-button {
  background-color: #6495ed; /* Match the header background color */
  color: #fff; /* Match the header text color */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px; /* Add some spacing */
  margin-top: 20px; /* Add some spacing */
}

#easter-egg-button:hover {
  background-color: #4267b2; /* Darker blue on hover */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

footer {
  background-color: #6495ed; /* Match the header background color */
  color: #fff; /* Match the header text color */
  padding: 20px;
  text-align: center;
}

footer a {
  color: #fff;
  text-decoration: none;
  font-weight: bold; /* Make the link text bold */
}

footer a:hover {
  text-decoration: underline; /* Underline the link on hover */
}
#easter-egg.animated {
  animation: fadeIn 1s ease forwards;
}