/* CSS Vars for reference - DO NOT USE IN PRODUCTION
 * (https://caniuse.com/#feat=css-variables)
 */
 :root {
  --purple: #41007F;
  --blue: #00A7E1;
  --web-blue: #007BC6;
  --green: #50DD3F;
  --yellow: #FFAF00;
  --orange: #FF6400;
  --red: #F01E69;
  --violet: #AA1DD5;

  --jet-gray: #0C0C12;
  --dark-gray: #5A5A64;
  --medium-gray: #9B9BA0;
  --light-gray: #DEDEE2;

  --shadow: 0 8px 12px rgba(0,0,0,0.15);
  --shadow-alt: 0 6px 10px rgba(0,0,0,0.15);

  --font: 'OpenSans', sans-serif;
  --font-alt: 'OpenSans-SemiBold', sans-serif;
}

/* Custom fonts to force use of our version. This helps keep
 * consistent rendering across devices that may a different
 * version of the font installed.
 */
@font-face {
  font-family: 'OpenSans';
  font-display: swap;
  src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
       url('../fonts/OpenSans-Regular.woff') format('woff')
}
@font-face {
  font-family: 'OpenSans-SemiBold';
  font-display: swap;
  src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
       url('../fonts/OpenSans-SemiBold.woff') format('woff')
}

@font-face {
  font-family: 'OpenSans-Light';
  font-display: swap;
  src: url('../fonts/OpenSans-Light.woff2') format('woff2'),
       url('../fonts/OpenSans-Light.woff') format('woff')
}

@font-face {
  font-family: 'OpenSans-Bold';
  font-display: swap;
  src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
       url('../fonts/OpenSans-Bold.woff') format('woff')
}

@font-face {
  font-family: 'NotoSans';
  font-display: swap;
  src: url('../fonts/notosanskr-regular-webfont.woff2') format('woff2'),
       url('../fonts/notosanskr-regular-webfont.woff') format('woff')
}

@font-face {
  font-family: 'NotoSans-Bold';
  font-display: swap;
  src: url('../fonts/notosanskr-bold-webfont.woff2') format('woff2'),
       url('../fonts/notosanskr-bold-webfont.woff') format('woff')
}

*,*:before,*:after { box-sizing: border-box }
html, body, ol, ul { margin: 0; padding: 0 }
html { font-size: 62.5% }
body { font: 1.6rem/1.25 'OpenSans', sans-serif }
[lang="ko"] body { font: 1.6rem/1.25 'NotoSans', sans-serif }
html, body { min-height: 100vh }
a, a:hover { text-decoration: none }
ul, ol, li { list-style: none; list-style-position: inside }
.list-bullet { margin-bottom: 2rem; }
.list-bullet, .list-bullet li { margin-left:7px; list-style: disc; }
.list-bullet li { padding-left: 2rem; }
.list-bullet li + li { margin-top:7px; }

body, input, textarea { color: #0C0C12 }

/* Helpers */

.first { margin-top: 0 !important }
.last { margin-bottom: 0 !important }
.hidden, [hidden] { display: none }
.nowrap { white-space: nowrap }
.relative { position: relative }