:root {
    --blue: #00687E;
    --yellow: #FFA525;
    --pink: #DA8F8D;
    --pink-faded: #DA8F8D66;
    --pink-faded-full: #e7b7b5;

    --space: 1rem;
    --margin: 2rem;
    --padding: .5rem;
    --border: 1px solid var(--pink);
    --border-radius: .25rem;

    --font-family: "Outfit", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
        "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";

    width: 100%;
    height: 100%;
    color: #000;
    font-family: var(--font-family);

    background-image:
        radial-gradient(var(--yellow) 2.5%, transparent 2.5%),
        radial-gradient(var(--yellow) 2.5%, transparent 2.5%);
    background-position: 0 0, 100px 100px;
    background-size: 200px 200px;
    background-color: var(--pink-faded);
}

* {
    position: relative;
    margin: 0;
    padding: 0;
}

h1, h2 {
    font-family: "PlaypenSans";
    margin: 0;
    color: var(--blue);
}

h2 {
    font-weight: 500;
}

h2:first-letter, h3:first-letter {
    text-transform: uppercase;
}

p {
    margin: var(--padding) auto;
}

.big {
    font-size: 1.25rem;
}

.center {
    text-align: center;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: calc(800px - 2 * var(--space));
    margin: 0 auto;
    padding: var(--margin) var(--space);
}

header {
    padding-bottom: 0 !important;
}

