@media only screen and (max-width: 600px) {
    :root {
        --col-light-purple: #F8ECFF;
        --col-med-purple: #C59DDB;
        --col-dark-purple: #693D7E;
    }

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

    .page-container {
        position: relative;
        min-height: 100vh;
    }

    main {
        padding-bottom: 35px;
    }

    body {
        box-sizing: border-box;
        margin: 0;
    }

    header {
        width: 100%;
        height: 30vw;
        background-image:url(/static/images/header.svg);
        background-size: 300%;
        background-repeat: no-repeat;
    }

    header h1 {
        margin: 0 50px;
        padding: 2.5vw;
        text-align: right;
        font-family: "Joan", serif;
        font-weight: 400;
        font-size: 10vw;
    }

    footer {
        position: absolute;
        display: flex;
        align-items: center;
        bottom: 0;
        height: 25px;
        width: 100%;
        background-color: var(--col-light-purple);
    }

    .footer-contents {
        text-indent: 10px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
    :root {
        --col-light-purple: #F8ECFF;
        --col-med-purple: #C59DDB;
        --col-dark-purple: #693D7E;
    }

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

    .page-container {
        position: relative;
        min-height: 100vh;
    }

    main {
        padding-bottom: 35px;
    }

    body {
        box-sizing: border-box;
        margin: 0;
    }

    header {
        width: 100%;
        height: 20vw;
        background-image:url(/static/images/header.svg);
        background-size: 200%;
        background-repeat: no-repeat;
    }

    header h1 {
        margin: 0;
        padding: 1.5vw;
        text-align: center;
        font-family: "Joan", serif;
        font-weight: 400;
        font-size: 7vw;
    }

    footer {
        position: absolute;
        display: flex;
        align-items: center;
        bottom: 0;
        height: 25px;
        width: 100%;
        background-color: var(--col-light-purple);
    }

    .footer-contents {
        text-indent: 10px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    :root {
        --col-light-purple: #F8ECFF;
        --col-med-purple: #C59DDB;
        --col-dark-purple: #693D7E;
    }

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

    .page-container {
        position: relative;
        min-height: 100vh;
    }

    main {
        padding-bottom: 35px;
    }

    body {
        box-sizing: border-box;
        margin: 0;
    }

    header {
        width: 100%;
        height: 20vw;
        background-image:url(/static/images/header.svg);
        background-size: 200%;
        background-repeat: no-repeat;
    }

    header h1 {
        margin: 0;
        padding: 1.5vw;
        text-align: center;
        font-family: "Joan", serif;
        font-weight: 400;
        font-size: 7vw;
    }

    footer {
        position: absolute;
        display: flex;
        align-items: center;
        bottom: 0;
        height: 25px;
        width: 100%;
        background-color: var(--col-light-purple);
    }

    .footer-contents {
        text-indent: 10px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    :root {
        --col-light-purple: #F8ECFF;
        --col-med-purple: #C59DDB;
        --col-dark-purple: #693D7E;
    }

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

    .page-container {
        position: relative;
        min-height: 100vh;
    }

    main {
        padding-bottom: 35px;
    }

    body {
        box-sizing: border-box;
        margin: 0;
    }

    header {
        width: 100%;
        height: 10vw;
        background-image:url(/static/images/header.svg);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    header h1 {
        margin: 0;
        padding: 1.5vw;
        text-align: center;
        font-family: "Joan", serif;
        font-weight: 400;
        font-size: 4vw;
    }

    footer {
        position: absolute;
        display: flex;
        align-items: center;
        bottom: 0;
        height: 25px;
        width: 100%;
        background-color: var(--col-light-purple);
    }

    .footer-contents {
        text-indent: 10px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 1200px) {
    :root {
        --col-light-purple: #F8ECFF;
        --col-med-purple: #C59DDB;
        --col-dark-purple: #693D7E;
    }

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

    .page-container {
        position: relative;
        min-height: 100vh;
    }

    main {
        padding-bottom: 35px;
    }

    body {
        box-sizing: border-box;
        margin: 0;
    }

    header {
        width: 100%;
        height: 10vw;
        background-image:url(/static/images/header.svg);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    header h1 {
        margin: 0;
        padding: 1.5vw;
        text-align: center;
        font-family: "Joan", serif;
        font-weight: 400;
        font-size: 4vw;
    }

    footer {
        position: absolute;
        display: flex;
        align-items: center;
        bottom: 0;
        height: 25px;
        width: 100%;
        background-color: var(--col-light-purple);
    }

    .footer-contents {
        text-indent: 10px;
        font-size: 12px;
    }
 }