/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Fantasy;
  text-align: center;
  
  .rounded-text {
  font-family: ui-rounded, sans-serif;
}

/* CSS for your Neocities site */
.main-box {
  background-color: white; /* The color of your box */
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  max-width: 500px;
  width: 90%;
}
body {
  background-color: white;
  color: black;
  font-family: Fantasy;
  text-align: center;
}

/* Unvisited link */
a:link {
  color: #6F27F5;
  text-decoration: none; /* This removes the default underline for a cleaner look */
  transition: 0.3s; /* This makes the glow fade in smoothly */
}

/* Visited (clicked) link */
a:visited {
  color: #27F5CC;
}

/* Mouse over link with GLOW */
a:hover {
  color: #F5273C;
  /* This creates the glow effect using text-shadow */
  text-shadow: 0 0 10px #F5273C, 0 0 20px #F5273C;
}
/* Fix for your body tag and existing classes */
body {
  background-color: white;
  color: black;
  font-family: Fantasy;
  text-align: center;
}
.inline-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* space between image and text */
}

.inline-link img {
  height: 2.2em; /* This makes it roughly the size of your text */
  width: auto;
  border-radius: 4px; /* Optional: rounds the corners slightly */
}
.inline-link img {
  height: 2.2em; /* Forces it to be text-sized */
  width: auto;   /* Keeps it from looking squished */
  vertical-align: middle;
}

.inline-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* This targets only the "Maple's site" text */
.maple-link {
  font-size: 2em !important; /* This makes the text twice as big */
  font-weight: bold;         /* This makes it thicker */
}

/* This makes sure the image stays next to the now-bigger text */
.inline-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body {
    background-image: url('Heythere.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


}