/*
Change Log:
Removed unused grid area under main section
Created better documentation
Changing font sizes to be more % and vh to be more responsive
Added more margin to top of main content. It was partially cut off on some devices
Added equivalent margin to bottom of main content for aesthetic
 */


/*
Create color variables and global css
 */
:root {
    --clr-primary: #173645;
    --clr-primary-hover: #a5b0b5;
    --clr-secondary: whitesmoke;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 12pt;
    background-color: var(--clr-secondary);
    font-family: Montserrat, sans-serif;
}

/*
Overall Layout
-----------------------------------
Using grid to create overall layout
 */
#content{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "header-area header-area header-area header-area"
    "main-content main-content main-content main-content"
    "footer-area footer-area footer-area footer-area";
}

/*
Header
----------------------------------------
Creates the style for the navigation bar
Using flex for internal grid cell display
 */
header {
    grid-area: header-area;
}

.nav-container {
    color: var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 4px 8px 0 rgba(23, 54, 69, 0.2), 0 6px 20px 0 rgba(23, 54, 69, 0.19);
    padding: 1vh;
    position: fixed;
    width: 100%;
}

.icon {
    display: none;
    color: var(--clr-primary);
    padding: 0 1% 0 1%;
    font-size: 14pt;
}

.nav-item {
    list-style: none;
    padding: 0 1% 0 1%;
    font-size: 14pt;
}

.nav-button {
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--clr-primary);
}

.nav-button:hover {
    color: var(--clr-primary-hover);
}

.nav-item:first-child {
    margin-right: auto;
}

/*Media queries to change nav when screen is smaller*/
@media screen and (max-width: 768px) {
    .nav-container .nav-item:not(:first-child) {display: none;}
    .nav-container {
        display: flex;
        align-items: flex-end;
        padding: 1vh;
    }
    .nav-container .icon {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .nav-container.responsive {position: relative;}
    .nav-container.responsive {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 1vh;
    }
    .nav-container.responsive .nav-item {
        display: flex;
        padding: .75vh;
    }
    .nav-container.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
}
/*End Header*/

/*
Main Content
-----------------------------------------------
Set main content to 90 vh so page is always full
 */
#main-content {
    grid-area: main-content;
    min-height: 90vh;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

/*
Home
----------------------
Home page style
Using flexbox for internal grid layout
 */
main {
    height: 40vh;
}

.profile-photo {
    background: linear-gradient(180deg, var(--clr-secondary) 50%, var(--clr-primary) 50%);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.profile-photo img {
    border-radius: 50%;
    box-shadow: 5px 5px 5px black;
    height: 30vh;
}

.figure {
    background-color: var(--clr-primary);
}

@media screen and (max-width: 768px) {
    .profile-photo {
        margin: 2vh;
    }
}

aside {
    grid-area: aside-area;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 4vh;
    font-weight: bold;
    color: var(--clr-primary);
    height: 10vh;
}

section {
    grid-area: section-area;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    height: 42vh;
}

 @media screen and (max-width: 768px) {
     section {
         display: flex;
         flex-direction: column;
         margin: 1vh;
         height: 65vh;
     }
     section div {
         margin: 1vh;
         font-size: 3vh;
     }
 }

section div {
    color: var(--clr-primary);
    font-size: 2vh;
    padding: 1vh;
    margin: 1vh;
    flex: 1 1 0;
    border: 1px solid var(--clr-primary);
    box-shadow: 10px 10px 5px var(--clr-primary);
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.skills li {
    font-size: 2vh;
    list-style: none;
    margin-left: 25px;
}
/*End Home*/

/*
Footer
---------------------------------
Using flexbox for internal layout
 */
footer {
    grid-area: footer-area;
    border-top: 1px solid var(--clr-primary);
}

.footer-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.footer-container li {
    list-style: none;
}

.footer-container a {
    text-decoration: none;
    color: var(--clr-primary);
}

.footer-container a:hover {
    color: var(--clr-primary-hover);
    border-bottom: 1px solid var(--clr-primary-hover);
}

.footer-item {
    padding: 10px 0 5px 0;
}

footer p {
    color: var(--clr-primary);
    text-align: center;
    padding-bottom: 5px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    /*margin-top: 10px;*/
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--clr-primary);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--clr-primary);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/*End Footer*/

/*
Primary Button Style
 */
.btn-primary {
    color: var(--clr-secondary);
    background-color: var(--clr-primary);
    padding: 5px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.btn-primary i {
    color: var(--clr-primary)
}

.btn-primary:hover {
    background-color: var(--clr-primary-hover);
    color: var(--clr-primary);
}

.btn-primary:hover i {
    color: var(--clr-primary-hover);
}

/*
Resume
-----------------------
Resume page styles
 */
#resume {
    display: none;
    margin: 5vh 2vh 0 2vh;
    color: var(--clr-primary);
}

.resume-container {
    display: grid;
    height: 100vh;
    overflow: scroll;
}

.resume-headers {
    font-size: 2vh;
    font-weight: bold;
    border-bottom: 1px solid var(--clr-primary);
    padding: 0 5px;
}

.job-title {
    display:flex;
    padding: 10px 5px 5px 5px;
    justify-content: space-between;
    font-size: 14pt;
    font-weight: bold;
}

.job-location {
    padding: 5px;
}

.job-description {
    padding: 5px;
}

.key-accomplishments p {
    padding: 5px;
    text-decoration: underline;
}

.key-accomplishments ul {
    margin-left: 50px;
}

.key-accomplishments ul li {
    padding: 5px;
}
/*End Resume*/

/*
About
-------------------
About page styles
 */
#about {
    display: none;
}

.about-container {
    display: grid;
    margin: 5vh 1vh 1vh 1vh;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "one one two two"
    "three three four four";
    grid-gap: 1vh;
}

.about-item1 {
    grid-area: one;
    height: 45vh;
    background: url("../img/IMG_5730.jpeg") center center;
    background-size: cover;
    box-shadow: 7px 7px 5px var(--clr-primary);
}

.about-item2 {
    grid-area: two;
    height: 45vh;
    color: var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh;
    font-size: 2vh;
}

.about-item3 {
    grid-area: three;
    height: 45vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 1vh;
}

.mini-grid1 {
    background: url("../img/IMG_1665.jpeg") center center;
    background-size: cover;
    box-shadow: 7px 7px 5px var(--clr-primary);
}

.mini-grid2 {
    background: url("../img/IMG_3097.jpeg") center center;
    background-size: cover;
    box-shadow: 7px 7px 5px var(--clr-primary);
}

.mini-grid3 {
    background: url("../img/IMG_2591.jpeg") center center;
    background-size: cover;
    box-shadow: 7px 7px 5px var(--clr-primary);
}

.mini-grid4 {
    background: url("../img/IMG_2210.jpeg") center center;
    background-size: cover;
    box-shadow: 7px 7px 5px var(--clr-primary);
}

.about-item4 {
    grid-area: four;
    display: flex;
    width: 100%;
    height: 100%;
    box-shadow: 7px 7px 5px var(--clr-primary);
}

.about-item4 iframe {
    display: flex;
    flex-grow: 1;
}
/*End About*/

/*
Contact
--------------------
Contact page styles
 */
#contact {
    display: none;
}

