:root {

    --white: #fff9ed;
    --white2: #f3f3f3;
    --white3: #fff;
    --grey1: #CEB5A7;
    --brown: #A17C6B;
    --purple: #b900e2;
    --purple2: #9100B2;
    --black: #1E1E2E;
    
    --font-text: proxima-nova, Helvetica, serif;
    --font-title: big-caslon-fb, Helvetica;
    --font-subtitle: miller-text, Helvetica;

    --max-bodyw: 1400px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--white3);
    color: var(--black);
    font-family: var(--font-text);
}
ul {
    list-style-type: none;
}

a:not(.no-underline):hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-weight: bold;
    font-variant: small-caps;
}

button {
    cursor: pointer;
    font-family: var(--font-text);
    border-radius: 0.5rem;
    background-color: var(--purple2);
    padding: 0.25rem 0.75rem;
    font-weight: bold;
    color: var(--white3);

    transition: all 0.15s ease-in-out;

    &:hover {
        filter: brightness(125%);
    }
}

.glow {
    font-weight: bold;
    color: var(--purple2);
}