/* Google Fonts. N.D. Retrieved from https://fonts.google.com/specimen/Quicksand/about */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap');

#gridContainer{
	display:grid;
	grid-template-columns: auto;	/* shrink min to 500px, width is autosizing*/
	grid-template-rows: 180px auto 70px;
	grid-template-areas: 
		"header"
		"main"
		"footer";
}

* {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
}

/* color scheme */
/* [11]Adobe. Adobe Color. Adobe.com. Retrieved from https://color.adobe.com/ko/explore */
.colorSchemeIndex1 { background-color: #0085FF; }
.lightColorSchemeIndex1 { background-color: #B2DAFF; }
.colorSchemeIndex2 { background-color: #44803F; }
.lightColorSchemeIndex2 { background-color: #B4CF66; }
.colorSchemeIndex3 { background-color: #F20587; }
.lightColorSchemeIndex3 { background-color: #020F59; }

.colorSchemeLife1 { background-color: #FF007A; }
.lightColorSchemeLife1 { background-color: #FFB2D7; }
.colorSchemeLife2 { background-color: #45C4B0; }
.lightColorSchemeLife2 { background-color: #DAFDBA }
.colorSchemeLife3 { background-color: #7C92A6; }
.lightColorSchemeLife3 { background-color: #273640; }
.colorSchemeWork1 { background-color: #FFB800; }
.lightColorSchemeWork1 { background-color:  #FFEAB2; }
.colorSchemeWork2 { background-color: #014040; }
.lightColorSchemeWork2 { background-color:  #03A678; }
.colorSchemeWork3 { background-color: #F27405; }
.lightColorSchemeWork3 { background-color:  #731702; }

.tableColor1 {background-color:  #EFEFEF;}
.tableColor2 {background-color:  #D9D9D9;}

.tableColor1_1{background-color:  #FFFAED;}
.tableColor2_1{background-color:  #FFEAB2;}
.tableColor1_2{background-color:  #eaffd6;}
.tableColor2_2{background-color:  #DAFDBA;}
.tableColor1_3{background-color:  #310900;}
.tableColor2_3{background-color:  #480d00;}


/* reduce browser's default margin */
body {
    margin: 0px;
}

body.darkMode {
    color: white;
}

#topHeaderMenus{
    grid-area: header;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100;
    width:100%;
}
#headerNameArea h1 {
    font-weight: 300;
    margin:0 0 0 0;
    font-size:50px;
    padding-top:20px;
}

#headerNameArea p {
    font-size:12px;
    margin: 0 0 10px 0;
}

#headerNavArea div{
    color:white;
    font-size:20px;
    font-weight: 600;
    padding: 10px 50px;
}

.headNameArea{
    padding:0 0 5px 50px;
    cursor: pointer;
}

#headerNavArea{
    width: 100%;
    height: 50px;
}

@media screen and (max-width: 600px) {	/* mobile view */
    #gridContainer{
        grid-template-rows: 105px auto 70px;
    }
    #headerNameArea h1 {
        font-size:22px;
        padding-top:5px;
    }
    #headerNameArea p {
        font-size:11px;
    }
    #headerNavArea{
        width: 100%;
        height: 45px;
    }
    #headerNavArea div{
        padding: 10px 30px;
        font-size: 17px;
    }
    .headNameArea{
        padding:0 0 5px 30px;
    }
} 
@media screen and (min-width: 601px) and (max-width: 999px) {	/* tablet view*/
    #gridContainer{
        grid-template-rows: 135px auto 70px;
    }
    #headerNameArea h1 {
        font-size:30px;
        padding-top:20px;
    }
    #headerNameArea p {
        font-size:12px;
    }
    
} 


.topShortcuts{
    float:right;
    text-align:right;
    padding:20px 20px 0 0;
}

.topShortcuts a{
    text-decoration: none;
}

.topShortcuts img{
    width: 25px;
    height: 25px;
    padding: 1px;
}

#headerNavArea span{
    padding:0 20px;
}
#headerNavArea a{
    text-decoration: none;
    color: white;
}
#headerNavArea a:hover{
    text-decoration: underline;
    color: white;
}
#headerNavArea a.selected{
    text-decoration: underline;
    color: #000;
    /*[10]Silvia O’Dwyer. 2021. How to Create Neon Text With CSS. CSS-Tricks. Retrieved from https://css-tricks.com/how-to-create-neon-text-with-css/*/
    font-weight: bolder;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;

}

address > a {
    color:white;
}

@media only screen and (max-width: 840px) {	/* hide searchForm when screen width less than given px */
    #searchForm {
        display: none;
    }
}
#searchForm label{
    font-size: 15px;
}
#searchText{
    width: 110px;
    height: 25px;
    background-color: #ffffffdd;
    padding: 0 10px;
    border: 0px solid black;
    border-radius: 15px;;
}
#searchBtn{
    width: 40px;
    height: 25px;
    background-color: #ffffffaa;
    border: 0px solid black;
    border-radius: 15px;
}

main {
	grid-area: main;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 20px;
    max-width: 1000px;
}

@media screen and (min-width: 1000px) {	/* desktop view*/
    main {
        max-width: 1300px;
    }
}

footer {
	grid-area: footer;
    width: 100%;
    color: white;
    text-align: center;
	padding: 12px 0px;
}

.center { text-align: center; }
.left { text-align: left; }
.nobr { white-space:nowrap; }

.w100 { width: 100% }
.w90 { width: 90% }
.w80 { width: 80% }
.w70 { width: 70% }
.w60 { width: 60% }
.w50 { width: 50% }
.w40 { width: 40% }
.w30 { width: 30% }
.w20 { width: 20% }
.w10 { width: 10% }

.fL{ float: left; }
.fR{ float: right; }


/* for index.html */
#heroImgContainer{
    position:relative;
    /* margin-bottom: -50px; */
}

.topBgArea > img {
    width: 100%;
}

.profileImgArea{
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    margin-top: -100px;
    margin-left: 22px;
}
.profileImgArea > img {
    width: 100%;
    height: 100%;
    z-index: 3;
}

.iconImg{
	border: 1px solid black;
	padding: 1px;
	margin: 0px;
	vertical-align: middle;
}

.articleArea{
    /* max-width:800px;  */
    position:relative;
    margin:0px 0; 
    padding:0px 20px 20px;
    text-align:left;

    /* background-color:#FFF;  */
}

.articleArea article{
    display: grid;
    grid-template-areas: 
        "bio"
        "skills"
        "patents";
}

@media screen and (min-width: 1000px) {	/* desktop view*/
    .articleArea article{
        display: grid;
        grid-template-areas: 
            "bio bio"
            "skills patents"
            ;
        gap: 20px;
    }
} 


#bio {
    grid-area: bio;
    padding: 0 20px;
}

#bio > h2{
    margin-top: 0px;
}

#skills{
    grid-area: skills;
}

#skills table{
    width: 100%;
    text-align:right;
}

