/* ################################# */
/* ################################# */
/* # Designed by Avery Botts # */
/* ################################# */
/* ################################# */

:root {
    --site-blue: #007BFF;
}

/* ################################# */
/* # PAGE # */
/* ################################# */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Nunito Sans";
    background: url(../img/graybg.jpg);
    margin: 0;
    font-size: 16px;
}

.page_container {
    max-width: 1440px;
    margin: auto;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    /* height: 100vh; */
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    scale: 1.5;
}

/* ################################# */
/* # HEADER # */
/* ################################# */

.header {
    height: 75px;
    background-color: #1E1E1E;
}
.header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    margin: auto;
    color: white;
}
.header_container > a {
    text-decoration: none;
}
.header_logo {
    font-size: 1.2em;
    border: 2px solid var(--site-blue);
    color: #fff;
    padding: 5px 10px;
}
.header_buttons {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}
.header_buttons > a {
    color: white;
    font-size: 1.1em;
    text-decoration: none;
    transition: 0.1s;
    box-sizing: border-box;
}
.header_buttons > a.on {
    border-bottom: 2px solid var(--site-blue);
}
.header_buttons > a:hover {
    border-bottom: 2px solid var(--site-blue);
}

/* ################################# */
/* # INTRO BOX # */
/* ################################# */

.intro_container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 100px 0;
}
.name_box {max-width: 50%}
.name_box_line {
    background-color: var(--site-blue);
    height: 5px;
    width: 75px;
}
.name_box > h1 {font-size: 3em;}
.name_box > p {font-size: 1.1em;}
.name_box_title {margin: 5px; white-space: nowrap;}
.name_box_subtitle {margin: 5px;}
/* .picture_box {border: 1px solid black;} */
.picture_box img {border-radius: 15px; max-height: 500px;}

.intro_button_container {
    padding-top: 20px;
    display: flex;
    gap: 20px;
}
.intro_button_container > a {
    padding: 15px 20px;
    font-weight: bold;
    border-radius: 10px;
    transition: 0.2s;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.2em;
    box-sizing: border-box;
}
.intro_button_portfolio {
    border: 3px solid var(--site-blue);
    color: black;
}
.intro_button_portfolio:hover {
    /* color: var(--site-blue); */
    border-right: 5px solid var(--site-blue);
    border-bottom: 5px solid var(--site-blue);
}

/* ################################# */
/* # STATISTICS # */
/* ################################# */

.statistics {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin: auto;
    justify-content: center;
    align-items: stretch;
}
.stat_section {
    width: 33%;
    border-right: 3px solid var(--site-blue);
    text-align: center;
}
.stat_section:last-child {border: none;}
.stat_section_number {
    color: var(--site-blue);
    font-weight: bold;
    font-size: 2em;
    padding-left: 10px;
    white-space: nowrap;
}
.stat_section_text {
    font-size: 1.1em;
    padding-left: 10px;
}

/* ################################# */
/* # MORE INFO # */
/* ################################# */

.more_info {
    padding: 100px 0;
    width: 90%;
    margin: auto;
}
.contact_container {
    display: flex;
    gap: 20px;
    padding: 20px;
}
.contact_icon {
    scale: 1.2;
}
.contact_info {
    font-size: 1.2em;
}

/* ################################# */
/* # PORTFOLIO # */
/* ################################# */

.portfolio {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    margin: auto;
    padding-top: 50px;
    gap: 20px;
}
.portfolio a {
    color: black;
    text-decoration: none;
    width: 90%;
}
.portfolio_title {
    /* align-self: flex-start; */
    text-align: left;
    width: 100%;
}
.portfolio_title > h1 {font-size: 2.5em;}
.portfolio_item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    /* border: 2px solid var(--site-blue); */
    box-shadow: 1px 1px 3px 2px var(--site-blue);
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    box-sizing: border-box;
}
.portfolio_item_pic img {height: 300px; width: 400px; border-radius: 15px; box-shadow: 0 1px 2px 1px #ddd;}
.portfolio_item_text {max-width: 50%;}
.portfolio_item_text_title {font-size: 2em;font-weight: 600; padding-bottom: 15px}

/* ################################# */
/* # REVIEW # */
/* ################################# */

.review_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    margin: auto;
    padding-top: 50px;
    gap: 20px;
}
.review {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    padding-top: 20px;
    gap: 20px;
}
.review_title {
    /* align-self: flex-start; */
    text-align: left;
    width: 100%;
}
.review_title > h1 {font-size: 2.5em;}
.review_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* border: 2px solid var(--site-blue); */
    box-shadow: 1px 1px 3px 2px var(--site-blue);
    /* border: 3px solid var(--site-blue); */
    padding: 10px 20px;
    border-radius: 15px;
    width: 40%;
    align-self: stretch;
    box-sizing: border-box;
}
.review_item_name_container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.review_item_name {text-align: left;}
.review_item_name_container img {height: 75px; width: 75px; border-radius: 150px; box-shadow: 0 1px 2px 1px #ddd;}
.review_item_name_text {font-size: 1.1em; font-weight: 600; color: var(--site-blue); font-style: italic; padding-left: 20px;}
.review_item_text {max-width: 98%;}
.review_item_text_desc {font-size: 1em; font-weight: 600; padding-bottom: 10px}
.review_item_img {
    height: 75px;
    width: 75px;
    border-radius: 150px;
    box-shadow: 0 1px 2px 1px #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 3em;
    color: white;
    text-shadow: 1px 1px 3px #777;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.review_item_name_rating {
    color: gold;
    text-shadow: 1px 1px 1px #bbb;
    scale: 0.7;
}

@media only screen and (max-width: 1000px) {
    .name_box {max-width: 90%;}
    .name_box > h1 {font-size: 2.5em;}
    .picture_box {display: none;}

    .portfolio_item {
        flex-direction: column;
    }
    .portfolio_item_text {
        max-width: 90%;
    }
    .portfolio_item_text_title {text-align: center;}
}
@media only screen and (max-width: 900px) {
    .review {
        flex-direction: column;
        justify-content: flex-start;
    }
    .review_item {
        width: 100%;
    }
}
@media only screen and (max-width: 600px) {
    .intro_container {padding: 50px 0;}
    .name_box {max-width: 100%;}
    .portfolio {width: 100%;}
    .portfolio a {width: 95%;}
    .portfolio_item_pic img {width: 300px; height: 225px;}
    .statistics {
        flex-direction: column;
        gap: 20px;
    }
    .stat_section {
        width: 100%;
        text-align: left;
        border: none;
        border-left: 3px solid var(--site-blue);
    }
    .stat_section:last-child {
        border-left: 3px solid var(--site-blue);
    }
    /* .stat_section:last-child {display: none;} */
}