/*
 * Background and dither
 */
body {
    background: #fcfae2;
    /* font-family: 'MS Gothic', 'MingLiU-ExtB'; */
    /* font-family: 'MS Gothic', 'Backup MS Gothic', 'DotGothic', serif;; */
    font-family: "MingLiU_HKSCS", "DotGothic", serif;

}


/*
 * Body wrapper
 */
.wrapper {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 6%; */
    margin-top: 120px;

    /* display: flex;
    flex-direction: column;
    gap: 10px; */
}

/*
 * Dither 
 */
.element {
    position: fixed;          
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;              
    pointer-events: none;
    background-image: url('../img/dither.jpg');
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    opacity: 0.1;
    filter: sepia(100%) hue-rotate(50deg) saturate(2) brightness(1);
}

/*
 *  Header stuff
 */
.header {
    position: relative;
    min-height: 240px;
    background-image: url('../img/oil.webp');
    background-size: cover;
    background-position: center 65%;
    border: 1px dotted #000;
    margin-bottom: 12px;
}
.headertxt {
    /* text-transform: uppercase; */
    position: absolute;
    left: 20px;
    /* right: 20px; */
    bottom: 12px;                    
    margin: 0;
    font-size: 60px;
    line-height: 1;
    /* color: #dfe8d8; */
    color: #fcfae2;
     filter: drop-shadow(1px 1px 0 #000)
            drop-shadow(-1px -1px 0 #000); 
    font-family: 'PMingLiU', 'DotGothic', serif;;
    /* font-weight: bold; */
}


/* 
 * text align 
 */
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }


/*
 * Astethic
 */


.pic {
    margin: 0px;
}
.pic img {
    display: block;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.pic figcaption {
    margin-top: 1em; 
    font-size: 12px;
    text-align: center;
}


.pic img.profile {
    max-width: 200px;
}



/*
 * Little logo images inline with text
 */
.logo {
  height: 1.5rem;        
  width: auto;          
  display: inline-block;
  vertical-align: -0.50em; 
}
.nowrap {
  white-space: nowrap;
}




/*
 * Links
 */

a:not(.btn) {
    color: #2e3d33;
    text-decoration: underline dotted #9aa89c;
    text-underline-offset: 3px;
}

 a:not(.btn):hover {
    color: #3c4d3f;
    text-decoration: underline solid #2e3d33;
} 

a.green:not(.btn) {
    color: #3c4d3f;
    text-decoration: underline dotted #8a9a5b;
    text-underline-offset: 3px;
}

 a.green:not(.btn):hover {
    color: #2e3d33;
    text-decoration: underline solid #3c4d3f;
} 



/*
 * List elements
 */
 ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5em 0;
}

ul li {
    position: relative;
    padding-left: 1.2em;        
    margin-bottom: 3px;
}

ul li::before {
    content: "▪";
    position: absolute;
    left: 2px;
    color: #2e3d33;
}



/*
 * footer
 */
.footer {
  margin-top: 10px;
  padding-top: 8px;
  /* border-top: 1px dotted #000; */
  text-align: center;
  font-size: 11px;
}

.footer p {
  margin: 4px 0;
}


/* gif row just for fun */
.gif-row {
    margin-top: -17px;
    margin-bottom: -60px;
    z-index: 1;
}