*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

textarea,
select,
input,
progress {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

:where(:not(fieldset, progress, meter)) {
    background-origin: border-box;
    background-repeat: no-repeat;
    border-width: 0px;
    border-style: solid;
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
    color: inherit;
    letter-spacing: inherit;
    font: inherit;
}

html {
    scroll-behavior: smooth;
    font-size: 20px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
}


body {
    color: hsl(210 18% 92%);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    /* display: grid;
    place-content: center; */
    background: radial-gradient(circle,  hsl(230, 38%, 30%) 30%, hsl(250, 50%, 15%) 100%);
    /* font-family: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
    font-family: Optima, Candara, Noto Sans, source-sans-pro, sans-serif; */
    font-family:  Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;

    padding: .5em;
}

main {
    display: grid;
    gap: 4rem;
    place-content: center;
    align-items: center;
    height: 100%;
}

a, :visited {
    color: currentColor;
    font-weight: 600;
}

.animated {
    transition: all .9s cubic-bezier(.9, 0, .1, 1);
    transition-delay: .45s;
}

h1 {
    font-size: clamp(6rem, 12vw, 9rem);
    font-weight: 200;
    letter-spacing: -0.025em;
    line-height: 1;
}

h1.animated.initial {
    letter-spacing: 0.15em;
}


p {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
}

p.animated.initial {
    letter-spacing: 0.075em;
}

aside {
    display: grid;
    gap: 1.5rem;
    text-align: center;
    opacity: 1;
}

aside.animated.initial {
    letter-spacing: 0.075em;
    opacity: 0;
}

h2,
button {
    font-weight: 400;
    letter-spacing: 0.0125em;
}

h2 {
    font-size: 1.25rem;
}

button {
    font-size: 1rem;
    background-color: hsl(230, 36%, 48%);
    border-radius: 1em;
    padding: .75em 1.5em;
    cursor: pointer;
    user-select: none;
     position: relative;

    transition: all .075s ease-in;
    box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

[data-reaction]:not(.chosen):is(:hover, :focus) {
 transform: scale(1.05);
}

[data-reaction]:not(.chosen):is(:active) {
 transform: scale(.95);
}



button:is(:hover, :focus, :active) {
    background-color: hsl(230, 42%, 44%);
    color: hsl(210 18% 96%);
    box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

button.chosen {
    outline: .25em currentColor solid;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
}

[data-reaction]::after,
[data-reaction].chosen::before {
        /* text-shadow: .125rem .125rem .25rem rgba(0,0,0,.5); */
        font-size: .75rem;
        font-weight: 600;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        line-height: 1;
        text-transform: uppercase;
        transition: all .075s ease;
        left: 0;
        opacity: 1;
        position: absolute;
        /* font-size: calc((1em / 3) * 2); */
}

[data-reaction].chosen::before {
    content: attr(title);
    bottom: calc(100% + 1em);
    /* text-shadow: none; */

}

[data-reaction]::after {
    content: attr(data-count);
    top: calc(100% + (1em));
}

/* [data-reaction]:not(.chosen):is(:hover, :active)::after {
 opacity: 0;
 transform: scale(.1);
} */




aside>div {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}


.botmessage {
    display: none;
}