.vertical {
    flex-direction: column;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.logo {
    width: 400px;
    height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwMCIgaGVpZ2h0PSIzNTkzLjk0IiB2aWV3Qm94PSIwIDAgNTAwMCAzNTkzLjk0Ij4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcC0wIj4KPHBhdGggY2xpcC1ydWxlPSJub256ZXJvIiBkPSJNIDc2OCA2MTUgTCA0MjMyIDYxNSBMIDQyMzIgMjk3OSBMIDc2OCAyOTc5IFogTSA3NjggNjE1ICIvPgo8L2NsaXBQYXRoPgo8Y2xpcFBhdGggaWQ9ImNsaXAtMSI+CjxwYXRoIGNsaXAtcnVsZT0ibm9uemVybyIgZD0iTSA0MjMxLjU3MDMxMiAxOTA4Ljg3MTA5NCBDIDQyMzEuNTcwMzEyIDE2NjYuMzcxMDk0IDQwNTEuNDEwMTU2IDE0NjYuMDU4NTk0IDM4MTcuNjYwMTU2IDE0MzQuMTc5Njg4IEMgMzgwOS4yMTg3NSAxMTM4LjczODI4MSAzNTY3LjIzODI4MSA5MDEuNzgxMjUgMzI2OS43NjE3MTkgOTAxLjc4MTI1IEMgMzE5OC44Nzg5MDYgOTAxLjc4MTI1IDMxMzEuMjMwNDY5IDkxNS4zNzg5MDYgMzA2OS4wNTA3ODEgOTM5Ljg1OTM3NSBDIDI5NTMuOTQ5MjE5IDc0NS41MTE3MTkgMjc0Mi4yNSA2MTUuMTA5Mzc1IDI1MDAgNjE1LjEwOTM3NSBDIDIyNTcuNzUgNjE1LjEwOTM3NSAyMDQ2LjA1MDc4MSA3NDUuNTExNzE5IDE5MzAuOTQ5MjE5IDkzOS44NTkzNzUgQyAxODY4Ljc2OTUzMSA5MTUuMzc4OTA2IDE4MDEuMTA5Mzc1IDkwMS43ODEyNSAxNzMwLjIzODI4MSA5MDEuNzgxMjUgQyAxNDMyLjc2MTcxOSA5MDEuNzgxMjUgMTE5MC43ODEyNSAxMTM4LjczODI4MSAxMTgyLjMzOTg0NCAxNDM0LjE3OTY4OCBDIDk0OC41ODk4NDQgMTQ2Ni4wNTg1OTQgNzY4LjQyOTY4OCAxNjY2LjM1OTM3NSA3NjguNDI5Njg4IDE5MDguODcxMDk0IEMgNzY4LjQyOTY4OCAyMTU4LjY5MTQwNiA5NTkuNjA5Mzc1IDIzNjMuNzYxNzE5IDEyMDMuNjI4OTA2IDIzODYgQyAxMjY5Ljc2MTcxOSAyNjE0LjUxOTUzMSAxNDgwLjQxMDE1NiAyNzgxLjY3MTg3NSAxNzMwLjIzODI4MSAyNzgxLjY3MTg3NSBDIDE4MTkuMjg5MDYyIDI3ODEuNjcxODc1IDE5MDMuMzAwNzgxIDI3NjAuMzA4NTk0IDE5NzcuNjQwNjI1IDI3MjIuNjQwNjI1IEMgMjA5OC41NzAzMTIgMjg3OC40NDE0MDYgMjI4Ny41MTE3MTkgMjk3OC44MjAzMTIgMjUwMCAyOTc4LjgyMDMxMiBDIDI3MTIuNDg4MjgxIDI5NzguODIwMzEyIDI5MDEuNDI5Njg4IDI4NzguNDQxNDA2IDMwMjIuMzUxNTYyIDI3MjIuNjQwNjI1IEMgMzA5Ni42OTkyMTkgMjc2MC4zMDg1OTQgMzE4MC43MTA5MzggMjc4MS42NzE4NzUgMzI2OS43NjE3MTkgMjc4MS42NzE4NzUgQyAzNTE5LjU3ODEyNSAyNzgxLjY3MTg3NSAzNzMwLjIzODI4MSAyNjE0LjUxOTUzMSAzNzk2LjM3MTA5NCAyMzg2IEMgNDA0MC4zOTA2MjUgMjM2My43NjE3MTkgNDIzMS41NzAzMTIgMjE1OC42OTE0MDYgNDIzMS41NzAzMTIgMTkwOC44NzEwOTQgWiBNIDQyMzEuNTcwMzEyIDE5MDguODcxMDk0ICIvPgo8L2NsaXBQYXRoPgo8Y2xpcFBhdGggaWQ9ImNsaXAtMiI+CjxwYXRoIGNsaXAtcnVsZT0ibm9uemVybyIgZD0iTSA0MjMxLjU3MDMxMiAxOTA4Ljg3MTA5NCBDIDQyMzEuNTcwMzEyIDE2NjYuMzcxMDk0IDQwNTEuNDEwMTU2IDE0NjYuMDU4NTk0IDM4MTcuNjYwMTU2IDE0MzQuMTc5Njg4IEMgMzgwOS4yMTg3NSAxMTM4LjczODI4MSAzNTY3LjIzODI4MSA5MDEuNzgxMjUgMzI2OS43NjE3MTkgOTAxLjc4MTI1IEMgMzE5OC44Nzg5MDYgOTAxLjc4MTI1IDMxMzEuMjMwNDY5IDkxNS4zNzg5MDYgMzA2OS4wNTA3ODEgOTM5Ljg1OTM3NSBDIDI5NTMuOTQ5MjE5IDc0NS41MTE3MTkgMjc0Mi4yNSA2MTUuMTA5Mzc1IDI1MDAgNjE1LjEwOTM3NSBDIDIyNTcuNzUgNjE1LjEwOTM3NSAyMDQ2LjA1MDc4MSA3NDUuNTExNzE5IDE5MzAuOTQ5MjE5IDkzOS44NTkzNzUgQyAxODY4Ljc2OTUzMSA5MTUuMzc4OTA2IDE4MDEuMTA5Mzc1IDkwMS43ODEyNSAxNzMwLjIzODI4MSA5MDEuNzgxMjUgQyAxNDMyLjc2MTcxOSA5MDEuNzgxMjUgMTE5MC43ODEyNSAxMTM4LjczODI4MSAxMTgyLjMzOTg0NCAxNDM0LjE3OTY4OCBDIDk0OC41ODk4NDQgMTQ2Ni4wNTg1OTQgNzY4LjQyOTY4OCAxNjY2LjM1OTM3NSA3NjguNDI5Njg4IDE5MDguODcxMDk0IEMgNzY4LjQyOTY4OCAyMTU4LjY5MTQwNiA5NTkuNjA5Mzc1IDIzNjMuNzYxNzE5IDEyMDMuNjI4OTA2IDIzODYgQyAxMjY5Ljc2MTcxOSAyNjE0LjUxOTUzMSAxNDgwLjQxMDE1NiAyNzgxLjY3MTg3NSAxNzMwLjIzODI4MSAyNzgxLjY3MTg3NSBDIDE4MTkuMjg5MDYyIDI3ODEuNjcxODc1IDE5MDMuMzAwNzgxIDI3NjAuMzA4NTk0IDE5NzcuNjQwNjI1IDI3MjIuNjQwNjI1IEMgMjA5OC41NzAzMTIgMjg3OC40NDE0MDYgMjI4Ny41MTE3MTkgMjk3OC44MjAzMTIgMjUwMCAyOTc4LjgyMDMxMiBDIDI3MTIuNDg4MjgxIDI5NzguODIwMzEyIDI5MDEuNDI5Njg4IDI4NzguNDQxNDA2IDMwMjIuMzUxNTYyIDI3MjIuNjQwNjI1IEMgMzA5Ni42OTkyMTkgMjc2MC4zMDg1OTQgMzE4MC43MTA5MzggMjc4MS42NzE4NzUgMzI2OS43NjE3MTkgMjc4MS42NzE4NzUgQyAzNTE5LjU3ODEyNSAyNzgxLjY3MTg3NSAzNzMwLjIzODI4MSAyNjE0LjUxOTUzMSAzNzk2LjM3MTA5NCAyMzg2IEMgNDA0MC4zOTA2MjUgMjM2My43NjE3MTkgNDIzMS41NzAzMTIgMjE1OC42OTE0MDYgNDIzMS41NzAzMTIgMTkwOC44NzEwOTQgIi8+CjwvY2xpcFBhdGg+CjxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLXBhdHRlcm4tMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwIiBjeT0iMCIgZng9IjAiIGZ5PSIwIiByPSIxODE3LjkzNSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLjE2OTcwMSwgMCwgMCwgMC44MzAyOTksIDI3OTguODIsIDEzMzUuMTYpIj4KPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTAwJSwgMTAwJSwgMTAwJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuMjUiIHN0b3AtY29sb3I9InJnYig5OS45Njk0ODIlLCA5OS45Njc5NTclLCA5OS45Njc5NTclKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC4zNDM3NSIgc3RvcC1jb2xvcj0icmdiKDk5LjgxOTk0NiUsIDk5LjgxNjg5NSUsIDk5LjgxODQyJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNDI1NzgxIiBzdG9wLWNvbG9yPSJyZ2IoOTkuNTM5MTg1JSwgOTkuNTMxNTU1JSwgOTkuNTMzMDgxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNDk2MDk0IiBzdG9wLWNvbG9yPSJyZ2IoOTkuMjkwNDY2JSwgOTkuMjc2NzMzJSwgOTkuMjc5Nzg1JSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNTI3MzQ0IiBzdG9wLWNvbG9yPSJyZ2IoOTkuMTExOTM4JSwgOTkuMDk1MTU0JSwgOTkuMDk5NzMxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNTU0Njg4IiBzdG9wLWNvbG9yPSJyZ2IoOTguOTI4ODMzJSwgOTguOTA4OTk3JSwgOTguOTE1MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIwLjU4MjAzMSIgc3RvcC1jb2xvcj0icmdiKDk4Ljc0MjY3NiUsIDk4LjcyMTMxMyUsIDk4LjcyNTg5MSUpIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIwLjYwNTQ2OSIgc3RvcC1jb2xvcj0icmdiKDk4LjU2MjYyMiUsIDk4LjUzNjY4MiUsIDk4LjU0Mjc4NiUpIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIwLjYyODkwNiIgc3RvcC1jb2xvcj0icmdiKDk4LjM4NTYyJSwgOTguMzU2NjI4JSwgOTguMzYyNzMyJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNjQ4NDM4IiBzdG9wLWNvbG9yPSJyZ2IoOTguMjE0NzIyJSwgOTguMTgxMTUyJSwgOTguMTkwMzA4JSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNjY3OTY5IiBzdG9wLWNvbG9yPSJyZ2IoOTguMDM0NjY4JSwgOTcuOTk5NTczJSwgOTguMDA4NzI4JSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNjg3NSIgc3RvcC1jb2xvcj0icmdiKDk3Ljg1MTU2MiUsIDk3LjgxMTg5JSwgOTcuODIxMDQ1JSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNzA3MDMxIiBzdG9wLWNvbG9yPSJyZ2IoOTcuNjc2MDg2JSwgOTcuNjMzMzYyJSwgOTcuNjQ0MDQzJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuNzIyNjU2IiBzdG9wLWNvbG9yPSJyZ2IoOTcuNDMwNDIlLCA5Ny4zODQ2NDQlLCA5Ny4zOTUzMjUlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC43NTM5MDYiIHN0b3AtY29sb3I9InJnYig5Ny4xMTMwMzclLCA5Ny4wNjExNTclLCA5Ny4wNzQ4OSUpIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIwLjc4MTI1IiBzdG9wLWNvbG9yPSJyZ2IoOTYuNzk3MTglLCA5Ni43MzkxOTclLCA5Ni43NTQ0NTYlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC44MDg1OTQiIHN0b3AtY29sb3I9InJnYig5Ni40OTUwNTYlLCA5Ni40MzA5NjklLCA5Ni40NDc3NTQlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC44MzIwMzEiIHN0b3AtY29sb3I9InJnYig5Ni4yMjY1MDElLCA5Ni4xNTc4MzclLCA5Ni4xNzQ2MjIlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC44NTE1NjIiIHN0b3AtY29sb3I9InJnYig5NS45OTkxNDYlLCA5NS45MjU5MDMlLCA5NS45NDQyMTQlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC44NjcxODgiIHN0b3AtY29sb3I9InJnYig5NS43OTMxNTIlLCA5NS43MTY4NTglLCA5NS43MzUxNjglKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC44ODI4MTIiIHN0b3AtY29sb3I9InJnYig5NS42MDg1MjElLCA5NS41MjkxNzUlLCA5NS41NDkwMTElKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC44OTQ1MzEiIHN0b3AtY29sb3I9InJnYig5NS4zNjI4NTQlLCA5NS4yNzg5MzElLCA5NS4zMDAyOTMlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC45MTc5NjkiIHN0b3AtY29sb3I9InJnYig5NS4wNTkyMDQlLCA5NC45NjkxNzclLCA5NC45OTIwNjUlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMC45Mzc1IiBzdG9wLWNvbG9yPSJyZ2IoOTQuODAxMzMxJSwgOTQuNzA2NzI2JSwgOTQuNzI5NjE0JSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuOTUzMTI1IiBzdG9wLWNvbG9yPSJyZ2IoOTQuNTk2ODYzJSwgOTQuNDk5MjA3JSwgOTQuNTIzNjIxJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuOTY0ODQ0IiBzdG9wLWNvbG9yPSJyZ2IoOTQuMzg5MzQzJSwgOTQuMjg3MTA5JSwgOTQuMzExNTIzJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjAuOTgwNDY5IiBzdG9wLWNvbG9yPSJyZ2IoOTQuMTE0Njg1JSwgOTQuMDA3ODc0JSwgOTQuMDMzODEzJSkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYig5My45NjA1NzElLCA5My44NTA3MDglLCA5My44NzgxNzQlKSIgc3RvcC1vcGFjaXR5PSIxIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPCEtLSA8cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9InJnYig1OC4wMDc4MTIlLCA4Ni40OTQ0NDYlLCA5Ny4zNjYzMzMlKSIgZmlsbC1vcGFjaXR5PSIxIiBkPSJNIDUwMDAgMzU5My45NDE0MDYgTCAwIDM1OTMuOTQxNDA2IEwgMCAwIEwgNTAwMCAwIEwgNTAwMCAzNTkzLjk0MTQwNiAiLz4gLS0+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTApIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtMSkiPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcC0yKSI+CjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0idXJsKCNyYWRpYWwtcGF0dGVybi0wKSIgZD0iTSA3NjguNDI5Njg4IDYxNS4xMDkzNzUgTCA3NjguNDI5Njg4IDI5NzguODIwMzEyIEwgNDIzMS41NzAzMTIgMjk3OC44MjAzMTIgTCA0MjMxLjU3MDMxMiA2MTUuMTA5Mzc1IFogTSA3NjguNDI5Njg4IDYxNS4xMDkzNzUgIi8+CjwvZz4KPC9nPgo8L2c+Cjwvc3ZnPgo=");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.intro {
    gap: 0;
}

.intro p {
    margin: 0.15rem;
}

.intro p sup {
    font-size: 0.75rem;
    color: var(--blue);
    float: right;
    position: relative;
    bottom: 2px;
}

.lus {
    position: absolute;
    top: calc(var(--margin)*-1);
    right: 10%;
    width: 2px;
    height: 200px;
    background-color: var(--yellow);
    opacity: .5;
}

.lus .star {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: -40px;
    left: -24px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiDQogICAgICAgIGQ9Ik0xNS4wODU5IDguNTAyNjZMMTIuMDAwMSAyLjI1TDguOTE0MiA4LjUwMjY2TDIuMDEzOTggOS41MDUzMkw3LjAwNzAyIDE0LjM3MjNMNS44MjgzMyAyMS4yNDQ3TDEyLjAwMDEgMThMMTguMTcxOCAyMS4yNDQ3TDE2Ljk5MzEgMTQuMzcyM0wyMS45ODYyIDkuNTA1MzJMMTUuMDg1OSA4LjUwMjY2Wk0xOC43NjI3IDEwLjU1MjdMMTQuMDg5OCA5Ljg3MzY3TDEyLjAwMDEgNS42MzkzM0w5LjkxMDMgOS44NzM2N0w1LjIzNzQyIDEwLjU1MjdMOC42MTg3NSAxMy44NDg3TDcuODIwNTIgMTguNTAyN0wxMi4wMDAxIDE2LjMwNTNMMTYuMTc5NiAxOC41MDI3TDE1LjM4MTQgMTMuODQ4N0wxOC43NjI3IDEwLjU1MjdaIg0KICAgICAgICBmaWxsPSIjRkZBNTI1IiAvPg0KPC9zdmc+");
    background-size: contain;
}

.lus .star:after {
    content: 'L';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: "PlaypenSans";
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--yellow);
}

