@charset "utf-8";

@font-face {
    font-family: 'Roboto';
    src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')
}

/*
All Styles in the root of this file are setup to style the mobile version of the
site. This makes it easier to style for the desktop later while keeping it responsive.

When changing a page make sure to change the mobile version first (all styles outside
of the media queries found at the bottom of the file)

After completing the mobile view move to the 1000px media query at the bottom of the file
You can see this view by entering responsive mode of your browsers development console
and selecting responsive mode and typing in 1000px to the first value.

You can now make the changes to the styles in the 1000px media query and make sure it works
at that breakpoint

After Mobile and 1000px styles are correct move on to the 1250px media query, this will
be the final breakpoint so this is what the final layout of the page will be.

1rem is equal to 10px

User relative units for all sizing and spacing
*/
* {
    box-sizing: border-box;
}

html {
    font-size: 10px;
    margin: 0;
    padding: 0;
    font-family: roboto, serif;
}

main {
    background: rgba(0, 0, 0, 0.5) url(test_bg-01.png) no-repeat;
    background-size: cover;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

#main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
}

#hero-frame {
    background: url('../img/hero.jpg') no-repeat;
    background-size: cover;
    padding-bottom: 2rem;

}

nav {
    display: flex;
    flex-direction: column;
}

#title-bar {
    width: 100%;
    display: flex;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(181.03deg, rgba(15, 15, 15, 0.8) -52.64%, rgba(103, 164, 75, 0.64) 32.29%);
    backdrop-filter: blur(10px);
}

#title-bar h1 {
    font-size: 4rem;
    margin: 4% 0;
    margin-left: 4%;
    text-align: center;
    color: rgba(255, 255, 255, 0.65);
    width: 100%;
}

#title-bar #header-img,
#links,
#mobile-menu {
    display: none;
}

#menu {
    width: 4.4rem;
    height: 4.4rem;
    z-index: 1;
    margin-top: 1rem;
    margin-right: 1rem;
}

#menu:hover {
    cursor: pointer;
}

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

.mobile-wrapper ul {
    display: grid;
    align-content: center;
    background: linear-gradient(180.06deg, rgba(255, 255, 255, 0.8) 26.69%, rgba(15, 15, 15, 0.7425) 139.91%);
    backdrop-filter: blur(10px);
}

.mobile-wrapper ul a {
    width: 100%;
    padding: 4.4rem 0;
    text-decoration: none;
    font-size: 1.8rem;
    color: black;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.95);
}

.mobile-wrapper ul a:last-of-type {
    border-bottom: none;
}

#mobile-menu {
    width: 100%;
}

#navlinks {
    display: grid;
    grid-auto-flow: column;
    background: linear-gradient(180.06deg, rgba(255, 255, 255, 0.75) 26.69%, rgba(15, 15, 15, 0.95) 139.91%);
    box-shadow: 0px 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3rem);
    padding: 1.5rem;
    font-weight: bold;
}

#navlinks li {
    text-align: center;
    width: 100%;
    font-size: 2.4rem;
}

#navlinks a {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: 1rem;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
}

#section {
    padding: 1rem 0;
}

#home-article {
    background: rgba(219, 158, 41, 0.9);
    backdrop-filter: blur(6px);
    font-size: 1.8rem;
    min-width: 65%;
    max-width: 80%;
    border-radius: 1rem;
    margin: 0 auto;
}

#home-article p {
    margin: 1rem 2rem;
    padding: 5rem 10rem;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.video {
    height: 100%;
    padding: 1rem;
}

#video {
    position: relative;
    padding-bottom: 56.25%;
    margin: 0;
    display: grid;
    align-items: center;
}

.vid {
    text-align: center;
    position: absolute;
    clear: both;
    height: 100%;
    width: 100%;
}

footer {
    width: 100%;
    clear: both;
    text-align: left;
    background: linear-gradient(269.9deg, rgba(105, 157, 81, .95) 30.32%, rgba(103, 164, 75, .85) 41.74%);
    box-shadow: 0 -0.8rem 0.8rem rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    margin-top: auto;
}

#footer {
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    width: 100%;
}

