/*==== Background ====*/
body
{
    background-color: #326280;
    display: block;
    margin:0;
}

#custom-hr{
    border:none;
    border-top:3px solid #15374d;
}

/*==== SIDEBAR ====*/
.sidebar{
    position:fixed;
    width:400px;
    height:100dvh;
    grid-area: sidebar;
    display:flex;
    flex-direction:column;
    border-right:2px solid #15374d;
    color:black;
}


/*==== Face ====*/
header
{
    grid-area: header;
    display:flex;
    flex-direction:column;
    background-color: #4983A8;
    padding: 10px 10px 20px 50px;
}

header img{
    width:180px;
    height:210px;
    border-radius:150%;
    outline-width:3px;
    outline-style:solid;
    outline-color:#15374d;
}

/*==== Nav ====*/

nav
{
    grid-area:nav;
    display:flex;
    flex-direction:column;
    font-size:2rem;
    padding:10px 10px 10px 50px;
    background-color:#4983A8;
    font-size:40px;
    flex-grow: 1;
}

nav .contact{
    display:flex;
    padding-top:10px;
    flex-direction: column;
    font-size:30px;
}

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

.hamburger span
{
    width:25px;
    height:3px;
    background: #15374d;
}

/*==== Banner ====*/
.banner
{
    grid-area: banner;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color: #62a1c9;
    text-align:left;
    padding:20px 20px 20px 50px;
    margin:0;
}

.banner h1{
    margin: 0;
    font-size:40px;
}

.banner h2{
    font-weight:400;
}

/*==== CONTENT ====*/
.content-top{
    text-align:left;
    width:90%;
    font-size:23px;
    font-weight:300;
    font-style:normal;
    margin: auto;
}

.content
{
    grid-area:content;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:auto;
    margin-left:400px;
}

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

.content h2{
    font-size:50px;
    text-align:center;
    font-weight:bold;
}


/*==== Resumes ====*/

embed{
    width:40%;
    height:1000px;
}

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

footer
{
    background-color: #326280;
    grid-area: footer;
    text-align:center;
    flex-grow:1;
    font-size:22px;
    width:100%;
}

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

a:visited
{
    color:#000000;
}

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