@charset "utf-8";
/* CSS Document */


@font-face {
  font-family: 'rakkas';
  src: url("fonts/rakkas.ttf");
}

@font-face {
  font-family: 'noto_sans_kr';
  src: url("fonts/noto_sans_kr.ttf");
}

@font-face {
  font-family: 'hand_precursive';
  src: url("fonts/hand_precursive.ttf");
}

@font-face {
	font-family: 'nova_square_regular';
	src: url(fonts/nova_square_regular.ttf);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:root.daylight {
--color-bg: #c2c2c2;
--color-base: #eee;
--color-a: #000;
--color-b: #fff;

--color-t: #000;
--color-svg: #fff;

--back-color-P: inherit;
--text-color-P: inherit;

--font: "noto_sans_kr", sans-serif;
}

:root.midnight {
--color-bg: #111111;
--color-base: #292929;
--color-a: #000;
--color-b: #fff;

--color-t: #fff;
--color-svg: #fff;

--back-color-P: inherit;
--text-color-P: inherit;

--font: "noto_sans_kr", sans-serif;
}

:root.hacker {
--color-bg: #141211;
--color-base: #b9fe5e;
--color-a: #141211;
--color-b: #b9fe5e;

--color-t: #141211;
--color-svg: #b9fe5e;

--back-color-P: inherit;
--text-color-P: inherit;

--background-image: none;
--background-gradient: linear-gradient(#141211, #b9fe5e56);

--font: "nova_square_regular", monospace;

}

:root.twee {
--color-bg: #e09fcd;
--color-base: #611d5669;
--color-a: #dd4792;
--color-b: #fff;

--color-t: #fff;
--color-svg: #fff;
--color-border: #ff45a285;

--background-image: url("images/background/girl_pattern.png");
--background-image-opacity:100%;
--background-gradient: linear-gradient(#e48bc9, #e6be82);
--background-repeat: repeat;
--background-size: 5%;

--back-color-P: inherit;
--text-color-P: inherit;

--curve: 0%;

--border-thickness: 5px;

--font: "Edu VIC WA NT Hand Pre", cursive;

}

:root.glass {
--color-bg: #9797ad;
--color-base: #47466f85;
--color-a: #17173b;
--color-b: #fff;

--color-t: #fff;
--color-svg: #fff;
--color-border: #fff;

--back-color-P: inherit;
--text-color-P: inherit;

--background-image: url("images/background/cerulean_desert.png");
--background-gradient: linear-gradient(#9797ad, #47466f85);
--background-repeat: no-repeat;
--background-size: 100% 100%;
--bg-attachment: fixed;

--curve: 0%;

--border-thickness: 5px;

--font: "nova_square_regular", monospace;

}

body {
	margin: 0px;

  	background-image: var(--background-image), var(--background-gradient);
  	background-repeat: var(--background-repeat, no-repeat);
  	background-size: var(--background-size, cover);
	background-attachment: var(--bg-attachment);
  	background-position: center;

	background-color:var(--color-bg);
	
}

h1 {
  font-family: var(--font);
  font-weight: 500;
  font-size: inherit, 30pt;
  font-style: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.5;
  color: var(--color-t);
  user-select: inherit;
}

h1.I {color:var(--color-b);}
h1.P {color:var(--text-color-P);}

h2 {
  font-family: var(--font);
  font-weight: 300;
  font-size: inherit, 24pt;
  font-style: normal;
  line-height: 1.5;
  text-align: left;
  color: var(--color-t);
  user-select: inherit;
	
}

h2.I {color:var(--color-b);}
h2.P {color:var(--text-color-P);}

p {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 300;
  font-size: 16pt;
  font-style: normal;
  line-height: 1.25;
  text-align: justify;
  text-align-last: left;
  color: var(--color-t);
	
}

p.I {color:var(--color-b);}
p.P {color:var(--text-color-P);}


p.bold {font-weight: bold;}

svg {
	fill: var(--color-svg);
}

li {
  font-family: "noto_sans_kr";
  font-weight: 300;
  font-size: 18px;
  font-style: normal;
  line-height: 1.5;
  text-align: justify;
	
}

a {
	color: inherit;
	background: inherit;
	text-decoration: none; 
}

.header-box {
	background-color: var(--color-a);
	
	top: -200px;
	width: 100%;

	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;

	padding: 0%;

	transition: transform 0.5s cubic-bezier(0.4, -0.3, 0.7, 1.5);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-box.folded {
  transform: translateY(-120%);
  transition: transform 0.5s ease-in; 
}

.header {
	display: grid;
	grid-template-columns: repeat(6, 16%);
	
	width: clamp(800px, 80%, 2400px) ;
	margin-left: auto;
	margin-right: auto;
}

.nameplate {
	background-color:inherit;

	margin:auto;
	padding: 0px;
	
	font-size: 22px;

	white-space: nowrap;
  	text-overflow: ellipsis;
	
	grid-column-start: 1;
	grid-column-end: 3;
}

.banner {
	background-color:inherit;

	margin:auto;
	padding: 0px;
	
	grid-column-start: 4;
	grid-column-end: 7;
}

.block {

	color: var(--color-b);
	background: var(--color-a);
	margin-left: max(5%, 5px);
	margin-right: max(5%, 5px);
	padding: 1px;
	
  	font-size: clamp(10px, 1.2vw, 14px);

	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;

	cursor: pointer;
	user-select: none;
	
}

.block:hover {
	color: var(--color-a);
	background: var(--color-b);
	text-decoration: none;}

.block:active {
	color: var(--color-a);
	background: var(--color-b);
	
	text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%; 
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-a);
  min-width: 160px;
  width: 100%; 
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.show-button {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: var(--color-a);
  color: var(--color-b);
  padding: 16px 24px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 999; 
  transition: opacity 0.6s ease;
}

.show-button:hover {
	color: var(--color-a);
	background: var(--color-b);}

.base {
	display: grid;
	column-gap: 10px;
	background-color: var(--color-base);
	backdrop-filter: blur(5px);

	border: var(--border-thickness) solid var(--color-border);
	
	width: clamp(800px, 85%, 2400px) ;
	min-height: calc(80vh - 200px);

	margin-left: auto;
	margin-right: auto;
	margin-top: min(125px, 5%);
	margin-bottom: min(100px, 5%);

	padding: min(10px, 5%);

	border-radius: var(--curve);
	
}

.gallery {
	display: grid;
	column-gap: clamp(100px, 5%, 500px);
	grid-template-columns: repeat(12, 1fr);
	margin: auto;
	padding: auto;

}

.pic {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	
}

.pic2 {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	grid-column: span 2;
	
}

.pic3 {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	grid-column: span 3;

}

.pic4 {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	grid-column: span 4;
	
}

.pic6 {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	grid-column: span 6;

	
}

.pic8 {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	grid-column: span 8;

	
}

.pic9 {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	grid-column: span 9;

	
}

.pic12 {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	grid-column: span 12;

}

.fullspan {
	
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	
	grid-column-start: 1;
	grid-column-end: 13;
	
}

.preview {
	
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	
	grid-column-start: 1;
	grid-column-end: 13;
	
	outline: black 10px;
	
}

.foot {
	display: grid;
	grid-template-columns: repeat(3, 30%);
	column-gap: 3%;
	background-color: var(--color-a);
	
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	bottom: 0;
}

.foot_third {
	
	padding: 20px;
	line-height: 150%;
	
	margin-left: auto;
	margin-right: auto;
	
}

.social_box {
	
display: flex;
	
}

img.social_box {
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	
	display: flex;
	flex-direction: row;
}