body {
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* select font from OS in sequence selection */
}

.page-wrapper {
    max-width: 1024px;
    background: #ccc;
    /* margin-top: 60px; */
    margin: 0 auto; /* Spacing outside, top, bottom; auto: left and right, sequence: top, left, bottom, right */
    /* margin: 60px auto 30px auto;*/
    padding: 0px 15px 15px 30px ; /* Spacing inside, you can also specify which to change padding-left, etc... */
    
}

header {
    max-height: 50px;
    width: 100%;
    /* background-color: #333; */
    /*position: fixed; /* sticky */
    /* position: absolute; /* externall move with scrolling */
    position: absolute;
    left: 0px;
    /* bottom: 0px; */
    top: 0px;


}

.banner {
    height: 400px;
    background-image: url('../images/sunset.jpg') ;
    background-size: cover;
    background-position: bottom;
    margin-top: 60px;
}

h1 {
    color: #fff;
    text-shadow: #000;
    text-align: center;
    padding-top: 100px;
    font-size: 46px;
}

h2 {
    color: #fff;
    text-align: center;
    font-size: 32px;
}

/*
section.about-me {
    margin-top: 60px;
    margin-bottom: 60px;
}
*/

/*
section.my-portfolio div {
    background-color: #ddd;
    border: 1px solid #000;
}
*/

.about-me p {
    font-size: 18px;
    line-height: 38px;
    text-align: justify;
}

.d-none {
    display: block; /* elements that are block, div by default is block */

}

.d-inline {
    display: inline;
    background-color: aqua;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex; /*container flexibility*/
}

.d-inline.d2 {
    width: 200px;
    display: inline-block;
    background-color: red;
}

.d-none, .d-inline {
    font-size: 16px;
}

section>.d-inline {
    color: yellow;
}

section .d-inline {
    color: green;
}

section>div>.d-inline {
    color: violet;
}

.with-direction {
    /*flex-direction: column; /* default is row; another is column*/
    /* flex-direction: column-reverse; */
    flex-direction: row;
    flex-wrap: nowrap; /* wrap or owrap */
}

.with-direction>div {
    height: 40px;
    /* width: 300px; */
    text-align: center;
}

/* switch */
.d12 {
    order: 2;
}

.d13 {
    order: 1;
    flex-grow: 2;
}

.d14 {
    order: 3;
    flex-grow: 2;
}

.d15 {
    order: 4;
}

.d16 {
    order: 5;
    flex-grow: 3;
}


section.my-portfolio div.d-flex {
    flex-wrap: wrap;
    justify-content: center;
    background-color: none;
    border: none;
    padding: 15px;
}

.d-flex>.d-inline {
    display: inline-block;
    width: 180px;
    padding: 15px;
    margin: 15px;
    color: #000;
    background-color: #fff;
    box-shadow: 5px 10px #ccc;
    border-radius: 4px;
}

section.my-portfolio .d-flex h4 {
    min-height: 60px;
}

section.my-portfolio .d-flex p {
    font-size: 14px;
}

/* CSS GRID Layout */

#grid-layout>h2 {
    color: black;
}

.basic-grid, 
.advanced-grid {
    display: grid;
    /* grid-template-columns: auto auto auto; /* auto columns */
    grid-template-columns: auto auto auto; /* 3 columns */
    background-color: blueviolet;
    gap: 20px;
    padding: 10px;
}

.advanced-grid {
    grid-template-columns: auto auto auto auto auto; /* 5 columns */
}

.basic-grid>div, 
.advanced-grid>div {
    border: 1px solid #000;
    text-align: center;
    line-height: 52px;
    background-color: #ffffffcc;
    padding: 15px;
    box-shadow: -5px 5px #999099cc; /* right, left, color */
}

.basic-grid .item1 {
    grid-column-start: 1; /* starts at the vertical 1*/
    grid-column-end: 3; /* */
}

.basic-grid .item6 {
    grid-column: 2 / 4; /* sames as start and end */
}

.basic-grid .item5 {
    /*
    grid-row-start: 2;
    grid-row-end: 4;
    */
    grid-row: 2 / 4;
}

.advanced-grid .item7 {
    /* grid-area: row start / col start /row end / col end; */
    grid-area: 1 / 2 / 3 / 5;
}


.advanced-grid .item5 {
    grid-area: 3 / 3 / 5 / 5;
}

.advanced-grid .item10 {
    grid-column: 1 / 1;
}

.advanced-grid .item4 {
    grid-row: 1/3;
}

/* CSS Grid Exercise */
#grid-layout2 h2 {
    color: #9422b1cc;
}

.exergrid1, 
.exergrid2 {
    display: grid;
    grid-template-columns: auto auto auto auto; 
    background-color: blueviolet;
    gap: 20px;
    padding: 10px;
}

.exergrid2 {
    grid-template-columns: auto auto auto auto auto auto;
}

.exergrid1>div, 
.exergrid2>div {
    border: 1px solid #000;
    text-align: center;
    line-height: 52px;
    background-color: #ffffffcc;
    padding: 15px;
    box-shadow: -5px 5px #999099cc; /* right, left, color */
}

.exergrid1 .item1 {
    /* grid-area: 1 / 1 / 3 / 2; */
    grid-row: 1 / 3;
}

.exergrid1 .item3 {
    /* grid-area: 1 / 3 / 2 / 5; */
    grid-column: 3 / 5;
}

.exergrid1 .item8 {
    /* grid-area: 3 / 3 / 4 / 5; */
    grid-column: 3 / 5;

}

.exergrid1 .item10 {
    /* grid-area: 3 / 1 / 5 / 2; */
    grid-row: 3 / 5;
}

.exergrid2 .item5 {
    grid-area: 1 / 5 / 2 / 7;
    background-color: rgb(104, 199, 104);
}

.exergrid2 .item8 {
    grid-area: 2 / 2 / 5 / 4;
    background-color: aquamarine;
}

.exergrid2 .item9 {
    grid-area: 2 / 4 / 5 / 6;
    background-color: aqua;
}

/* navbar */
.navbar {
    background-color: #333333cc;
}

nav ul {
    list-style: none;
    margin: 0px;
}

nav ul li {
    display: inline-block; /* inline-block */
    padding: 0px 10px; /* top, left&right */
}

nav ul li a{
    text-decoration: none;
    line-height: 50px;
    font-size: 18px;
    color:#fff;
}

nav ul li:hover{
    background-color:forestgreen;
}

nav ul li:hover a {
    color:burlywood;
}

@media screen and (max-width: 992px) {
    /* responsive */
    header {
        height: auto;
        /*background-color: #333333cc;*/
        position: absolute; /* or fixed , static, relative*/
    }

    .banner {
        margin-top: 280px;
    }

    nav ul li{
        display: block;
    }


    /*
    header {
        position: absolute;
        height: auto;
        background-color: #333333cc;

    }
    */
}

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

    .banner{
        background-image: none;
        background-color: #333;
    }

}