#skills caption{
    text-align: left;
    font-weight: bold;
}
/* skill progress bar */
#skills tr:first-child > td:first-child{
    background-color: #0085FF;
    height: 7px;
}
/* skill progress bar background */
#skills tr:first-child > td{
    background-color: #d9d9d9;
}
#skills td{
    font-size: 11px;
}

#patents{
    grid-area: patents;
}

.patents > li{ 
    margin: 15px 0; 
    list-style-type: lower-alpha;;
}
.patents > li > ul > li{
    list-style-type: square;
}

#bio > ul, .patents ul{
    font-size: 13px;
    line-height: 20px;
    font-style: italic;
}

#contactBar a{
    color:rgb(0, 112, 147);
    text-decoration: none;
}
#contactBar a:hover{
    color:black;
    text-decoration: underline;
}

#contactBar.darkMode a{
    color:#FFFFFF;
    text-decoration: none;
}
#contactBar.darkMode a:hover{
    color:#FFFFFF;
    text-decoration: underline;
}

#contactBar + p{	/* next paragraph of contact bar*/
    border-left: 3px solid darkslategrey;
    padding-left: 10px;
}
#contactBar + p::first-letter{	/* next paragraph of contact bar*/
    font-size:1.4em;
}

.patents a[target="_blank"]{
    color:red;
}

/* for life.html */
#galleryGridContainer{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    gap: 20px;
    grid-template: "profile"
        "gallery";
    
}
#profileArea{
    grid-area: profile;
}

#profileImage{
    width: 180px;
    margin-right:20px;
    float: left;
}
@media screen and (max-width: 600px) { /* mobile */
    #profileImage{
        width: 100px;
        margin: 40px 10px;
        float:left;

    }
}

#galleryArea{
    grid-area: gallery;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-around;
    align-items: center;
}
.galleryItem {
    width: 260px;
}


@media screen and (max-width: 600px) {	/* mobile view */
    #galleryArea{
        gap: 0px;
    }
    .galleryItem {
        width: 190px;
    }
    #audio{
        width: 100%;
        text-align: center;
    }
} 



/* for work.html */
#personalHistoryTableMobile{
    display: none;
}

#personalHistoryTableMobile b{
    font-weight: bolder;
}


@media screen and (max-width: 600px) {	/* mobile view */
    #personalHistoryTableMobile{
        display: block;
    }
    #personalHistoryTable{
        display: none;
    }
}

.spacer{
    height: 30px;
}

.workDuration{
    margin-left:10px;
    font-size:13px;
}

#personalHistoryTable{
	border: none;
	border-spacing: 3px;
}
#personalHistoryTable td,#personalHistoryTable th{
	padding: 7px;
}

#personalHistoryTable th{
    font-weight: bolder;
}

#personalHistoryTable ul{
	list-style-type: square;
}

.iframeWrapper{
	position: relative;
	padding-bottom: 56.25%;
}

.youtubeIframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: none;
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* for photo gallery*/
.backgroundBlocker {
    /* to center image*/
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    
    z-index: 9999;
}
  
.fullSizeImage {
    max-width: 95%;
    max-height: 95%;
}

#emailLabel{
    color: #000;
    font-size: 18px;
    font-weight: bolder;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    margin-left: 20px;
}

textarea#mailContent{
    font-size: 13px;
}

@media screen and (max-width: 600px) {  /* mobile */
    textarea#mailContent{
        width: 90%;
    }
}

.emailBtn{
    color:black;
    background-color: #FFFFFF;
    font-size: 15px;
    border-radius: 15px;
    height: 30px;
    margin: 10px 0px;
    padding: 0px 10px;
    
    border-style: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin-left: 20px;
}

.emailCloseBtn{
    color:white;
    background-color: #EA4C89;
    margin-left: 0px;
}

/* END of css file */