*{font-family: "Poppins", "Microsoft JhengHei";}
html,body{ margin: 0; padding: 0;}

.twitch{ position: fixed; right: 20px; bottom: 20px; width: 80px;}
.top{ position: fixed; right: 20px; bottom: 110px; width: 80px;}

.list{ display: flex; flex-wrap: wrap; justify-content: flex-end; width: 1200px; margin: 30px auto 10px;}
.list div{ width: 280px; margin: 5px 10px; font-size: 0.8em; line-height: 30px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; text-align: center; box-sizing: border-box;}
.list div.active{ background: #ffe2a4; border: 1px solid #ffc343;}
.list div#job0{ width: 580px;}


.all{ display: flex; flex-wrap: wrap; width: 1200px; margin: 0 auto 50px;}
b{ display: block; width: 100%; margin: 30px 10px 10px; border: 0; border-bottom: 1px solid #eee;}
img.skill{ float: left; width: 68px; margin: 18px 10px 0 -10px;}

section{ width: calc(50% - 20px); margin: 20px 10px 0; padding: 0 20px 20px 20px; border: 1px solid #ccc; border-radius: 10px; box-sizing: border-box;}
h3{ display: flex; align-items: center; margin: 20px 0 5px; font-size: 1.25em;}
h3 span{ display: inline-flex; align-items: center; padding: 0 5px; font-size: 0.7em; color: #333; font-weight: normal; border: 1px solid #ccc; border-radius: 5px;}
h3 span:nth-of-type(1){ margin-left:auto;}
h3 span+span{ margin-left: 5px;}
h3 span img{ margin: 0 5px 0 0;}
h3 span.dashed{ border: 1px dashed #eee;}
h3 span.gray{ background: #eee;}


mark{ font-size: 0.875em; padding: 0 5px; border-radius: 5px;}
mark.green{ background: #e8ffe8;}
mark.green2{ background: #eeffba;}
mark.blue{ background: #e8f9ff;}
mark.red{ background: #ffede8;}
mark.orange{ background: #fff0c2;}
mark.yellow{ background: #fffed2;}
mark.gray{ background: #eee;}
mark.purple{ background: #fbe4ff;}


section hr{ margin: 20px 0; border: none; border-bottom: 1px dashed #ccc;}


ul{ margin: 5px 0; padding: 15px 15px 15px 35px; border-radius: 5px;}
ul:first-of-type{ margin: 20px 0 5px;}
ul:last-of-type{ margin: 5px 0 0;}
ul.green{ background: #e8ffe8;}
ul.green2{ background: #eeffba;}
ul.blue{ background: #e8f9ff;}
ul.red{ background: #ffede8;}
ul.orange{ background: #fff0c2;}
ul.yellow{ background: #fffed2;}
ul.gray{ background: #eee;}
ul.purple{ background: #fbe4ff;}

li{ line-height: 20px;}
li+li{ padding: 7px 0 0 0;}
span{ color: #ff5938;}