@font-face {
	font-family: 'PretendardVariable';
	src: url("/font/PretendardVariable.woff2") format("woff2");
}

body::-webkit-scrollbar {
	display: none;
	-ms-overflow-style: none; /* 인터넷 익스플로러 */
	scrollbar-width: none; /* 파이어폭스 */
}

html {font-family: 'PretendardVariable', 'sans-serif';}
b, strong, h1, h2, h3, h4, h5, h6, h7, h8, .bold {font-family: inherit; font-weight: 700;}
.medium {font-weight: 500;}
.light {font-weight: 300;}
.exbold {font-weight: 900;}

small, .small {font-size:0.8em;}

html {width:100%; height: 100%;}
body {margin:0; padding:0; height: 100%;}
a {color:inherit; text-decoration: none;}
li{list-style: none;}
p, h1, h2, h3, h4, h5, h6 {margin:0;}

ul {margin:0; padding:0;}

header#site-header {padding:10px; display: flex; grid-area: header; justify-content: space-between; align-items: center}
#gnb_list li {padding:10px; margin:auto 5px;}
#gnb_list li a:hover {color:#FC0;}

footer {padding:10px; display: flex; grid-area: footer;}
footer>div>a {padding:5px; margin:5px;}
#main {padding:10px; display: flex; grid-area: main; justify-content: center; align-items: center;}
#copied {opacity: 0; position: absolute; background-color: #333; padding:5px 10px; border-radius: 5px; transition: opacity 0.5s;}


#logo {width:40px;}
#logo>svg {width:100%; height:100%;}
#logo polygon {fill:#fff;stroke:#fff;stroke-miterlimit:10}

img {max-width: 100%;}
span.tags {display: inline-block; padding:5px 10px; border:#000 1px solid; font-size:0.8em; cursor: pointer;}
span.tags.checked {background-color:#000; color:#FFF;}

#pagination a {margin:10px;}

.container {
	display:grid; 
	grid-template-rows: 100px 1fr 50px; 
	grid-template-columns: 1fr;
	grid-template-areas: 
		"header"
		"main"
		"footer";
	align-content: stretch;
	height: 100%;
}

.flex {display: flex;}
.flex.center {align-items: center; justify-content: center}
.flex.vcenter {align-items: center;}
.flex.between {align-items: center; justify-content: space-between}
.flex.around {align-items: center; justify-content: space-around}
.grid {display: grid;}
.tc {text-align: center;}

.nodrag {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

.card.white {background-color:#EEE; color:#000;}
.card.transparent {background-color:none; color:inherit; box-shadow: 2px 2px 10px 0px #333;}
.card img {width:100%;}

button, a.btn {display:inline-block; background-color:#CCC; color:#000; cursor: pointer; border:transparent 2px solid; padding:5px 10px; font-size:0.9em;}

a.btn.red, button.red {background-color:#C00; color:#FFF;}
a.btn.yellow, button.yellow {background-color:#FC0; color:#000;}
a.btn.blk {background-color:#000; color:#FFF;}

button:hover, a.btn:hover {background-color:#DDD;}
button.yellow:hover {background-color:#FF0;}
a.btn.blk:hover {background-color:#666;}

.w100 {width: 100%;}
.h100 {height:100%;}

.w1200 {max-width: 1200px; margin:auto;}
.w800 {max-width: 800px; margin:auto;}

.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}

.pad10 {padding:10px;}
.pad20 {padding:20px;}
.pad30 {padding:30px;}

.box {box-sizing: border-box;}

.wh {white-space: nowrap; text-overflow: ellipsis;}

.nobg {background-color:none;}

.p3 {grid-template-columns: 1fr 1fr 1fr;}
.p4 {grid-template-columns: 1fr 1fr 1fr 1fr;}

.ellipsis {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.ellipsis.hover:hover {white-space: normal;}

.skills {padding:5px 10px; border:#FFF 1px solid; margin:5px;}

#profile_img {
	width:100px; height:100px; border-radius: 50px;
}
	
@media screen and (max-width:500px) {
	.m1 {grid-template-columns: 1fr;}
}

@media print {
	#gnb {display: none;}
	body {background-color:transparent; color:#333;}
}