/*==== Background ====*/
body
{
    background-color: #9AC9DA;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
    "header  header"
    "banner  banner"
    "project project"
    "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 20px;
}

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;
}

/*==== Projects ====*/

.projects
{
    grid-area: project;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:20px;
    width: 100%;
    height: 100%;
}

.project
{
    width:500px;
    height: 500px;
    background-color:#e6f1f5;
    border-radius:30px;
    display:flex;
    flex-direction:column;
}

.project h2, .project h3
{
    text-align:center;
    margin: 5px 0;
}

.project video
{
    margin: 5px auto;
    border-radius:30px;
}

.project p
{
    padding: 0 10px;
    margin: 5px 0 0 0;
}

.project a
{
    text-align:center;
}


.project a:link
{
    color:#326280;
}

.project a:visited
{
    color:#326280;
}

.project a:hover
{
    color:#9AC9DA;
}

.project a:focus
{
    color:#9AC9DA;
}

.project a:active
{
    color:#b7ebeb;
}



/*==== 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:780px)
{
    /*==== Projects ====*/
    .projects
    {
        flex-direction:column;
        gap:20px;
    }

    .project
    {
        width:400px;
        height: 400px;
    }

    .project video
    {
        width: 340px;
        height: 180px;
    }

    .project p
    {
        font-size: 13px;
    }

    /*==== Hamburger and Nav ====*/
    .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: "";
    }
}