/*Formatting*/
body { 
    background-color: #90D09F;
    color: #1400A8; 
     font-family: "Pacifico", cursive;
              height: 140vh;

}
    
a {
    color: #4A0B51;
    font-family: "Comic Neue", cursive;
}   

p { 
    font-family: "Comic Neue", cursive;
}

ul{
    font-family: "Comic Neue", cursive;
}

img {
    border: 1em ridge #030E63;
    padding: 2em;
}

h1 {
    text-align: center;
    color: #143706;
}

main{
    padding: 2em;

}

/*Hover effect*/
a:hover {
     background-color: #030E63;
     color: #FFFFFF;
     text-decoration: underline;
    cursor: alias;
}


/*Classes*/
.classlink {
        font-size: 75%;
}

.left {
    float: left;
    width: 15%;
    margin-right: 5em;
}

.padding {
    padding: 1em;
}

.color {
    color: #023864;
    background-color: #F8B99B;
}

.borderGradient {
    border: 5px solid white;
    border-image: linear-gradient(125deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%) 1;
    border-width: 1em;
}
    





/*For The Menu*/
* {
  border-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  height: 5em; /* Define a fixed height for the nav */
  
  background-color: #333;
  align-items: stretch; /* Forces children to take full container height */
  
  justify-content: center;
  background-color: #B00707;

}

.nav-link {
  display: flex;
  align-items: center; /* Centers text vertically within the nav */
  
  padding: 0 3em; /* Adjust the second number to add more spacing between the menu items */
  
  color: white;
  text-decoration: none;
  font-size: 2em;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: #455d7a; 
}

.logo {
  display: flex;
  align-items: center;
  padding: 0em;
}

.logo img {
  height: 5em; 
  width: 5em;
  padding: 0em;
  /* match the logo size to the nav height */
}