.contact-container {
    display: grid;
    margin: 5vh 0 2vh 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "reach-out reach-out"
    "info info";
    overflow: scroll;
}

.reach-out {
    grid-area: reach-out;
    height: 42vh;
    background: linear-gradient(180deg, var(--clr-secondary) 50%, var(--clr-primary) 50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.reach-out p {
    font-size: 50pt;
    font-weight: bold;
    background: -webkit-linear-gradient(90deg, var(--clr-secondary) 50%, var(--clr-primary) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.contact-info {
    grid-area: info;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: var(--clr-primary);
    overflow: scroll;
}

.contact-info div {
    font-size: 3vh;
}
/*End Contact*/

/*
Log Visit
 */
#log-visit {
    display: none;
}

.wrapper {
    display: flex;
    height: 70vh;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    padding: 1vh;
    flex-wrap: wrap;
    margin-top: 5vh;
}

.form-row {
    display: flex;
    justify-content: flex-end;
    padding: 1vh;
    color: var(--clr-primary);
}

label {
    font-size: 2vh;
}

.form-row > label {
    padding-right: 1vh;
    flex: 1;
}

.form-row > input {
    flex: 2;
}

input {
    color: var(--clr-primary);
    border: 2px solid var(--clr-primary)
}

.form-row p {
    font-size: 2vh;
}

#find {
    flex: 1;
}

.submit-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#submitBtn {
    padding: 10px;
    background-color: var(--clr-primary);
    color: var(--clr-secondary);
}

.validated {
    border: 2px solid green;
}

.invalid {
    border: 2px solid red;
}

/*
Thank you
 */
#thank-you {
    display: none;
    color: var(--clr-primary);
}

.thank-you-wrapper {
    display: flex;
    color: var(--clr-primary);
    height: 80vh;
    justify-content: center;
    align-items: center;
    font-size: 5vh;
}

#errors {
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    margin-top: 2vh;
    width: 100%;
    flex-direction: column;
}