/*universal selctor style*/
* {
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

/*color variable styles*/
:root {
    --lblue: #ADD8E6;
    --headblue: #191970;
    --darkblue: #00008B;
    --parblue: #4169E1;
    --titleblue: #F0FFFF;
    --workback: #708090;
}

/*elements style*/
h1 {
    font-size: 40px;
    font-weight: bold;
    color: var(--headblue);
}

h2 {
    font-size: 40px;
    font-weight: bolder;
    text-align: left;
    color: var(--darkblue);
}

h3 {
    font-size: 19px;
    font-weight: bolder;
    text-align: left;
    color: var(--darkblue)
}
    

a {
    color: var(--lblue);
}

p {
    color: var(--headblue);
    font-weight: bolder;
}

/*body style*/
body {
    background-color: var(--lblue);
    font-family: 'Times New Roman', Times, serif;
}

/*header/ three navbar style*/
header {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 2%;
    background-color: var(--headblue);
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

header .main-nav ul,
.contact-nav ul,
.resume-nav ul {
    margin: 10px;
    color: var(--lblue);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style-type: none;
    justify-content: space-between;
    align-items: center;
}

header .main-nav ul li a,
.contact-nav ul li a,
.resume-nav ul li a {
    text-decoration: none;
    display: flex;
    padding: 15px 20px;
    letter-spacing: 1.5px;
    font-size: 25px;
}

.contact-nav ul li a {
    float: left;
}


/*figure (banner) style*/
.banner {
    height: 400px;
    width: 100%;
    margin-bottom: 15px;
}

/*captions style*/
.name-box {
    margin: 7px;
    border: 7px var(--titleblue);
    padding: 5px;
    background-color: var(--titleblue);
    display: flex;

}

figcaption.name-box-banner-text {
    margin: 7px;
    border: 7px;
    padding: 5px;
    top: 400px;
    left: 1200px;
    border-color: var(--titleblue);
    background-color: var(--titleblue);
    text-align: center;
    position: absolute;
    color: var(--parblue);
    font-size: 19px;
}

.aboutme-text {
    margin: 7px;
    border: 7px;
    padding: 5px;
    top: 690px;
    left: 700px;
    border-color: var(--lblue);
    background-color: var(--lblue);
    text-align: center;
    position: absolute;
    color: var(--parblue);
    font-size: 22px;
}

.name-box-work {
    margin: 0px;
    padding: 15px;
    bottom: 13px;
    font-size: 19px;
    font-weight: bolder;
    text-align: left;
    position: absolute;
    border-color: var(--titleblue);
    background-color: var(--titleblue);
}

/*section headers style*/
.aboutme-head-title,
.work-head-title,
.contactme-head-title,
.resume-head-title {
    text-align: center;
    background-color: var(--titleblue);
    background-size: cover;
}

/*aboutme img style*/
.aboutme-img {
    display: flex;
    margin: 100px;
    width: 30%;
}

/*work section style*/
.work-section-article {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    background-color: var(--workback);
}

.large-work {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    width: 97%;
    height: 200px;
    position: relative;
   
}

.small-work {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 44%;
    height: 100px;
}

.work-image {
    object-fit: cover;
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-position: top;
}

/*contact me section style*/
.contactme {
    background-color: var(--darkblue);
}

/*resume section style*/
.resume {
    background-color: var(--darkblue);
}

/*media queries styles*/
/*inspect large screen*/
@media screen and (max-width: 1325px) {
    figcaption.name-box-banner-text {
        top: 410px;
        left: 660px;
    }

    .aboutme-text {
        top: 680px;
        left: 530px;
    }
}
    
/*laptop*/
@media screen and (max-width: 1024px) {
    header {
        flex-direction: column;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
    header .main-nav ul,
    .contact-nav ul,
    .resume-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    list-style-type: none;
    justify-content: space-between;
    align-items: center;
    }

    figcaption.name-box-banner-text {
        top: 640px;
        left: 600px;
    }

    .aboutme-text {
        top: 835px;
        left: 400px;
    }
}

/*tablet*/
@media screen and (max-width: 768px) {
    .banner {
        height: 200px;
    }

    figcaption.name-box-banner-text {
        top: 460px;
        left: 65px;
    }

    .aboutme-img {
        display: flex;
        margin: 60px;
        width: 30%;
    }

    .aboutme-text {
        top: 605px;
        left: 310px;
        font-size: 18px;
    }
}

/*smartphone*/
@media screen and (max-width: 320px) {
    .banner {
        display: none;
    }

    figcaption.name-box-banner-text {
        display: none;
    }

    .aboutme-img {
        display: flex;
        margin-left: 120px;
        margin-top: 10px;
        margin-bottom: 230px;
        width: 30%;
    }

    .aboutme-text {
        top: 460px;
        left: 10px;
        font-size: 12px;
    }

    .work-section-article {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 450x;
    }

    .large-work {
        height: 100px;
        width: 100%;
        margin: 0;
    }

    .small-work {
        width: 90%;
        margin: 5px;
        margin-left: 15px;
    } 

    .name-box-work {
        display: none;
    }

    header .main-nav ul li a,
    .contact-nav ul li a,
    .resume-nav ul li a {
    display: flex;
    padding: 15px 20px;
    letter-spacing: 0px;
    font-size: 20px;
    }
}