/*==== Background ====*/
body
{
    background-color: #9AC9DA;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
    "header  header"
    "banner  banner"
    "aboutMe aboutMe"
    "footer  footer";
    margin:0px;
    height:100vh;
    
}
/*==== Header ====*/
header
{
    grid-area: header;
    display:flex;
    flex-direction:row;
    background-color: #326280;
    color:#e6f1f5;
    padding: 5px;

}
header h1
{
    align-content:center;
    font-size: 35px;
    margin:0px 50px 0px 50px;
}

/*==== Hamburger ====*/
.hamburger
{
    display:none;
    flex-direction:column;
    gap:5px;
}

.hamburger span
{
    width:25px;
    height:3px;
    background: white;
}

/*==== Nav ====*/
header nav
{
    font-size:2rem;
    padding:10px;
}

header nav a:not(:last-child)::after
{
    content: "|";
    margin-left: 5px;
    color:#e6f1f5;
}

/*==== Banner ====*/
.banner
{
    grid-area: banner;
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color: #4983A8;
    color:#e6f1f5;
}

/*==== Main ====*/

main
{
    grid-area:aboutMe;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}

main img
{
    border-radius:50%;
    margin: 20px;
}

.aboutMe
{
    background-color:#e6f1f5;
    border-radius: 30px;
    padding:10px;
    margin: 20px;
}

/*==== Footer ====*/

footer
{
    background-color: #326280;
    grid-area: footer;
}
footer h1
{
    color:#e6f1f5;
    padding: 3px;
}
footer ul li a
{
    font-size:20px;
}

/*==== Links ====*/
a
{
    text-decoration:none;
}
a:link
{
    color:#e6f1f5;
}

a:visited
{
    color:#e6f1f5;
}

a:hover
{
    color:#9AC9DA;
}

a:focus
{
    color:#9AC9DA;
}
a:active
{
    color:#b7ebeb;
}

/*==== Responsive ====*/
@media screen and (max-width: 768px)
{
    .hamburger
    {
        display:flex;
    }

    nav
    {
        display: none;           
        position: absolute;     
        top: 90px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: #326280;
        text-align: center;
    }

    nav a
    {
        padding: 15px 0;
        border-top: 1px solid #fff3;
    }

    nav.active
    {
        display:flex;
    }

    header nav a:not(:last-child)::after
    {
        content: "";
    }

    main
    {
        flex-direction:column;
    }
}