@import url("https://fonts.googleapis.com/css?family=EB+Garamond|Montserrat:700|Noto+Serif+KR:600|Shippori+Mincho+B1:600");

@font-face {
	font-family: "Proxima Nova Light";
	src:         url("fonts/Proxima Nova Light.ttf") format("opentype");
}

@font-face {
	font-family: "Proxima Nova Light";
	src:         url("fonts/Proxima Nova Light.ttf") format("opentype");
}

@font-face {
	font-family: "Proxima Nova Medium";
	src:         url("fonts/Proxima Nova Medium.ttf") format("opentype");
}

@font-face {
	font-family: "Proxima Nova Regular";
	src:         url("fonts/Proxima Nova Regular.ttf") format("opentype");
}

a {
	color:           #d0021b;
	font-family:     "Montserrat", sans-serif;
	font-size:       18px;
	letter-spacing:  2px;
	text-decoration: none;
}

a:hover {
	color:           white;
	font-family:     "Montserrat", sans-serif;
	text-decoration: none;
}

button {
	background:      none;
	border:          none;
	color:           #d0021b;
	cursor:          pointer;
	display:         inline-block;
	font-family:     "Montserrat", sans-serif;
	letter-spacing:  4px;
	margin-top:      8px;
	text-decoration: none;
	transition:      transform 0.5s ease-in-out;
}

button:hover {
	color:           white;
	margin-top:      8px;
	text-decoration: none;
}

.eng {
	color:          #d0021b;
	font-family:    "Montserrat", sans-serif;
	letter-spacing: 4px;
}

.fadeInImage {
	animation: fadeIn 1s forwards;
	opacity:   0;
}

.gallery {
	display:   flex;
	flex-wrap: wrap;
	padding:   0 4px;
}

.hanja {
	color:       #d0021b;
	font-family: "Shippori Mincho B1", sans-serif;
}

.header {
	background:  rgba(0, 0, 0, 0.9);
	margin-left: -8px;
	margin-top:  -18px;
	padding:     15px;
	position:    sticky;
	text-align:  center;
	top:         0;
	z-index:     1;
}

.kor {
	color:          #d0021b;
	font-family:    "Noto Serif KR", sans-serif;
	letter-spacing: 4px;
}

.row {
	display:         flex;
	flex-direction:  row;
	flex-wrap:       wrap;
	justify-content: space-between;
	margin:          8px;
	transition:      max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.row img {
	box-shadow: 0 1px 1px black,
	            0 2px 2px black,
	            0 4px 4px black,
	            0 8px 8px black,
	            0 16px 16px black;
	width:      100%;
}

.hiddenrow {
	max-height: 0;
	opacity:    0;
	overflow:   hidden;
	transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/*.row img:hover {*/
/*    filter: brightness(50%);*/
/*    transition: all 0.2s ease-in-out;*/
/*}*/

ul {
	display:         flex;
	justify-content: center;
	list-style-type: none;
	padding:         0;
}

li {
	margin:     0 27px;
	text-align: center;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity:          1;
		background-color: transparent;
	}
}

#second {
	animation-delay: 0.5s;
}

#third {
	animation-delay: 1s;
}

html, body {
	height:     100vh;
	margin:     0;
	max-width:  100%;
	overflow:   auto;
	overflow-x: hidden;
	padding:    0;
}

.main {
	height: 100vh;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

#loading-screen.fade-out {
	animation: fadeOut 1.5s forwards;
}

.category-header {
	color:          #d0021b;
	font-family:    "Montserrat", sans-serif;
	font-size:      45px;
	letter-spacing: 4px;
	margin:         20px;
	text-align:     center;
	text-shadow:    1px 1px black;
}