/* Basic CSS Values that apply more or less everywhere. */ /* Load fonts: NPS font */ @font-face{ font-family: 'NPS'; src: url('../fonts/NPSfont_regular.ttf') format('truetype'); font-weight:400; } @font-face{ font-family: 'NPS'; src: url('../fonts/NPSfont_bold.ttf') format('truetype'); font-weight:700; } @font-face{ font-family: 'NPS'; src: url('../fonts/NPSfont_extrabold.ttf') format('truetype'); font-weight:900; } /* DM Mono was selected as the monospace latin font */ /* since it is very light, at ~50KB per single ttf. */ @font-face{ font-family: 'DM Mono'; src: url('../fonts/DMMono-Medium.ttf') format('truetype'); font-weight:500; } /* The Basics */ *{ margin:0; padding:0; box-sizing: border-box; } html{ width:100%; height:100%; /* This makes Korean text break at word boundaries. */ word-break: keep-all; } body{ width:100%; height:100%; font-family:NPS; font-size:16px; color:var(--color-text-auto); } canvas{ display:block; pointer-events:none; } img{ display:block; } /* Mode Switches. * .dark-mode .light-mode, * .langmode-en .langmode-ko * .mobile-mode .desktop-mode * .anim-enabled .anim-disabled * may be added to the element. */ /* Light & Dark Modes */ .dark-mode .ld-light{ display:none; } .light-mode .ld-dark{ display:none; } /* Language Modes */ .langmode-ko .lang-en{ display:none; } .langmode-en .lang-ko{ display:none; } /* Mobile Modes */ .mobile-mode .mm-pc{ display:none; } .desktop-mode .mm-mobile{ display:none; } /* Anim Modes */ .anim-enabled .anim-off{ display:none; } .anim-disabled .anim-on{ display:none; } /* Responsive Section */ /* Targeting down to 300px. */ /* Mobile mode */ @media (width<640px) { } /* Smaller Mobiles */ @media (width<480px) { } /* Ridiculously Small Mobiles */ @media (width<360px) { body{ font-size:14px; } } /* Mobile ladder */ /* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */ @media (width>=480px) and (width<640px) { /* 640 ~ 480 : Big Mobiles */ } @media (width>=360px) and (width<480px) { /* 480 ~ 360 : Small Mobiles */ } @media (width<360px) { /* 360 ~ 300 : Ridiculously Small Mobiles */ }