html {
    height: 100%;
    scroll-behavior:smooth; 
}

#content {
    background-color: lightblue;
    height: auto;
    padding: 50px;
}

/*header fonts*/
h1 {

}

/*banners*/
#banner,
#banner1,
#banner2 {
    background-position: bottom; /*alignment when adjust screensize*/
    width: 100wh;
    height: 100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#banner {
    background-image: url(asset/bg/Cambodia-sm.JPG);
}

#banner1 {
    background-image: url(asset/bg/DSC_0238-sm.JPG);
}

#banner2 {
    background-image: url(asset/bg/MBS-sm.JPG);
}

/* portable */
@media only screen and (min-device-width: 768px) {
    #banner, #banner1, #banner2{
        background-attachment: fixed;
    }
    #banner {
        background-image: url(asset/bg/Cambodia4x3.JPG);
    }

    #banner1 {
        background-image: url(asset/bg/DSC_0238.JPG);
    }

    #banner2 {
        background-image: url(asset/bg/MBS.JPG);
    }
}


/*hover event*/
.detail {
    transition: all 1s;
    -webkit-transition: opacity scale border 3s 1s ease-in-out;
    padding: 5px;
    opacity: 0.7;
    background-color: azure;
}

.detail:nth-child(2) {
    background-color:floralwhite;
    border-left: 2px solid antiquewhite;
    border-right: 2px solid antiquewhite;
}

.detail:hover, .detail:focus {
    transform: scale(1.1);
    opacity: 0.95;
    border: 2px solid gray;
    z-index: 5;
}

/*font*/
#main-font {
    font-family: Microsoft JhengHei;
    color: darkgoldenrod;
    background-color: azure;
    display: inline-flex;
    padding-left: 40px;
    padding-right: 40px;
}

/*animation*/
.pulse{
    animation-duration: 3s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}