a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--blue);
    transition: border-bottom-style .12s ease-in-out;
}

a:not(.button, .parent-click):hover {
    border-bottom-style: solid;
}

a.parent-click {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.align-start {
    margin: 0 var(--margin) var(--margin);
}

button,
.button {
    padding: var(--padding);
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--yellow);
    font-family: var(--font-family);
    font-size: 1rem;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    transition-property: color, background-color;
    transition-duration: .12s;
    transition-timing-function: ease-in-out;
}

button:hover,
.button:hover {
    background-color: var(--blue);
    color: var(--yellow);
}

button.claimed,
.button.claimed {
    background-color: var(--pink);
    color: #000;
}

button.as-link {
    padding: 0;
    border: none;
    border-bottom: 1px dotted var(--blue);
    border-radius: 0;
    background: transparent;
    color: var(--blue);
    text-decoration: none;
    transition: border-bottom-style .12s ease-in-out;
}

button.as-link:hover {
    border-bottom-style: solid;
}

#login-button {
    margin-left: var(--padding);
}

form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

form.auto-width {
    width: auto;
}

form div {
    width: 100%;
    margin: 0;
}

form div label {
    display: block;
    margin: var(--padding) 0;
}

form div input {
    display: block;
    width: calc(100% - var(--padding) * 2);
    max-width: calc(400px - var(--padding) * 2);
    margin: var(--padding) 0;
    padding: var(--padding);
    background-color: var(--pink-faded-full);
    border: none;
    border-bottom: var(--border);
    font-family: var(--font-family);
    color: #000;
    outline: none;
    transition-property: color, background-color;
    transition-duration: .12s;
    transition-timing-function: ease-in-out;
}