#footer p {
    width: 75%;
    font-size: 1.8rem;
    padding: 0 1rem;

}

#footer a {
    width: 10rem;
    height: 10rem;
}

#footer a img {
    width: 6rem;
    height: 6rem;
}

.logos {
    margin-left: auto;
    margin-right: 1rem;
}

/*************Portfolio Styles*****************/

.portfolio-container {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.portfolio-container h2 {
    font-size: 2.4rem;
    font-weight: bold;
    margin: 1rem 0;
}

.portfolio-container p {
    font-size: 1.5rem;
}

.portfolio-container h3 {
    font-size: 1.8rem;
    width: 75%;
    margin: 1rem auto;
}

.portfolio-container article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 75%;
    margin: 1rem auto;
    background: rgba(209, 226, 196, 0.5);
    box-shadow: 0px 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
    border-radius: 1.5rem;
    padding: 2rem;
}

.portfolio-container article p {
    width: 75%;
}

.portfolio-container img {
    margin: 1rem;
    width: 75%;
}

.portfolio-container button {
    font-size: 1.5rem;
    background: rgba(209, 226, 196, 0.8);
    border: 1px solid rgba(185, 224, 155, 0.9);
    box-shadow: 1.5rem 1.5rem 2.5rem rgba(0, 0, 0, 0.1),
        inset 1.5rem 1.5rem 3rem rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
    padding: 1.3rem;
    outline: none;
    margin-top: 1rem;
}

.portfolio-container button a {
    color: black;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}

/*************Learning Styles******************/
.learning-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.learning-container h2 {
    font-size: 2.4rem;
    font-weight: bold;
    margin: 1rem 0;
}

.learning-container h3 {
    font-size: 1.8rem;
    width: 75%;
    margin: 1rem auto;
}

.learning-container article {
    text-align: center;
    width: 75%;
    background: rgba(209, 226, 196, 0.5);
    box-shadow: 0px 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
    border-radius: 1.5rem;
    padding: 2rem;
    margin: 1rem auto;
}

.learning-container article h6 {
    font-size: 1.6rem;
    font-weight: bold;
}

.learning-container article ul li {
    margin: .5rem;
    font-size: 1.3rem;
}

.learning-container img {
    margin: 1rem;
    width: 75%;
}

/*************Measurement Styles***************/
.measurement {
    text-align: center;
    font-size: 2.4rem;
    padding: 2rem 0;
}

#measuremain {
    min-height: calc(100vh - 10rem);
}

.measurementbody:last-child {
    justify-content: flex-end;
}

.inner-container {
    width: 90%;
    text-align: center;
    font-size: 1.8rem;
    background: rgba(209, 226, 196, 0.8);
    border-radius: 1.5rem;
    padding: 2rem;
    margin: 3rem auto;
}

.inner-container p {
    padding: 1rem;
}

.inner-container button {
    background: rgba(209, 226, 196, 0.8);
    border: 1px solid rgba(185, 224, 155, 0.9);
    box-shadow: 1.5rem 1.5rem 2.5rem rgba(0, 0, 0, 0.1),
        inset 1.5rem 1.5rem 3rem rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    outline: none;
    margin-top: 1rem;
}

.inner-container button a {
    color: black;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}

/*************Contact Styles*******************/

.contact {
    text-align: center;
    font-size: 2rem;
    padding: 1rem;
}

div#nav {
    background: rgba(0, 0, 0, 0.5) url(test_bg-01.png) no-repeat;
    background-size: cover;
}

.form {
    display: flex;
    flex-direction: column;
}

label {
    display: none;
}

form {
    text-align: center;
}

input,
textarea {
    width: 90%;
    padding: 2rem;
    margin: 1rem;
    border: 1px solid black;
    border-radius: 1.5rem;
    background: #D1DBBC;
}

form button {
    width: 50%;
    font-size: 1.6rem;
    padding: 2rem;
    border: 1px solid black;
    border-radius: 1.5rem;
    background: #D1DBBC;
}

.contact-cards {
    display: grid;
    grid-template-rows: 50% 50%;
    text-align: center;
    margin: 3rem 0;
}

.phone h3,
.location h3 {
    font-size: 2.4rem;
    padding: 1rem;
}

