main.css

@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');

@font-face {
    font-family: 'Comic Mono';
    src: url('bin/comic-mono/comicmono-webfont.eot');
    src: url('bin/comic-mono/comicmono-webfont.eot?#iefix') format('embedded-opentype'),
         url('bin/comic-mono/comicmono-webfont.woff2') format('woff2'),
         url('bin/comic-mono/comicmono-webfont.woff') format('woff'),
         url('bin/comic-mono/comicmono-webfont.ttf') format('truetype'),
         url('bin/comic-mono/comicmono-webfont.svg#Comic%20Mono') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	border: 0;
	font-size: 100%;
	line-height: 110%;
	font: inherit;
	vertical-align: baseline;
}

i, em {
	font-style: oblique;
}

sup {
	font-size: 80%;
	vertical-align: super;
}

sub {
	font-size: 80%;
	vertical-align: sub;
}

h1, h2, h3, h4, h5, h6 {
       font-weight: 500;
	   line-height: 50%;
}

strong, b {
       font-weight: 500;
}

h6 {
	font-size: 60%;
}

h5 {
	font-size: 90%;
}

h4 {
	font-size: 100%;
}

h3 {
	font-size: 120%;
}

h2 {
	font-size: 140%;
}

h1 {
	font-size: 180%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	padding: 0.5vw;
}
ol li {
	list-style-type: decimal;
}
ul li {
	list-style-type: disc;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	font-family: 'Gamja Flower', 'Comic Mono', 'Arial', sans-serif;
	font-size: 150%;
    line-height: 96%;
	font-weight: normal;
	background-color: black;
	color: white;
}

input, textarea {
	background-color: #ffe0ff;
	font-family: 'Gamja Flower', 'Comic Mono', 'Arial', sans-serif;
	font-size: 80%;
	line-height: 90%;
}

input[type="file"] {
	background-color: unset;
}

@supports not (-webkit-touch-callout: none) {
	button {
		font-family: 'Gamja Flower', 'Comic Mono', 'Arial', sans-serif;
		font-size: 60%;
		line-height: 105%;
		color: #111;
		background-color: #ffccff;
		border: 1px solid #aa77aa;
		
	}
}

code {
	font-family: 'Comic Mono', "Courier New", Courier, "courier new", courier, monospace;
	font-size: 70%;
}

pre {
	font-family: 'Comic Mono', "Courier New", Courier, "courier new", courier, monospace;
    font-size: 70%;
    line-height: 115%;
}

.rounded {
    background: #222;
    border-radius: 0.25em;
    padding: 2px;
}

code.rounded {
	padding: 1px;
}

@keyframes loonaonethird {
  00.00%	{ color:#FF007F; }
  12.50%	{ color:#FF007F; }

  25.00%	{ color:#FFFF00; }
  37.50%	{ color:#FFFF00; }

  50.00%	{ color:#00BF00; }
  62.50%	{ color:#00BF00; }
  68.75%	{ color:#AABBDD; }
  75.00%	{ color:#FFBFFF; }
  87.50%	{ color:#FFBFFF; }

  100.0%	{ color:#FF007F; }
}

@keyframes loonaoddeyecircle {
  00.00%	{ color:#FF2222; }
  16.66%	{ color:#FF2222; }

  33.33%	{ color:#3333FF; }
  50.00%	{ color:#3333FF; }

  66.67%	{ color:#C027D0; }
  83.33%	{ color:#C027D0; }

  100.0%	{ color:#FF2222; }
}

@keyframes loonayouthyouthbyyoung {
  00.00%	{ color:#8F082F; }
  12.50%	{ color:#8F082F; }

  25.00%	{ color:#FF9F7F; }
  37.50%	{ color:#FF9F7F; }

  50.00%	{ color:#3FDF9F; }
  62.50%	{ color:#3FDF9F; }

  75.00%	{ color:#9F9F9F; }
  87.50%	{ color:#9F9F9F; }

  100.0%	{ color:#8F082F; }
}

@keyframes loonaot12 {
  00.00% { color:#FF007F; }
  04.17% { color:#FF007F; }
  08.33% { color:#FFFF00; }
  12.50% { color:#FFFF00; }
  16.67% { color:#00BF00; }
  20.83% { color:#00BF00; }
  25.00% { color:#FF7F00; }
  29.17% { color:#FF7F00; }
  33.33% { color:#FFBFFF; }
  37.50% { color:#FFBFFF; }
  41.67% { color:#FF2222; }
  45.83% { color:#FF2222; }
  50.00% { color:#3333FF; }
  54.17% { color:#3333FF; }
  58.33% { color:#C027D0; }
  62.50% { color:#C027D0; }
  66.67% { color:#8F082F; }
  70.83% { color:#8F082F; }
  75.00% { color:#FF9F7F; }
  79.17% { color:#FF9F7F; }
  83.33% { color:#3FDF9F; }
  87.50% { color:#3FDF9F; }
  91.67% { color:#9F9F9F; }
  95.83% { color:#9F9F9F; }
  100.0% { color:#FF007F; }
}

a {
	color: #0ff;
}

a:visited {
	color: #f0f;
}

.heejin, a.heejin:visited	{ color: #FF007F; }
.hyunjin, a.hyunjin:visited	{ color: #FFEF00; }
.haseul, a.haseul:visited	{ color: #0FBF00; }
.yeojin, a.yeojin:visited	{ color: #FF7F00; }
.vivi, a.vivi:visited		{ color: #FFA7DF; }
.kimlip, a.kimlip:visited	{ color: #FF2222; }
.jinsoul, a.jinsoul:visited	{ color: #005FFF; }
.choerry, a.choerry:visited	{ color: #AF0097; }
.yves, a.yves:visited		{ color: #9F0F4F; }
.chuu, a.chuu:visited		{ color: #FFBF7F; }
.gowon, a.gowon:visited		{ color: #2FEF87; }
.hyeju, a.hyeju:visited		{ color: #9F9F9F; }
.third, a.third:visited		{ animation: loonaonethird 3s linear 0s infinite normal none; }
.circle, a.circle:visited	{ animation: loonaoddeyecircle 3s linear 0s infinite normal none; }
.youth, a.youth:visited		{ animation: loonayouthyouthbyyoung 3s linear 0s infinite normal none; }
.ot12, a.ot12:visited		{ animation: loonaot12 6s linear 0s infinite normal none; }

@media (prefers-reduced-motion) {
	.heejin, a.heejin:visited	{ color: #FF1F64; }
	.third, a.third:visited		{ animation: unset; color: #62BFBE; }
	.circle, a.circle:visited	{ animation: unset; color: #C2C5F0; }
	.youth, a.youth:visited		{ animation: unset; color: #C8F5A2 }
	.ot12, a.ot12:visited		{ animation: unset; color: #FF57FF }
}

a:visited {
	filter: saturate(0.75) brightness(0.85);
}