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

		body {
			margin: 0;
			padding: 0;
			font-family: lucida grande,verdana,arial,helvetica;
			font-size: 12px;
			font-color: #f1f1f1;
			background: #000000;
		}

		img {
			max-width: 100%;
		}

		.outer {
			width: 1000px;
			margin: auto;
			position: relative;
		}

		.header {
			background: #666;
			width: 100%;
			height: 200px;
			border: 1px solid #0c0c0c;
			background-image: url(banner_bg.jpg);
			background-size: cover;
		}

		.white {
			background: #0c0c0c;
			border: 1px solid #0c0c0c;
			padding: 24px;
			min-height: calc(100vh - 280px);
		}

		.nav-item {
			display: inline-block;
			border: 1px solid #f1f1f1 ;
			position: relative;
			padding: 12px 24px;
			bottom: -1px;
		}

		.nav-item.active {
			border-bottom: 1px solid #0c0c0c;
		}


		h3 {
			background: #0c0c0c;
			color: #f1f1f1;
			letter-spacing: 1px;
			padding: 3px 6px;
		}

		h3 a {
			background: #0c0c0c;
			color: #f1f1f1;
			font-size: 2em;
			text-transform: lowercase;
		}

		h3 a:hover {
			background: #f1f1f1;
			color: #0c0c0c;
			font-size: 2em;
		}

		.content {
			width: 680px;
			float: left;
			font-color: #f1f1f1;
			color: #f1f1f1;
		}


		.content2 {
			width: 100%;
			font-color: #0c0c0c;
			color: #f1f1f1;
		}


		.side {
			width: 250px;
			float: right;
		}


		.box1 {
			width: 40%;
			float:left;
			margin: 30px 0px 0px 0px;
			font-color: #f1f1f1;
			color: #f1f1f1;
		}


		.box2 {
			background: #5d5d5d;
			padding: 12px;
			margin: 5px;
			display: inline-block;
			width: 45%;
		
		}


		.clear {
			clear: both;
		}


		.side-box {
			background: #5d5d5d;
			padding: 12px;
}

		.side-box2 {
			background: #5d5d5d;
			padding: 12px;
			margin: 10px 10px 10px 10px;
		
}

	
		textarea.code {
			background: #f1f1f1;
			color: #0c0c0c;
			font-family: monospace;
			padding: 12px;
			width: 100%;
		}

		.breadcrumbs {
			background: #EEE;
			display: inline-block;
			padding: 3px 6px;
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: #666;
		}

		.breadcrumbs a {
			text-decoration: none;
			color: #666;
			font-weight: bold;
		}

#image-gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .gallery-image {
            height: 100px;
            margin: 5px;
            cursor: pointer;
        }


         .gallery-image2 {
            height: 200px;
            margin: 5px;
            cursor: pointer;
        }


        #lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 9999;
        }

        #lightbox-image {
            display: block;
            margin: auto;
            max-width: 80%;
            max-height: 80%;
            margin-top: 10%;
            cursor: pointer;
        }


		.nav a {
			color: #f1f1f1;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-size: 11px;
			font-weight: bold;
}

		.nav a:hover {
			color: #0c0c0c;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: bold;
			font-size: 11px;
			background-color: #f1f1f1;
}

		.content a {
			color: #f1f1f1;
			text-decoration: underline;
			border-bottom: 1px dotted #000;
			text-transform: lowercase;
			letter-spacing: 1px;
			font-size: 11px;
			font-weight: bold;
}

		.content a:hover {
			color: #0c0c0c;
			text-decoration: none;
			border-bottom: 1px dotted #f1f1f1;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-size: 11px;
			font-weight: bold;
			background-color: #f1f1f1;
}

		.content2 a {
			color: #f1f1f1;
			text-decoration: none;
			text-transform: lowercase;
			letter-spacing: 1px;
			font-weight: bold;
}

		.content2 a:hover {
			color: #0c0c0c;
			text-decoration: none;
			text-transform: none;
			letter-spacing: 1px;
			font-weight: bold;
			background-color: #f1f1f1;
}

		.side a {
			color: #6a6a6a;
			text-decoration: none;
			border-bottom: 1px dotted #f1f1f1;
			text-transform: lowercase;
			letter-spacing: 1px;
			font-weight: bold;
}

		.side a:hover {
			color: #0c0c0c;
			text-decoration: none;
			border-bottom: 1px dotted #f1f1f1;
			text-transform: lowercase;
			letter-spacing: 1px;
			font-weight: bold;
			background-color: #6a6a6a;
}

		h1 {
			background: #858585;
			color: #f1f1f1;
			font-size: 14px;
			text-transform: uppercase;
			letter-spacing: 1px;
			padding: 3px 6px;
		}

		h2 {
			font-size: 1em;
			border-bottom: 1px dotted #f1f1f1;
		}


		

		.border {
			border: 1px solid #f1f1f1;
		}

		/* SOFTWARE*/
		.thumbnail > div {
			height: 85px;
			width: 145px;
			border: 1px dashed #f1f1f1;
			vertical-align: middle;
			background-size: 160%;
			background-position: top;
			float: left;
			margin-right: 14px;
		}

		.item {
			margin-bottom: 24px;
			min-height: 110px;
		}

		.item-small {
			margin-bottom: 24px;
		}

		h2 a {
			text-decoration: none;
			color: #f1f1f1;
		}
		.post-info {
			font-style: italic;
			margin-bottom: 12px;
		}
		.nav-item.nav-top {
			border: none;
		}
		.site-title {
			color: #0c0c0c;
			margin-top: 40px;
			margin-left: 70px;
			background-color: #f1f1f1;
		}
		.site-title a {
			color: #0c0c0c;
			text-decoration: none;
			font-family: 'Nanum Pen Script', cursive;
			font-size: 45px;
		}

		.update {
			display: inline;
			margin-right: 24px;
		}

		.updates {
			font-size: 11px;
			margin-top: 6px;
			margin-bottom: 3px;
		}

		.yasu {
			position: absolute;
			width: 350px;
			right: 150px;
			top: 0px;
		}

		.post-content img {
			max-width: 90%;
		}
		.muted {
			opacity: 0.3;
		}
		.recent-image img {
			width: 50px;
			border: 1px solid;
		}

  /* IMAGES, ETC DISPLAY SETTINGS */

.imageprev {
	width: 90%;
	max-width: 100%;
	height: auto;
}

/* COMICS DISPLAY */

.four-grid {
   display: grid; 

   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   
   gap: 20px;
   height: 100%;

   
}
  
#item-0 {

   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}
#item-2 {

   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 2;
   grid-column-end: 4;
   
}
#item-3 {

   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}



.three-grid {
   display: grid; 
	align-self: center;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr 1fr;
   
   gap: 20px;
   height: 100%;

   
}
  
#item-0 {

   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}
#item-2 {

   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 2;
   grid-column-end: 4;
   
}

.two-grid {
   display: grid; 

   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr;
   
   gap: 20px;
   height: 100%;

   
}
  
#item-0 {

   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}

li.onehundred {
  list-style-type: "💯";
}

li.eyes {
  list-style-type: "👀";
}

li.logo {
  list-style-image: url('images/logo.png');
}

.svg {
	width: 4%;
}