.phone,
.location {
    margin: 2rem;
    font-size: 1.8rem;
    background: rgba(103, 164, 75, 0.5);
    padding: 2rem;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    box-shadow: 1.5rem 1.5rem 2.5rem rgba(0, 0, 0, 0.25);
}

/******************* Modal Styles ********************/
.modal-title {
    text-align: center;
    font-size: 2rem;
}

.modal-body article {
    width: 75%;
    margin: 1rem auto;
}

.modal-body article h6 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

.modal-body article ul li {
    list-style-type: disc;
    margin-left: 2rem;
    font-size: 1.6rem;
}

.mbtn {
    margin: 0 auto;
    width: 25%;
    height: 4.4rem;
    font-size: 1.5rem;
    background: rgba(209, 226, 196, 0.8);
    border: 1px solid rgba(185, 224, 155, 0.9);
    box-shadow: 1.5rem 1.5rem 2.5rem rgba(0, 0, 0, 0.1),
        inset 1.5rem 1.5rem 3rem rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
    padding: 1.3rem;
    outline: none;
}

.char h6,
.char p {
    text-align: center;
}

.char p {
    font-style: italic;
}

.char ol li {
    list-style-type: decimal;
    font-size: 1.6rem;
}

.portfolio-container button a.arti {
    text-transform: none;
}

.mng-art p {
    font-size: 1.4rem;
    margin: 1rem auto;
    font-weight: normal;
}

.mng-art p strong {
    font-weight: bold;
}

.mng article:nth-of-type(2) p {
    font-size: 1.6rem;
    margin: 1rem auto;
}

.mng article:nth-of-type(2) p:nth-of-type(2) {
    font-size: 1.4rem;
}


.mng article:nth-of-type(2) ul li {
    font-size: 1.4rem;
    margin: 1rem auto;
    margin-left: 1rem;
}


@media screen and (max-width: 375px) {


    #title-bar h1 {
        font-size: 3rem;
    }

    #home-article p {
        margin: 1rem 2rem;
        padding: 1rem;
    }

    #hero-frame {
        padding-bottom: 1rem;
    }

    .vid {
        margin-bottom: 1rem;
    }

    #footer {
        padding: 1rem 0;
        grid-template-rows: auto;
    }

    #footer p {
        font-size: 1.4rem;
        width: 100%;
        text-align: center;
    }

    #footer a {
        width: 4rem;
        height: 4rem;
    }

    #footer a img {
        width: 4.4rem;
        height: 4.4rem;
        padding: .5rem;
    }

    .logos {
        margin: 0 auto;
        margin-bottom: 1rem;
        display: flex;
        grid-row-start: 1;
    }

    [class*="col-"] {
        width: 100%;
    }


}

@media screen and (min-width: 375px) {
    #title-bar h1 {
        font-size: 3rem;
    }

    #home-article p {
        margin: 1rem 2rem;
        padding: 1rem;
    }

    #hero-frame {
        padding-bottom: 1rem;
    }

    .vid {
        margin-bottom: 1rem;
    }

    #footer {
        padding: 1rem 0;
    }

    #footer p {
        font-size: 1.4rem;
        width: 100%;
        text-align: center;
    }

    #footer a {
        width: 4.4rem;
        height: 4.4rem;
    }

    #footer a img {
        width: 4.4rem;
        height: 4.4rem;
        padding: .5rem;
    }

    .logos {
        margin: 0 auto;
        margin-bottom: 1rem;
        display: flex;
        grid-row-start: 1;
    }

}

