/* grid layout */

.container { height: 100%; display: grid; grid-gap: 0px; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto;
    grid-template-areas: 
        "i n n n n n n n n n n n"
        ". h h h h h h h h h h ."
        ". . . . a a a a . . . ."
		"f f f f f f f f f f f f ";}
		
.containerp { height: 100%; display: grid; grid-gap: 0px; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto;
    grid-template-areas: 
        "i n n n n n n n n n n n"
		" . h h h h h h h h h h h"
        ". p1 p2 p3 p4 p5 p6 . . . . ."
		" . h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2"
		". d1 d2 d3 d4 d5 d6 . . . . ."
        ". . . . a a a a . . . ."
		"f f f f f f f f f f f f ";}

/* index grid containers */

.icon { grid-area: i; background-color: #fff; padding-right: 10px; }

.nav { grid-area: n; background-color: #e5e5e5; padding: 5px 5px 10px 5px; font-family: 'DM Serif Display', serif; font-size: 30px;}

.hello { grid-area: h; background-color: #fff; padding: 10px 5px 10px 5px; font-family: 'Noto Sans TC', sans-serif; font-size: 18px; }

.fabout { grid-area: a; background-color: #fff; text-align: left;  padding: 5px 20px 5px 5px; font-family: 'Noto Sans TC', sans-serif; font-size: 14px; }

.footer { grid-area: f; background-color: #e5e5e5; text-align: center; padding: 20px 10px 20px 10px; font-family: 'Noto Sans TC', sans-serif; font-size: 14px; }

.p1 { grid-area: p1; background-color: #fff; text-align: center; padding: 5px; } 
.p2 { grid-area: p2; background-color: #fff; text-align: center; padding: 5px; } 
.p3 { grid-area: p3; background-color: #fff; text-align: center; padding: 5px; } 
.p4 { grid-area: p4; background-color: #fff; text-align: center; padding: 5px; } 
.p5 { grid-area: p5; background-color: #fff; text-align: center; padding: 5px; } 
.p6  { grid-area: p6; background-color: #fff; text-align: center; padding: 5px; } 

.hello2 { grid-area: h2; background-color: #fff; padding: 10px 5px 10px 5px; font-family: 'Noto Sans TC', sans-serif; font-size: 18px; }

.d1 { grid-area: d1; background-color: #fff; text-align: center; padding: 5px; } 
.d2 { grid-area: d2; background-color: #fff; text-align: center; padding: 5px; } 
.d3 { grid-area: d3; background-color: #fff; text-align: center; padding: 5px; }

/* link styling */

a { text-decoration: none; color: #ad6fce; }

.hello a:hover { color: #dca0fb; text-decoration: #bcbcbc underline wavy; }

/* img styling */

.p1 img , .p2 img , .p3 img , .p4 img , .p5 img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; text-align: center; }
.p1 img:hover, .p2 img:hover, .p3 img:hover, .p4 img:hover, .p5 img:hover { box-shadow: 0 0 2px 1px rgba(173, 111, 206, 0.5); }
.d1 img , .d2 img , .d3 img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; }
.d1 img:hover, .d2 img:hover, .d3 img:hover {box-shadow: 0 0 2px 1px rgba(173, 111, 206, 0.5); }

/* headers 

h1 is for resume, work headings*/

h1 { color: #0da3d4; font-family: 'DM Serif Display', serif; font-size: 22px; margin-bottom: 5px; background-color:#f4f4f4; padding: 5px 5px 5px 10px; }

/* span class stylings */

.subnote { font-size: 14px; color: #a6a6a6; font-style: italic; padding-left: 10px; }

.workname { font-size: 20px; font-weight: bold; }

.jobtitle { background-color: #f4f4f4; padding: 2px 5px 2px 5px; color: #4bb2d4; }

.accomplish { font-size: 14px; }

.description { font-size: 11px; font-family: 'Noto Sans TC', sans-serif; }

.btn {   display: inline-block;
  letter-spacing: .05rem;
  font-size: .75rem;
  border: none;
  background-color: #f7f1fa;
  color: #ad6fce;
  margin: 4px 2px;
  padding: 4px 8px;
  border-radius: 0.5rem;}