:root {

    --background-color: #eeeff1;
    --text-color: #1a1c20;
    --border-1-color: transparent;
    --border-2-color: #555555;
    --border-3-color:  #1a1c20;
    --layer-0: transparent;
    --layer-1: transparent;
    --layer-2: transparent;
    --layer-3: transparent;
    --layer-4: transparent;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--layer-0);
}

body {
    font-family: 'Playfair';
    background-color: var(--background-color);
    color: var(--text-color);
    border: 2px solid var(--border-3-color);
}

/*title section*/

.title {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0;
    padding-left: 35px;
    padding-right:35px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid var(--border-3-color);
}

.title .name .wordmark {
        font-size: 125px;
        font-weight: 1000;
        line-height: .75;
}

.title .name .subtitle {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.title .logo img {
        width:250px;
}

/*links*/

.links {
    margin-left: 55px;
    margin-right: 55px;
}

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

.links .mobile {
    display: none;
}

.links .tiny_mobile {
    display: none;
}

.row1 {
    padding: 10px;
    font-size: 24px;
}
.row2 {
    padding: 10px;
    font-size: 24px;
}

/*landing section*/

.landing {
    text-align: center;
    margin-bottom: 150px;
    font-size: 32px;
    line-height: 1.5;
}

.landing .quote {
        padding-top: 150px;
        padding-left: 250px;
        padding-right: 250px;
        padding-bottom: 50px;
        font-weight: 400;
}

.landing .citation {
        font-weight:550;
}

/*section headings*/

.heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.heading .section {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 0;
        margin-left: 55px;
}

.heading img {
        width: 200px;
        margin-top: 10px;
        margin-right: 55px;
}

/*content sections*/

.narrow {
    display: none;
}

.content {
    border: 2px solid var(--border-3-color);
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 200px;
    font-size: 24px;
    line-height: 1.5;
}

.description {
    margin-left: 100px;
    margin-right: 100px;
}

.columns {
    display: flex;
    justify-content:space-evenly;
}

.column {
    width: 500px;
}

.column img {
    width: 500px;
    margin-top: 30px;
}

.email {
    text-align: center;
    margin-top: 20px;
}

.banner {
    text-align: center;
}

.banner img {
    width: 190px;
    padding-left: 25px;
    padding-right: 25px;
}

.website {
    text-align: center;
}

/*button*/

.button {
    display: flex;
    justify-content: center;
}
.buttonText {
    width:fit-content;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 50px;
    border: 2px solid var(--border-3-color);
    border-radius: 20px;
}

a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 32px;
    font-weight: 600;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 20px;
}

p {
    margin-bottom: 10px;
}


/* responsivity */

@media (max-width: 1451px) {
    .content {
        padding-left: 50px;
        padding-right: 50px;
    }
    .column {
        width: 500px;
    }
    .column img {
        width: 500px;
    }
    .banner img {
        width: 175px;
    }
}

@media (max-width: 1285px) {
    .column {
        width: 375px;
    }
    .column img {
        width: 375px;
    }

    .banner img {
        width: 150px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 1100px) {
    a {
        font-size: 28px;
    }
    .landing {
        font-size: 28px;
    }

    .landing .quote {
        padding-left: 100px;
        padding-right: 100px;
    }

    .heading img {
        width: 150px;
    }

    .column {
        width: 350px;
    }

    .column img {
        width: 350px;
    }

    .buttonText {
        width:fit-content;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 30px;
        border: 2px solid var(--border-3-color);
        border-radius: 20px;
    }

    .banner img {
        width: 125px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* 934 */
@media (max-width: 934px) {
    .title {
        padding-left: 25px;
        padding-right: 25px;
    }
    .title .name .wordmark {
        font-size: 100px;
    }
    .title .name .subtitle {
        font-size: 28px;
        font-weight: 600;
    }
    .title .logo img {
        width: 200px;
    }
    .links {
        margin-left: 45px;
        margin-right: 45px;
    }
    a {
        font-size: 24px;
    }
    .landing {
        font-size: 28px;
    }
    .landing .quote {
        padding-top: 75px;
    }
    .landing .citation {
        margin-left: 150px;
        margin-right: 150px;
    }
    .description {
        margin-left: 50px;
        margin-right: 50px;
    }
    .content {
        margin-bottom: 100px;
        padding-top: 25px;
    }
    .columns {
        display: block;
    }
    .column {
        width: auto;
    }
    .wide {
        display: none;
    }
    .narrow {
        display: block;
        text-align: center;
    }
    .links .mobile {
        display: flex;
        justify-content: space-between;
    }
    .links .pc {
        display: none;
    }
    .links .tiny_mobile {
        display: none;
    }
    .banner img {
        width: 105px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* 822 */
@media (max-width: 822px) {
    .title .name .wordmark {
        font-size: 100px;
    }
    .title .logo img {
        width:200px;
    }
    .landing {
        font-size: 28px;
    }
    .landing .quote {
        padding-left: 50px;
        padding-right: 50px;
    }
    .heading img {
        width: 100px;
    }
    .banner img {
        width: 65px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* 600 */
@media (max-width: 600px) {
    .title {
        flex-direction: column-reverse;
        text-align: center;
    }
    .links {
        margin-left: 5px;
        margin-right: 5px;
    }
    .links .pc {
        display: none;
    }
    .links .mobile {
        display: none;
    }
    .links .tiny_mobile {
        margin-top: 20px;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
    }
    .landing {
        font-size: 24px;
    }
    .landing .citation {
        margin-left: 25px;
        margin-right: 25px;
    }
    .column img {
        width: 250px;
    }
    .heading .section {
        margin-left: 30px;
    }
    .heading img {
        margin-right: 30px;
    }
    .content {
        font-size: 18px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .description {
        margin-left: 10px;
        margin-right: 10px;
    }
    .email a {
        font-size: 18px;
    }
    .website a {
        font-size: 18px;
    }
}