.factSection {
    text-align: center;
    margin: 40px auto;
    padding: 20px;
}

#factButton {
    background-color: hsl(109,41%,39%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
}

#factButton:hover {
    background-color: hsl(109, 51%, 49%);
    transform: scale(1.05); /* maakt de knop iets groter als de muis er over zweeft */
}

#fact {
    margin-top: 20px;
    font-size: 18px;
    color: white;
    background-color: hsl(109,41%,39%);
    border: none;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    max-width: 400px;
}

#fact:empty {
    display: none; /* zorgt ervoor dat de box met het feitje niet zichtbaar is als de knop nog niet is ingedrukt */
}