style.css

:root {
    --background-color: white;
    --primary-color: #3f3f3f;
    --font-default: 'Mouse Memoirs', sans-serif;
}

body {
    background-color: var(--background-color);
    color: var(--primary-color);
    font-family: var(--font-default);
}

header {
    padding: 12px 6px;
    color: var(--primary-color);
}

header h1 {
    font-size: 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 button#back-button {
    border: none;
    background-color: transparent;
    visibility: hidden;
}

header h1 * {
    font-size: 1.5em;
}


main {
    padding: 2em 1em;
}

main section {
    padding: 2em 0px;
    display: flex;
    justify-content: center;
}

section#greeting {
    display: flex;
    justify-content: center;
}

div#greeting-feelsify {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 16em;
    width: 16em;
    border-radius: 50%;
    border: 0.3em solid  var(--primary-color);
    background-color: var(--background-color);

}

@keyframes rotation {
    95% {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

#greeting-buddy {
    font-size: 12em;
    animation: rotation 6s infinite linear;
}

section h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    width: 6em;
    border-radius: 50%;
    border: 0.3em solid  var(--primary-color);
    background-color: var(--background-color);
}

section h2 span {
    font-size: 5em;
    color: var(--background-color);
    filter: saturate(0);
}

section#track {
    display: none;
}

section#review {
    display: none;
}

footer {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 2em 2em;
}

button.action {
    max-width: 12em;
    font-family: var(--font-default);
    font-size: 2em;
    width: 100%;
    padding: 8px 16px;
    color:  var(--primary-color);
    background-color:var(--background-color);
    border: 0.2em solid var(--primary-color);
    border-radius: 32px;
    box-shadow: 0.2em 0.2em  var(--primary-color);
}

button.action:active {
    transform: translate(0.2em, 0.2em);
    box-shadow: unset;
}