*{
    box-sizing:border-box;
}

html, body {
    --darkblue: #04093e;
    --beige: beige;
    --brightblue: #0311ab; 

    margin:0;
    padding:0;
    background: var(--darkblue);
    color:white;
    font-size:30px;

    
    font-family: Arial, Helvetica, sans-serif;

}

h1 {
    font-family: "Tinos", serif;
    font-weight: 100;
    font-style: normal;
    font-size:100px;
    margin:0px;
}

h2{
    font-family: "Tinos", serif;
    font-weight: 100;
    font-style: normal;
    font-size:60px;
    margin:0px;
}
p{
    font-size:24px;
    white-space: pre-line;

}

ul{
    margin:0;
    padding: 0;
}

ul li {
    font-size: 24px;
    list-style:none;
}

a{
    color: #ffffff;
    text-decoration: none;
}

/* navigation */

nav {
    position:fixed;
    width:100%;
    height:100px;
    top:0;
    left:0;
    font-size:20px;
    z-index:3;
}

nav ul {
    display:flex;
    flex-direction:row;
    align-items:center;
    width:100%;
    height: 100%;
    margin:0;
    padding: 0;
}

nav ul li {
    list-style:none;
    margin-left: 45px;
}

nav ul li a {
    color: #ffffff;
    font-family: sans-serif;
}


/*sections*/

section{
    position:relative;
    display:flex;
    width:100%;
    top:0px;
    height: 100vh;
}

section.sticky{
    position:sticky;
    margin-top:0px;
}

section.fullscreen{
    position:sticky;
    margin-top:0px;
    height: 100vh;
    z-index:1;
}
/* about section */


    section.about{
        display:flex;
        flex-direction:column;
    }

    section.about .sf{
        flex-basis: 50vw;    
        display:flex;
        flex-direction:row;
    }


    section.about .sf figure {
        display: flex;
        align-items:flex-end;
        justify-content:right;
        flex:1;
        margin:0;
        border-radius:100px;
        padding-bottom:10px;
        
    }

    section.about .sf figure img{
        width: 200px;
    }

    
    section.about .sf .title {
        flex:2;
        display:flex;
        align-items:flex-end;
        border-radius:100px;
        padding:3.27vw;
        padding-bottom:0;
    }
    

section.about article {
    flex-basis: 50vw;    
    display:flex;
    flex-direction: row;
}

section.about article .bottom {
    flex:1;
    display:flex;
}


section.about article .description {
    flex:2;
    display:flex;
    flex-direction: column;
    align-items:left;
    border-radius:100px;
    padding:3.27vw;
    padding-top:0;
    color: #ffffff;
}


/* service section */


section.service article{
    display:flex;
    width:100%;
}

section.service figure{
    display: flex;
    align-items:center;
    justify-content:right;
    flex-basis: 46.25vw;
    background:var(--beige);
    
    margin:0;
   }

section.service figure img{
    width: 100%;
}

section.service .text {
    background: var(--beige);
    display:flex;
    flex-direction: column;
    justify-content: center;
    flex:2;
    /*flex-basis: 43.75vw;*/
    color:#000000;
    padding: 6.25vw;
}


/* contact section */

section.contact {
    display:flex;
    flex-direction:column;
    background: var(--brightblue);
    align-items:center;
    justify-content:center;
    mix-blend-mode:var(--darkblue);

}

section.contact a {
    font-size:60px;
    font-family:serif;
    color:white;
}


/* project */

section.project {
    display: flex;
    flex-direction: column;
    background: #38463D;
    align-items: center;
    justify-content: center;
    mix-blend-mode: var(--darkblue);

}

section.project a {
    font-size: 60px;
    font-family: serif;
    color: white;
}


@media only screen and (max-width: 1020px) {

    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 40px;
    }

    p {
        font-size:36px;
        text-align:center;
    }

    section.about ul li {
        text-align:center;
        font-size:24px;
    }

    nav ul li {
        margin-left: 25px;
    }

    section.about {
        margin-top:100px;
        flex-direction: column;
    }

    section.about .sf{
        flex-direction:column;
        flex:1;
    }

    section.about .sf figure {
        display: flex;
        align-items:flex-end;
        justify-content:center;
        margin-left: 25px;
        padding-bottom:10px;
        flex-basis: 25vh;
    }

    section.about .sf .title {
        display:flex;
        justify-content:center;
        align-items:flex-start;
        padding-bottom:0;
    }


    section.about article{
        flex:1;
    }

    section.about article .bottom {
        flex:0;
        display:flex;
    }

    section.about article .description {
        flex:1;
        display:flex;
        flex-direction: column;
        align-items:left;
        border-radius:100px;
        padding-top:0;
        color: #ffffff;
    }



    section.about .sf figure img{
        width: 50%;
    }

    

    section.about article {
        flex-direction: column;
    }

    section.service article {
        flex-direction: column;
    }
    section.contact a {
        font-size: 40px;
    }

}