html,
body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}

 /* Header */

header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: #00ADB5;
}

header h1 {
    margin: 0;
    padding: 0;
    font-family: 'Dancing Script', sans-serif;
    font-size: 24px;
    color: #222831;
    margin-right: auto;
}

header ul {
    display: flex;
    list-style: none;
    gap: 1rem;
}

header a {
    text-decoration: none;
    color: #FEFBF6;
}

/* Content */

.container,
.outcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 7%;
    background-color: #EEEEEE;
}

.container h1 {
    text-align: center;
    font-family: 'Fuzzy Bubbles', sans-serif;
}

legend {
    font-size: 1.2rem;
    margin-top: 1rem;
}

.title-legend {
    font-size: 1.5rem;
}

input[type='radio'] {
    height: 1.5rem;
    width: 1.5rem;
    margin: 5px 0 0 0;
    transform: translateY(.3rem);
    appearance: none;
    border: 2px solid #222831;
	border-radius: 50%;
	background-clip: content-box;
	padding: 3px;
}

input[type='radio']:checked {
    background-color: #00ADB5;
    border: 2px solid #00ADB5;
}

#generateBtn {
    height: 3rem;
    width: 90%;
    margin: 1rem 1rem .3rem 1rem;
    font-size: 1.3rem;
    background-color: #00ADB5;
    color: #FEFBF6;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 5px rgb(199, 197, 197);
}

#generateBtn:active {
    background-color: #008b93;
    box-shadow: 0 2px #666;
    transform: translateY(4px);
}

.outcome {
    padding: 0;
}

.outcome h2 {
    font-family: 'Fuzzy Bubbles', sans-serif;
    margin: 1rem 0 0 0;
}

.outcome h4 {
    margin: 0 0 1rem 0;
    font-family: 'Fuzzy Bubbles', sans-serif;
    font-size: .7rem;
}

.outcome img {
    max-width: 350px;
    border-radius: 10px;
    object-fit: cover;
}

/* Footer */

footer {
    display: flex;
    background-color: #222831;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    font-size: .9rem;
    color: #EEEEEE;
}