@import url('https://fonts.googleapis.com/css2?family=Almendra+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');



p{
    font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
text-align: center;
color: black;
font-size: 175%;
}

h1,h2,h3,h4,h5{
  font-family: "Almendra Display", serif;
  font-weight: 400;
  font-style: normal;
text-align: center;
color: black;
font-size: 185%;
border-style: outset;
border-width: 3px;
border-color: black
}

body {
  background: linear-gradient(to left, #376124, #141414);
    color: black
}

button, a{
    margin: 20px auto;
    margin: 10px; /* Adds space between buttons */
}

.button-container {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers them horizontally */
}


footer{ 
color: white;
}

Ul{
text-align: center;
color: white;
font-size: 175%;
}

.story-box {
    width: 60%; /* Controls the box width */
    margin: 20px auto; /* Centers it */
    padding: 20px;
    background-color: #E5DFC5; /* Light gray background */
    border-radius: 10px; /* Soft rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Adds a shadow */
    text-align: left;
}

.hover-button {
    background-color: #12ff3d;
    color: black;
    padding: 10px 20px;
    border: dashed;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.hover-button:hover {
    background-color: black; /* Changes color when hovered */
    color: white; /* Changes text color */
}