@media screen and (min-width: 1000px) {
    #footer p {
        font-size: 1.2rem;
        grid-row-start: 1;
    }

    #footer a {
        width: 8rem;
        height: 8rem;
    }

    #footer a img {
        width: 6rem;
        height: 6rem;
    }

    .logos {
        margin: 0 auto;
        margin-right: 1rem;
    }

    .wrapper {
        display: grid;
        grid-template-rows: auto 50%;
        align-items: center;
        height: 100%;
    }

    #section {
        padding: 0;
    }

    #home-article {
        font-size: 1.6em;
    }

    #menu {
        display: none;
    }

    #title-bar #header-img {
        display: block;
        width: 33%;
        margin-right: 2rem;
    }

    #title-bar h1 {
        font-size: 4rem;
        text-align: left;
        margin-left: 2rem;
    }

    #navlinks {
        flex-direction: row;
    }

    #navlinks li {
        font-size: 1.6rem;
    }

    .video {
        margin: 10%;
    }

    #video {
        position: relative;
        padding-bottom: 56.25%;
        margin: 0;
    }

    .vid {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    #links {
        display: block;
    }

    .measurement {
        font-size: 3.2rem;
        margin: 3rem 0 0;
    }

    .inner-container {
        padding: 5rem;
        width: 75%;
    }

    .inner-container p {
        font-size: 2.4rem;
        width: 85%;
        margin: 0 auto;
        text-align: left;
        line-height: 3.5rem;
    }

    .inner-container button {
        margin-top: 10rem;
    }

    .contact-wrapper {
        background: rgba(103, 164, 75, 0.3);
        box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.25);
        border-radius: 0 1rem 1rem 0;
        width: 85%;
        margin-top: 5%;
        padding-top: 5rem;
        display: flex;
        flex-direction: row-reverse;

    }

    .formoutline {
        width: 80%;
        background: rgba(177, 221, 144, 0.8);
        box-shadow: 1.5rem 1.5rem 3rem rgba(0, 0, 0, 0.25),
            inset .1rem .1rem 8rem rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(2.5rem);
        border-radius: 1.2rem 1.2rem 0 0;
        margin-top: 5rem;
        margin-right: 5rem;
        padding-bottom: 5rem;
    }

    .steve {
        height: 25%;
        margin-top: auto;
    }

    .form {
        width: 75%;
        margin: 0 auto;
        text-align: center;
    }

    .form form fieldset input,
    .form form fieldset textarea {
        width: 75%;
    }

    .form h2 {
        font-size: 2.4rem;
        font-weight: bold;
    }

    .contact-cards {
        grid-template-columns: 50% 50%;
    }

    .contact-cards article {
        width: 80%;
        height: 100%;
        box-sizing: content-box;
    }

    .learning-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .learning-container h2,
    .learning-container h3 {
        grid-column: span 2;
    }

    .learning-container div.img {
        grid-column: span 2;
        margin: 0 auto;
        width: 75%;
    }

    .learning-container .goals {
        padding-bottom: 3.5rem;
    }

    .portfolio-container img {
        width: 50%;
        margin: 0 auto;
    }

}

@media screen and (min-width: 1250px) {
    #title-bar h1 {
        margin: 2% 2rem;
    }

    .wrapper {
        display: grid;
        grid-template-columns: auto 50%;
        align-items: center;
        height: 100vh;
    }

    article#home-article {
        width: 100%;
        font-size: 1.8em;
        margin-left: 0;
        border-radius: 0 1rem 1rem 0;
    }

    #video {
        width: 100%;
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
    }

    .vid {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 7rem 0;
    }

    .video {
        padding: 0;
        height: auto;
    }

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

    .inner-container {
        padding: 5rem;
        width: 65%;
    }

    .inner-container p {
        font-size: 2.4rem;
        width: 75%;
        margin: 0 auto;
        text-align: left;
        line-height: 3.5rem;
    }

    .inner-container button {
        margin-top: 10rem;
    }

    .contact-cards article {
        padding: 4rem 2rem;
    }

    .learning-container div.img {
        width: 40%;
        margin: 0 auto;
    }

    .portfolio-container {
        display: grid;
        grid-template: 1fr 1fr 1fr;
        justify-content: center;
        margin: auto;
    }

    .portfolio-container div {
        display: grid;
    }

    .portfolio-container h2 {
        grid-column: span 3;
    }

    .portfolio-container img {
        width: 75%;
    }

    .portfolio-container button {
        margin-top: 2.5rem;
    }


}

.success-container {
    width: 50%;
    margin: 0 auto;
    display: flex;
    height: 100%;
    align-content: center;
    align-items: center;
    margin-top: 2.5rem;
}

.success {
    margin: 0 auto;
    font-size: 2.4rem;
    text-align: center;

}