/* Add a border and some padding to the header to make it stand out */
header {
    border: 2px solid #333;
    padding: 20px;
    text-align: center;
    opacity: 1;
  }
  .header-container {
    position: relative; /* Set the position to relative to allow absolute positioning of the pseudo-element */
  }

  /* Add the pseudo-element to the container element */
  .header-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.15); /* Make the background color grey with an opacity of 0.5 */
    z-index: -1; /* Set the z-index to -1 to make sure the pseudo-element is behind the header content */
  }

  /* Update the header element to be a child of the container element */
  .header-container header {
    border: 2px solid #333;
    padding: 20px;
    text-align: center;
    opacity: 1;
  }
  




body {
font-family: 'Italianno', sans-serif;
background-image: url('https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

/* Use the 'Italianno' font for headings */
h1, h2 {
font-family: 'Italianno', serif;
}

/* Use the 'Italianno' font for links */
a {
color: #333;
font-family: 'Italianno', sans-serif;
text-decoration: none;
transition: color 0.2s;
}

a:hover {
color: #777;
}

/* Add some styling to the main content section */
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}

/* Add some styling to the list items */
ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
margin: 10px;
font-style: italic;
}

/* Add a border and some padding to the header and footer to make them stand out */
header, footer {
border: 2px solid #333;
padding: 20px;
text-align: center;
}

/* Add some styling to the social media images */
.SocialMediaImages img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin: 0 10px;
}

/* Use a more visually appealing color for text */
.BlueColor {
color: #3498db;
font-family: 'Italianno', sans-serif;
}
@media only screen and (max-width: 768px) 
{
  form {
    width: 80%;
  }
}
/* Style the form and input elements */
form {
width: 40%;
margin: 0 auto;
text-align: left;
padding: 5px;
border: 1px solid darkgray;
border-radius: 4px;
}

/* Style the submit button */
input[type="submit"] {
width: 100%;
background-color: #4caf50;
color: white;
font-size: 18px;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.ScaleUp {
font-size: 1.2em;
transform: scale(1.2);
}
svg {
    cursor: pointer;
  }
  #H,
  #o,
  #m,
  #e,#ace,#breezy,#olivia,#umber,#terrance,#Cordelia, #Octavia, #Norah, #Tessa, #Aria, #Calantha, #Tahlia{
      fill: darkblue;
      opacity: 0.75;
      transition: all 1s ease;
      margin: 0% 10% 0% 0%;
  }
  svg:hover #H {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #o {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #m {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #e {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #ace {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #breezy {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #olivia {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #umber {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #terrance {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
  svg:hover #Cordelia {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }

  svg:hover #Octavia {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
      
  svg:hover #Norah {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }
      
  svg:hover #Tessa {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
      
  svg:hover #Aria {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }
      
  svg:hover #Calantha {
    transform: translateY(-5%);
    opacity: 1;
    fill: black;
  }
      
  svg:hover #Tahlia {
    transform: translateY(5%);
    opacity: 1;
    fill: black;
  }