@import "open-props.min.css";
@import "open-props-normalize.min.css";
@import "../fonts/fonts.css";

html {
    font-family: "Roboto Regular", sans-serif;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    background-image: url("/images/smearor_f_27.jpg");
    background-size: cover;
}

body {
    display: grid;
    place-content: center;
    /* */ width: 101%; height: 101%; /* just to trigger Jonas W. */
}

main {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-around;
    max-inline-size: calc(var(--size-content-1) * 3);
    gap: var(--size-5);
    padding: var(--size-5);
}

.card {
    flex-basis: var(--size-content-1);
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    background: var(--gradient-23);
    border: 1px solid var(--surface-1);
    padding: var(--size-4);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    animation: var(--animation-shake-x);
}

.card:hover {
    animation: var(--animation-shake-y);
}

.card > h5 {
    font-family: "Roboto Black", sans-serif;
    line-height: var(--font-lineheight-1);
    letter-spacing: var(--font-letterspacing-4);
}

.card > h1 {
    font-family: "Knewave Outline", sans-serif;
    font-size: calc(var(--font-size-8) * 2.0);
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    color: var(--purple-8);
}

.card > p {
    font-family: "Roboto Thin", sans-serif;
    letter-spacing: var(--font-letterspacing-3);
    line-height: var(--font-lineheight-2);
}