html {
    font-family: 'Noto Sans TC', sans-serif;
}

html .body-wrapper {
    padding: 20px;
    margin: 0 auto;
    max-width: 960px;
}

body {
    background: inherit;
}

header {
    position: relative;
    border-bottom: 1px solid #ffffff0f;
    padding: 10px 0;
}

.pan-light-mode header {
    border-bottom: 1px solid #2525250f;
}

header .logo {
    display: inline-block;
/*    font-size: 32px;*/
    font-size: 20px;
    margin-left: 10px;
}

p {
    font-size: 26px;
}

@media all and (min-width: 768px) {
    p {
        font-size: 42px;
    }
}

#first-square,
#second-square,
#third-square {
    height: 100px;
    width: 100px;
    display: inline-block;
    border-radius: 16px;
    margin: 10px;
}

.pan-light-mode #first-square {
    background: #131313
}

.pan-light-mode #second-square {
    background: #353535
}

.pan-light-mode #third-square {
    background: #515151
}

.pan-dark-mode #first-square {
    background: #f3f3f3
}

.pan-dark-mode #second-square {
    background: #d2d2d2
}

.pan-dark-mode #third-square {
    background: #a0a0a0
}

.module-widget {
    display: inline-block;
    border-radius: 16px;
    width: 44%;
}

.pan-dark-mode .module-widget {
    background: white;
}

.pan-light-mode .module-widget {
    background: black;
}


.widget-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.widget-wrapper .module-widget {
    margin: 20px;
}

.module-widget .module-details {
    display: flex;
}

.module-widget .module-details {
    margin: 30px;
}

.module-widget h3 {
/*    text-align: center;*/
    margin: 30px;
    color: black;
}

.pan-dark-mode .module-widget h3 {
    color: black;
}

.pan-light-mode .module-widget h3 {
    color: white;
}

.module-widget p {
    font-size: 16px;
}

.pan-dark-mode .module-widget p {
    color: #5e5e5e;
}

.pan-dark-mode .module-widget p#mouse-x,
.pan-dark-mode .module-widget p#mouse-y,
.pan-dark-mode .module-widget p#keyboard-key,
.pan-dark-mode .module-widget p#keyboard-details,
.pan-dark-mode .module-widget p#viewport-width,
.pan-dark-mode .module-widget p#viewport-height,
.pan-dark-mode .module-widget p#theme {
    font-weight: bold;
    font-size: 20px;
    color: black;
}
.pan-light-mode .module-details .section p {
    color: #525252;
}

.pan-light-mode .module-widget p#mouse-x,
.pan-light-mode .module-widget p#mouse-y,
.pan-light-mode .module-widget p#keyboard-key,
.pan-light-mode .module-widget p#keyboard-details,
.pan-light-mode .module-widget p#viewport-width,
.pan-light-mode .module-widget p#viewport-height,
.pan-light-mode .module-widget p#theme {
    font-weight: bold;
    font-size: 20px;
    color: white;
}

#keyboard-key {
    font-size: 60px !important;
}

header#top-bar {
    transition: transform .2s ease-out;
    background-color: inherit;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

header#top-bar.hide {
    transform: translateY(-50px);
}

.animation-box-wrapper {
    position: relative;
}

.animation-box-wrapper #animation-box-1,
.animation-box-wrapper #animation-box-2 {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    margin: 30px 0;
}

#animation-box-1 {
    background: yellow;
}

#animation-box-2 {
    background: blue;
}

#long-scroller .box {
    display: block;
    height: 80vw;
    width: 80vw;
    background: gray;
    margin: 60px auto;
    max-width: 500px;
    max-height: 500px;
    opacity: 0;
    transition: opacity .3s ease-out;
}