form div input:focus {
    background-color: var(--pink);
    color: #000;
}

form textarea {
    display: block;
    width: calc(100% - var(--padding) * 2);
    max-width: calc(400px - var(--padding) * 2);
    height: 3rem;
    margin: 0 0 var(--space);
    padding: var(--padding);
    background-color: var(--pink-faded-full);
    border: none;
    border-bottom: var(--border);
    font-family: var(--font-family);
    color: #000;
    outline: none;
    resize: none;
    transition-property: color, background-color;
    transition-duration: .12s;
    transition-timing-function: ease-in-out;
}

form textarea:focus {
    background-color: var(--pink);
    color: #000;
}

form .helptext {
    display: none;
}

form .errorlist {
    padding: var(--padding);
    background-color: var(--blue);
    color: #fff;
}

form .errorlist li {
    list-style: none;
}

form button {
    margin-right: 0;
    margin-left: auto;
}

.product-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space);
    justify-content: space-between;
    margin: 0 auto var(--margin);
}

.product-grid h2 {
    margin-top: var(--space);
}

.product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space);
    padding: var(--padding);
    background-color: #e7b7b5;
    border: var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: rgba(218, 143, 141, 0.8) 0 1px 4px;
    transition: background-color .2s ease-in-out;
}

.product:hover {
    background-color: var(--pink);
}

.product .content {
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.product .thumb {
    width: 44px;
    height: 44px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.product .price {
    margin-right: var(--margin);
    white-space: nowrap;
}

.product .more {
    opacity: .25;
    transition: opacity .2s ease-in-out;
    white-space: nowrap;
}

.product:hover .more {
    opacity: 1;
}

img {
    max-width: calc(800px - 2 * var(--space));
    width: calc(100% - 2 * var(--space));
    margin: auto;
    padding: 0 var(--space);
}

.buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--margin) 0;
}

.quiet {
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 600px) {
    .product .price {
        margin-right: var(--space);
    }
}

@media screen and (max-width: 400px) {
    .product .price {
        margin-right: var(--padding);
    }
}