@charset "UTF-8";

/* CSS Document */

@media (min-width: 0px) {

    /* Box-Sizing */
    html {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

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

    body {
        width: 100vw;
        max-width: 100%;
    }

    main {
        width: 100vw;
        max-width: 100%;
    }

    /* Links Reset */
    a {
        color: inherit;
    }

    /* Begin Styles */

    h2 {
        font-family: ltc-bodoni-175, serif;
        font-weight: 400;
        font-style: normal;
        color: black;
        font-size: 3rem;
        text-align: center;
    }

    h3 {
        font-family: ltc-bodoni-175, serif;
        font-weight: 400;
        font-style: normal;
        color: black;
        font-size: 2rem;
        text-align: center;
    }

    h4 {
        font-family: ltc-bodoni-175, serif;
        font-weight: 400;
        font-style: normal;
        color: black;
        font-size: 1rem;
        text-align: center;
    }

    p {
        font-family: proxima-nova, sans-serif;
        font-weight: 400;
        font-style: normal;
        color: black;
        font-size: 1rem;
        margin-bottom: 2%;
    }

    header {
        min-height: 100vh;
        width: 100vw;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        background-image: linear-gradient(rgba(247, 239, 238, 0.75), rgba(247, 239, 238, 0.75)), url(assets/background.jpg);
        background-attachment: local;
        /*         background-position: 60% 50%; */
        background-repeat: no-repeat;
        background-size: cover;
        /*         font-size: 0;
        line-height: 0; */
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
        box-shadow: none;
        position: relative;
        padding: 10%;
    }

    .logo {
        width: 30%;
        height: auto;

    }

    button {
        background-color: #db423d;
        width: 15vw;
        height: 7.5vh;
        border: none;
        border-radius: 10px 10px 10px 10px;
    }

    button>p {
        color: white;
        font-size: 1.5rem;
    }

    section {
        max-width: 100%;
    }

    .intro {
        width: 100vw;
        min-height: 80vh;
        background-color: rgb(247, 239, 238);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .intro_box {
        width: 80%;
        height: 80%;
        background-color: white;
        border-radius: 50px 50px 50px 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 5%;
    }

    .headshot {
        width: 25%;
        height: auto;
        margin-right: 5%;
    }

    .intro_text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
    }

    .ux {
        width: 100vw;
        height: auto;
        padding: 5% 15%;
    }

    footer {
        width: 100vw;
        height: 30vh;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgb(247, 239, 238);
        margin: 0;
    }

    .icon_box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        max-width: 100%;
        height: auto;
        padding: 2% 20%;
    }

    .icons {
        width: 50px;
        height: auto;
        margin: 0 20px;
    }

}

@media only screen and (min-width: 0px) and (max-width: 1200px) {

    h2 {
        font-size: 5rem;
    }

    h3 {
        font-size: 4rem;
    }

    h4 {
        font-size: 3rem;
    }

    p {
        font-size: 2.5rem;
    }

    header {
        padding: 40% 20%;
        flex-wrap: wrap;
    }

    .logo {
        width: 85%;
        height: auto;
    }

    button {
        min-width: 40vw;
        min-height: 10vh;
    }

    button>p {
        color: white;
        font-size: 2.5rem;
    }

    .intro_box {
        flex-direction: column;
    }

    .headshot {
        width: 30%;
        height: auto;
        margin: 0;
    }

    .ux {
        padding: 15%;
    }

}

@media only screen and (min-width: 0px) and (min-height: 0px) and (max-width: 1200px) and (max-height: 1200px) {

    /*     main {
        height: 100vh;
        max-height: 100vh;
    } */

    header {
        height: 100vh;
        max-height: 100vh;
        flex-flow: row wrap;
    }

    section {
        height: 100vh;
        /*         max-height: 100vh; */
    }

    footer {
        height: 40vh;
        max-height: 40vh;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1rem;
    }



}


@media only screen and (min-width: 0px) and (min-height: 0px) and (max-width: 1200px) and (max-height: 500px) {

    h2 {
        font-size: 2rem;
    }

    header {
        max-height: 100vh;
        height: 100vh;
        padding: 5%;
    }

    section {
        min-height: 100vh;
    }

    .logo {
        width: 30%;
        height: auto;
    }

    button {
        min-width: 20vw;
        min-height: 10vh;
    }

    button>p {
        color: white;
        font-size: 1.5rem;
    }

    .headshot {
        width: 20%;
    }

    /*     .icon_box {
        padding: ;
    } */

    .icons {
        width: 20px;
        height: auto;
    }

}


/* @media only screen and (min-width: 0px) and (min-height: 0px) and (max-width: 1200px) and (max-height: 800px) { 

    header {
        flex-flow: column wrap;
        max-height: 100vh;
        max-width: 100vw;
    }

    .logo {
        width: 40%;
        height: auto;
    }


} */