* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    background-color: lightblue;
    text-decoration: underline;
    cursor: pointer;
}

body {
    margin: 0 0;
    padding: 0;
    background-color: #EAEDED;
    display: grid;
    grid-template-areas: "header"
                        "intro"
                        "proposal"
                        "course_blog"
                        "footer";
    grid-template-rows: auto repeat 1fr 3fr 7fr auto;
    border: 1px solid black;
    background-image: url("Images/53949426179_1e3cd55d2b_o.png");
    background-size: contain;
    background-attachment: fixed;
}


.grid_box {
    vertical-align: middle;
    border: .5rem solid #db6363;
    background-color: #8b8b8b;
    margin: 5%;
}


.header {
    grid-area: header;
    color: white;
    background-color: #db6363;
    text-align: center;
    border-radius: 0px;
    margin: 0;
    width: 100%;
    font-family: "Fugaz One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3rem;
    border-bottom: 5px solid #b9b7b6;
    
}

.header h1 {
    border-bottom: 2px solid white;
     padding: 1rem;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: .5rem;
}

#intro {
    grid-area: intro;
    color: white;
    text-align: center;
}

#intro h2 {
    text-decoration: underline;
}

#introHeader{
    font-size: 1.5rem;
    text-decoration: underline;
}

#requirements{
    text-align: left;
    margin: 50px;
}

#intro p span {
    text-decoration: underline;
}
#proposal {
    grid-area: proposal;
    color: white;
}

#proposal h3 {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #8b8b8b;
    font-size: 2rem;
    padding-left: 2rem;
    text-align: center;
    border-bottom: 3px solid white;
}



#proposal article {
    background-color: #8b8b8b;
    color: white;
    margin: 0 5%;
    padding: 2%;
}

#course_blog  {
    grid-area: course_blog;
    margin: 10px;
    display: grid;
    border: 2px solid black;
    gap: 10px;
}

#expand_collapse {
    border: .25rem solid #db6363;
    margin: 0 5%;
    padding: 1%;
}

#course_blog article {
    border: 2px solid black;
    background-color: #8b8b8b;
    color: white;
    border: .25rem solid #db6363;
    margin: 0 5%;
    padding: 2%;
}


#course_blog h2 {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #8b8b8b;
    text-align: center;
    font-size: 2rem;
    padding: 1%;
    margin: 0;
    border: 2px solid black;
    background-color: #8b8b8b;
    color: white;
    border: .25rem solid #db6363;
    margin: 0 5%;
    padding: 2%;

}

.proposal_headers {
    text-decoration: underline;
}

.blog_subtitle {
    text-decoration: underline;
    font-size: 1.1rem;
}



#finalReport {
    font-size: 1.8rem;
    text-align: center;
}

#walkthrough {
    text-align: center;
    width: 70%;
    height: auto;
}


footer {
    display: flex;
    flex-wrap: wrap;
    grid-area: footer;
    height: 12%;
    min-height: 80px;
    width: 100%;
    bottom: 0px;
    color: white;
    background-color: #db6363;
    font-family: "Fugaz One", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 1rem;
    text-align: center;
    border-top: 5px solid #b9b7b6;
    align-items: center;
    justify-items: center;
    justify-content: space-evenly;
}

footer p {
    margin: 0;
}

.resume1 {
    color: white;
}

.resume1 span{
    margin-right: 1rem;
}

.resume2 {
    display: none;
}


.email span {
    margin-right: 1rem;
}

.linkedin {
    display: flex;
    align-items: center;
}

.linkedin span {
     margin-right: 1rem;
}

.linkedin a {
    height: 32px;
    align-self: center;
}

.linkedin_logo {
    height: auto;
    min-width: 2rem; 

}


@media only screen and (max-width: 1050px) {
    .linkedin span {
        display: none;
    }
    .email span{
        display: none;
    }
    .resume1 {
        display: none;
    }
    .resume2 {
        display: inline;
    }
    .prof_picture {
        margin: 2rem;
    }
    .summary {
        max-width: 90%;
    }
    .menu a{
        font-size: 1rem;
        margin: .3rem;
    }
}


@media only screen and (max-width: 480px) {
    .email span{
        display: none;
    }
    .menu a{
        font-size: .80rem;
    }
}