:root {
    --bg-color: #ddd;
    --text-color: black;
    --footer-color: #aaa;

    --brand-color: rgb(30, 18, 99);
    --accent-color: rgb(255, 0, 102);
    --white: white;
    --black: black;
    --light-grey: #eee;
    --grey: #aaa;
    --dark-grey: #666;

    --font-family: sans-serif;
    --mobile-break-point: 960px;

    --stroke-width: 1px;
    --stroke-color: var(--dark-grey);
    --fill-color: var(--light-grey);

    --padding: 2em;
    --gap: 1em;
    --stack-gap: 1em;

    --text-font-size: 1.2em;
    --text-line-height: calc(var(--text-font-size) * 1.2);
    --text-letter-spacing: 0.05em;

    --font-size: 100%;

    --h1-font-size: 2.2em;
    --h1-line-height: 1.2em;

    --h2-font-size: 1.8em;
    --h2-line-height: 1.2em;

    --button-border-radius: 0em;
    --button-font-size: var(--text-font-size);
    --button-color: var(--white);
    --button-padding: 0.75em;

    --input-font-size: 1.2em;
    --input-padding: 0.5em;
    --input-border-radius: 0em;

    --label-font-size: 1.1em;
}

* {
    box-sizing: border-box;
    font-family: var(--font-family);
    font-optical-sizing: auto;
    font-style: normal;
    font-size: var(--font-scale);
}

main {
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    letter-spacing: var(--text-letter-spacing);
}

footer {
    color: var(--footer-color);
}

/* layout */

.container {
    /* this width should be >= the 960px break point */
    max-width: 1120px;
    margin: auto;
}

.container-1200 {
    /* this width should be >= the 960px break point */
    max-width: 1200px;
    margin: auto;
}

.container-full {
    /* this width should be >= the 960px break point */
    width: 100%;
}

.container-1600 {
    /* this width should be >= the 960px break point */
    max-width: 1600px;
    margin: auto;
}

.with-gap {
    gap: var(--gap);
}

.split {
    display: flex;
    justify-content: space-between;
}

.stack > * {
    margin: 0;
}

.stack > * + * {
    margin-block-start: var(--stack-gap);
    display: block;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: stretch;

}

@media (max-width: 960px) {
    .row {
        flex-direction: column;
    }
}

.row > * {
    flex-grow: 1;
    flex-shrink: 1;
    align-self: stretch;
}

.grid {
    display: grid;
}

@media (min-width: 960px) {
    .grid {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

/*  align on main axis  */

.justify-start {
    display: flex;
    justify-content: flex-end;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.justify-center {
    display: flex;
    justify-content: center;
}

/* override parent flex alignment on cross axis */

.align-start {
    align-self: flex-end !important;
}

.align-end {
    align-self: flex-end !important;
}

.align-center {
    align-self: center !important;
}


/* images */

.image img {
    display: block;
    width: 100%;
}

/* type */

h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    letter-spacing: normal;
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    letter-spacing: normal;
}

p {
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* buttons */


button,
.button,
.btn {
    border: 0;
    border-radius: var(--button-border-radius);
    background-color: var(--accent-color);
    font-size: var(--button-font-size);
    color: var(--button-color);
    padding: var(--button-padding) calc(var(--button-padding) * 1.5);
    cursor: pointer;
}

/* forms */

.stack label {
    margin-bottom: calc(-1 * (var(--label-font-size) / 2.5));
}

textarea {
    min-height: calc(var(--input-font-size) * 4);
}

input,
textarea,
select {
    width: 100%;
    border: 0;
    background: 0;
    border: var(--stroke-width) solid var(--stroke-color);
    border-radius: var(--input-border-radius);
    font-size: var(--input-font-size);
    padding: var(--input-padding) calc(var(--input-padding) * 1.5);
}

label {
    font-size: var(--label-font-size);
    color: var(--black);
}





/* color helpers */

.brand {
    color: var(--brand-color);
}

.white {
    color: var(--white);
}

.black {
    color: var(--black);
}

.grey {
    color: var(--grey);
}

.light-grey {
    color: var(--light-grey);
}

.dark-grey {
    color: var(--dark-grey);
}


.bg-brand {
    background-color: var(--brand-color);
}

.bg-white {
    background-color: var(--white-color);
}

.bg-black {
    background-color: var(--black);
}

.bg-grey {
    background-color: var(--grey);
}

.bg-light-grey {
    background-color: var(--light-grey);
}

.bg-dark-grey {
    background-color: var(--dark-grey);
}

.filled {
    border: 0;
    background-color: var(--fill-color);
}

.outlined {
    border: var(--stroke-width) solid var(--stroke-color);
}

/* responsive helpers */
.show-on-break {
    display: none;
}

.hide-on-break {
    display: block;
}

@media (max-width: 960px) {

    .hide-on-break {
        display: none;
    }

    .full-width-on-break {
        width: 100%;
    }
}

/* -- hmmm maybe use medium and large - */


.pad-1 {
    padding: var(--padding);
}

.pad-2 {
    padding: calc(var(--padding) * 2);
}

.pad-3 {
    padding: calc(var(--padding) * 3);
}

.pad-v-2 {
    padding-top: calc(var(--padding) * 2);
    padding-bottom: calc(var(--padding) * 2);
}

.pad-v-3 {
    padding-top: calc(var(--padding) * 3);
    padding-bottom: calc(var(--padding) * 3);
}

.pad-h-1 {
    padding-left: calc(var(--padding));
    padding-right: calc(var(--padding));
}

.pad-h-2 {
    padding-left: calc(var(--padding) * 2);
    padding-right: calc(var(--padding) * 2);
}

.pad-h-3 {
    padding-left: calc(var(--padding) * 3);
    padding-right: calc(var(--padding) * 3);
}