@font-face {
		font-family: mont;
		src: url(font/montserrat.ttf);
	}
	@font-face {
		font-family: blender;
		src: url(font/blender_pro_m.otf);
	}
	@font-face {
		font-family: canela;
		src: url(font/canela_m.otf);
	}
	@font-face {
		font-family: market;
		src: url(font/market_fresh_bold_lower.ttf);
	}
	@font-face {
		font-family: modsans;
		src: url(font/modernsans-light.otf);
	}
	@font-face {
		font-family: podkova;
		src: url(font/Podkova-VariableFont_wght.ttf);
	}
	@font-face {
		font-family: alfa;
		src: url(font/AlfaSlabOne-Regular.ttf);
	}
	@font-face {
		font-family: madelike;
		src: url(font/MADE_Likes_Slab.otf);
	}
	@font-face {
		font-family: yonky;
		src: url(font/Yonky-Black-demoFFP.ttf);
	}

	:root{
		--bord: 3vh;
	}
	@media(max-height: 1200px) {
		:root{
			--bord:36px;
		}
	}
	
	@media(max-width: 1200px) {
		
		#content{
			font-size: 2em;
		}

		:root{
			--bord: 1vh;
		}
	}
	
	html, body{
		height:100%;
		width:100%;
		margin:0;
		padding:0;
		font-family: madelike, podkova, canela;
		background-color: #ffffff;
		font-size:1.5vw;
		overflow-x:hidden;
	}

	#bar{
		position: absolute;
		top:0;
		left:0;
		background-color: #fff;
		width:100%;
		height:120px;
		z-index: 7;
	}
	#bar .text{
		z-index:9;
		color:#222222;
	}
	#bar .box{
		border-radius: 0px;
	}
	#bar .fname{
		position:fixed;
		top:0;
		left:0;
		z-index:6;
		cursor:pointer;
		transform-origin: top left;
		-webkit-transform: rotate(-90deg) translatex(-100%);
		-moz-transform: rotate(-90deg) translatex(-100%);
		-ms-transform: rotate(-90deg) translatex(-100%);
		-o-transform: rotate(-90deg) translatex(-100%);
		transform: rotate(-90deg) translatex(calc(-100% - 100px));
	}
	#bar .fname .text{
		font-size:100px;
		position: relative;
		font-family: podkova, 'Courier New', Courier, monospace;
		-webkit-text-stroke:2px #000;
  		-webkit-text-fill-color:transparent;
		top:0;
		left:0;
		z-index:8;
	}
	.boxblk{
		background-color: #000000;
	}
	.boxcolor{
		background-color: #c5e0ff;
	}
	#bar .fname .box{
		position:relative;
		top:-30px;
		left:0;
		width:calc(100% + 100px);
		height:10px;
		z-index:7;
		transition:all .5s;
	}
	#bar .name{
		height:100%;
		float:left;
		cursor:pointer;
		position: absolute;
		top:0;
		left:90px;
		z-index:8;
	}
	#bar .name .text{
		font-size:100px;
		position: relative;
		font-family: podkova, 'Courier New', Courier, monospace;
		-webkit-text-stroke:2px #000;
  		-webkit-text-fill-color:transparent;
		top:0;
		left:0;
		z-index:8;
	}
	#bar .name .box{
		position:relative;
		top:-30px;
		left:0px;
		width:100%;
		height:10px;
		z-index:7;
		transition:all .5s;
	}
	#bar .menu{
		float:right;
		margin:0;
		padding:0;
		height:100%;
	}
	#bar .menu_item{
		height:100%;
		float:left;
		cursor:pointer;
		margin-right:2vw;
		z-index:8;
	}
	#bar .menu_item .text{
		font-family:podkova,'Courier New', Courier, monospace;
		font-weight: 100;
		font-size:60px;
		position:relative;
		top:30px;
		left:0;
	}
	#bar .menu_item .box{
		background-color: #000;
		position:relative;
		top:12px;
		left:0;
		width:100%;
		height:10px;
		z-index:8;
		transition:all .5s;
	}

	#bar .active .box{
		z-index:10;
		background-color: #ffffff;
	}

	#bar .menu_item:hover .box{
		background-color: #c5e0ff;
		transition:all .5s;
		/*z-index:8;*/
	}

	
	#copy{
		position:fixed;
		left:2vh;
		z-index:5;
		bottom:-2vh;
		font-size:3vh;
		color:#000;

		background-color: #000;
		color:#fff;
		padding: 0 1vh;
		transform-origin: top left;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	#content{
		color:#000;
		background-color: #fff;
		text-align:center;
		position:absolute;
		width:70%;
		left:15%;
		top:120px;
		transition: all .5s;
		z-index:6;
	}
	
	#content .nm{
		position:relative;
		cursor:pointer;
		left:0px;
		top:0px;
		margin-top: 2vh;
		margin-bottom:2vh;
		padding: 2vh;
		width:100%;
		background-color: #000000;
		text-align: left;
		border-radius: 3px;
		border: #0000aa;
		border-width: 1px;
	}

	#content .nm .text{
		color:#ffffff;
		padding:0;
		margin:0;
		font-size: 80px;
		position:relative;
		top:0;
		left:0;
		z-index:8;
	}

	#content .nm .box{
		background-color: #ffffff;
		position:relative;
		top:-32px;
		left:0;
		width:100%;
		height:10px;
		z-index:10;
		margin:0 0 -15px 0;
		padding:0;
		transition:all .5s;
		z-index:7;
	}

	#content .nm .hidden{
		background-color: #000000;
	}

	#content .nm:hover .hidden{
		background-color: #ffffff;
	}
	
	#content div{
		margin:2vh auto;
		padding:0 0;
		vertical-align: middle;
		box-sizing:border-box;
	}

	#content .detail{
		width:100%;
	}

	#content .detclose{
		background-color: #000000;
		color:#ffffff;
		width:30%;
		height:auto;
		position:relative;
		float:right;
		text-align: right;
		padding:1vh;
		margin: 2vh 0;
		cursor:pointer;
	}

	#content .detail.hidden{
		height: 0px;
		display: none;
	}

	#content a, #content a:visited, #content a:active{
		color: #000000;
	}

	#content a:hover{
		color: #000;
	}

	#content > img, #content > video{
		max-width:80%;
	}

	#content video, #content img{
		width:100%;
	}

	.l {float:left;}
	.r {float:right;}
	.tl {text-align:left;}
	.tr {text-align:right;}

	#content .clear{
		clear:both;
		margin:0;
		padding:0;
	}
	.cour{
		font-family: 'Courier New', Courier, monospace;
	}
	.w5{width:5%;}
	.w20{width:19%;}
	.w30{width:29%;}
	.w40{width:39%;}
	.w50{width:49%;}
	.w60{width:59%;}
	.w70{width:69%;}
	.w80{width:79%;}
	.w100{width:99%;}
	
	#content .c_box1{
		background-color:#c5e0ff;
		padding:1em;
	}
	#content .c_highlight1{
		background-color:#c5e0ff;
		padding:2px 7px 0px 4px;
		font-style: italic;
		font-size:1em;
	}
	#content .c_highlight2{
		background-color:#c5e0ff;
		padding:2px 3px 1px 3px;
		font-size:1em;
	}