:root {
    /* --testing: 1px solid red; */
    --white: hsl(279, 30%, 92%);
    --black: hsl(0, 0%, 7%);
    --hero: hsl(279, 100%, 50%);
    --dark: hsl(279, 63%, 35%);
    --light: hsl(279, 63%, 75%);
    /* --hero-hex: #a600ff; */
    --title-text: light-dark(var(--dark), var(--hero));
    --text: light-dark(var(--dark), var(--light));
    --link: light-dark(var(--dark), var(--light));
    --background: light-dark(var(--white), var(--black));
    /* --text: var(--white); */
    color-scheme: light dark;
    /* --black: #121212; */
}

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

* {
    margin: 0;
    line-height: 1.5;
    outline: var(--testing);
}

body {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr 1fr 1ft 1fr;
    text-align: center;

    min-height: 90vh;
    min-height: 90svh;
    min-height: 90dvh;

    font-family: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text);
    background-color: var(--background);
}

h1,
h2 {
    font-weight: normal;
}

h1 {
    font-size: min(14vw, calc(3vw + 2vh + 3rem));
    line-height: .7;
    color: var(--title-text)
        /* display: inline-block; */

}

#logo {
    /* height: calc(12vh + 8rem); */
    font-size: min(14vw, calc(3vw + 2vh + 3rem));
    /* width: 12ch; */
    width: 9ch;
    max-height: 50vh;
}

#discord {
    /* max-width: 3rem; */
    height: 1.5lh;
    vertical-align: middle;
}

.link-button {
    border-radius: 3px;
    border: 1px solid var(--link);
    color: var(--link);
    text-decoration: none;
    /* padding-top: 10rem; */
    /* margin-top: 1rem; */
    padding: .75rem;
    font-weight: bold;
}

.link-button:hover {
    background-color: var(--link);
    color: var(--background);
}

.hero-fill {
    fill: var(--hero);
    fill-rule: nonzero;
}

.hero-dark-fill {
    fill: var(--dark);
    fill-rule: nonzero;
}

p {
    font-size: 1.2rem;
    margin: 1rem;
    max-width: 70ch;
}