/* 
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif; 
*/
/*Debug*/
/* * {
    box-sizing: border-box !important;
    outline: 1px solid limegreen !important;
} */

html {
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
}

h1,
h2,
h3,
h4,
h5,
h6,
ol {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    line-height: 1.6;
    font-weight: bolder;
}

p,
a {
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.6;
    letter-spacing: 1px;
    font-weight: bold;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

:root {
    --main-white: #fff;
    --main-black: #282828;
    --main-grey: #f5f5f5;
    --sub-red: #bb0501;
    --sub-blue: #43a5e3;
    --sub-purple: #888ad1;
    --sub-green: #3cb295;
    --sub-orange: #fa8333;
}

.iconHover-red:hover {
    color: var(--sub-red)
}

.iconHover-orange:hover {
    color: var(--sub-orange)
}

.iconHover-green:hover {
    color: var(--sub-green)
}

.iconHover-blue:hover {
    color: var(--sub-blue)
}

.iconHover-purple:hover {
    color: var(--sub-purple)
}

.dark-style {
    color: var(--main-black)
}