@charset "utf-8";

/* This is a for the main portion of my profile page
    extended from a college project.*/

body {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 7% 1fr;
    grid-template-areas: 
        "header"
        "main"
        "footer";

    height: 100%;
    width: 100%;
    max-width: 800px;
    margin: 0.0em auto;
    color: black;
    font-weight: bold;
}

main {
    display: grid;
    height: 100%;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    grid-template-areas:
        "intro intro "
        "  .   star"
        "port1 star"
        "port1 star"
        "  .   star"
        "port2 star"
        "port2 star"
        "  .   star";
    font-family:'Times New Roman', Times, serif;
    align-items: center;
    align-content:space-between;
    justify-items: center;
    justify-content: space-around;
    padding: auto 0.5em;
    margin: 0 auto;
    overflow-y: auto;
}

#mainnav ul {
    padding:calc(0.5em);
    margin: 0 auto;
}

#mainnav a {
    border-radius: 1.5rem;
}

#intro {
    display: grid;
    grid-area: intro;
    margin-top: 1.0em;
}

#port1 {
    display: grid;
    grid-area: port1;
    margin: 0.0em auto;
}

#port2 {
    display: grid;
    grid-area: port2;
    margin: 0.0em auto;
}

#star {
    display: grid;
    grid-area: star;
    max-width: 22.0em;
    min-width: 18.0em;
}

h3 {
    text-align: center;
    color: rgba(171, 161, 138, 0.9);
    box-shadow: rgba(0, 0, 0, 0.7) 0px 10px 15px;
    text-decoration: wavy;
    font-size: 1.4em;
    margin-bottom: 1.0em;
    padding: .3em;
}

#prof {
    padding: .5em;
    border-radius: 1.5rem;
    border-top-left-radius: 0%;
    border-bottom-right-radius: 0%;
}

article {
    background-color: rgb(157, 195, 186);
    box-shadow: rgba(0, 0, 0, 0.7) 0px 10px 15px;
    font-weight: strong; 
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#profile_article {
    text-indent: 0;
    width: 100%;
}

#summary_article {
    padding: 0 .4em;
} 

#picturebox {
    display: grid;
    min-height: 16.0em;
    margin: 0.0em auto;
    justify-content: center;
    justify-items: center;
}

#picturebox {
    padding: 0 0.4em 1.3em;
    background-color: rgb(157, 195, 186);
}

img {
    position: relative;
    height: 110%;
    width: auto;
    resize: both;
    justify-items: center;
    border-radius: 1.5rem;
}

#picturebox::before {
    display: inline-block;
    text-shadow: black 3px 3px 8px;
    position: relative;
    text-align: center;
    text-decoration: wavy;
    color: rgba(171, 161, 138, 0.9);
    border: 8px solid rgb(157, 195, 186);
    border-radius: 1.5rem;
    box-shadow: rgba(0, 0, 0, 0.7) 0px 10px 15px;
    font-size: 1.4em;
    padding-top: .2em;
    padding-bottom: .2em;
    width: 93%;
    margin-bottom: 0.5em;
    content: "Me";
}

p {
    justify-content: center;
    font-size: .9em;
    font-family:'Times New Roman', Times, serif;
    font-weight: bolder;
}

#port1, #profile_article, #summary_article, #profile_header, #summary_header {
    border: 8px solid rgb(157, 195, 186);
    border-radius: 1.5rem;
}

footer:hover {
    font-size: 1.6em;
    opacity: 1.0;
    transition-duration: .5s;
}

@media screen and (max-width: 800px) and (orientation: portrait) {
    main {
        grid-template-columns: auto;
        grid-template-rows:  auto auto auto auto auto;
        grid-template-areas: 
            "intro"
            "port1"
            "port2"
            "star";
    }

    footer:hover {
        font-size: 1.0em;
        line-height: 1.4;
        transition-duration: .5s;
    }
}

@media screen and (max-height: 650px) and (orientation: landscape) {
    main {
        grid-template-columns: auto;
        grid-template-rows:  auto auto auto auto;
        grid-template-areas:
            "intro" 
            "port1"
            "port2"
            "star";
    }
}