/* Target the div using its class name */
.poems {
  /* Box Dimensions */
  width: 80%;
  height: auto;

  /* Spacing */
  padding: 20px;
  margin: 15px auto; /* Centers the div horizontally */

  /* Visual Styles */
  /*background-color: #f4f4f9;*/
  color: #FFFFFF;
  border-radius: 8px;

  /* Typography and Layout */
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

/* Target the div using its class name */
.title {
  /* Box Dimensions */
  width: 80%;
  height: 150px;

  /* Spacing */
  padding: 20px;
  margin: 15px auto; /* Centers the div horizontally */
  font-size: 35px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  overflow:auto;
}

.logo {
    width:40%;
    float:left;
    justify-content: left; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 150px;           /* Requires a height to see vertical centering */
}

.navi {
    width:60%;
    float:right;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 150px;           /* Requires a height to see vertical centering */
}

.footer {
    width:auto;
    float:center;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 150px;  
}

a:link {
  color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none; /* Removes the default underline */
}

/* 2. Visited Link (User has clicked it before) */
a:visited {
  font-family: 'Open Sans', sans-serif;
  color: #FFFFFF;
}

/* 3. Hover State (Mouse pointer moves over it) */
a:hover {
  color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
  text-decoration: underline; /* Adds underline on hover */
}

/* 4. Active State (The exact moment it is clicked) */
a:active {
  color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
}

.footer {
    flex-shrink: 0;
    width:auto;
    float:center;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 50px; 
}