/*Font*/
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nunito&family=Gaegu&family=Abel&family=Ubuntu+Mono:wght@400;700&display=swap');

/* Mobile CSS */
@media only screen and (max-width: 600px) {
  
  .flex {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
  }
  #main-container{
      min-width: 100%;
      margin: auto;
  }
  .content-wrap {
    margin-top: 10px;
  }
  #header-contained{
	  height: 1vh;
  }
  #sidebar {
      margin: auto;
	  margin-left: -.5em;
	  margin-right: .5em;
	  width: auto;
      height: auto;
	  padding-top: 1em;
      display: flex;
      order: 2;
      position: fixed;
      background: linear-gradient(180deg, #61e1e4 54%, #00b9be 100%);
      border: 2px solid #33596a;
      border-radius: 6px;
      font-size: 0.6em;
      bottom: 0;
      top: auto;
      align-self: flex-start;
      z-index:5;
      color: #33596a;
	  font-size: 1em;
  }
  
  #navbutton{
      display:inline;
  }
  #navdeco{
      display:none; 
  }
  #navmini{
      display:inline;
      color: #33596a;
  }
  ul.navmenu > li {float: left; margin-right: 3em; margin-top: -.5em; margin-bottom: .5em;}

  #content-container {
      max-width: 85vw;
      display: block;
      order: 1;
      margin: auto;
      margin-bottom: 0px;
      padding: 10px;
	  padding-top: 0px;
      font-size:.7em;
	  overflow: hidden;
  }
  #footer {
    font-size: 1em;
  }

  .lists{
      width:100%;
  }
  .sidebar-wrapper {
    font-size: 1em;
    margin-top: 0px;
    padding-left: 1vw;
    padding-right:1vw;
	justify-content: space-between;
    text-align: center;
    line-height: 230%;
    border: 0px solid black;
    color: black;
    font-family: Verdana;
  }
  
  #profilepic{
    margin-right: 1vw;
    max-width: 100px;
  }
  #scrollbox{
    font-size: 0.8em;
    max-height:30vh; 
    overflow-y:auto; 
    padding: .2em;
	line-height: 1.1em;
    border: 2px solid #33596a;
    background-color: azure;
  }

  
  /*Scrollbar size adjustment*/
  ::-webkit-scrollbar{
   width: 3vw;
  }
  
  /*Lightbox controls for mobile*/
  .gallery{
   position: sticky; 
  }
  .item{
    padding-top: 0;
  }
  .pager {
  	position: absolute;
  	bottom: 0;
    left:0;
    display:flex;
  	width: 100vw;
  	pointer-events:none;
  }
  .pager label{
    padding:2vw;
    padding-top: 2vh;
    background:rgba(255,255,255,0.7);
    z-index:6;
    height: 3vh;
    font-size:2em;
    pointer-events:auto;
  }
  .imgcaption{
	margin:0 auto;
    text-align: left;
    height:20vh;
    min-height: 50%;
    max-height: 50%;
    width: 80vw;
    overflow-y:auto;
    
    color:white;
  }
  
  /*Image/Descript display order for portfolio*/
  .sc-top{
   flex-wrap:wrap; 
  }
  .sc-text{
    order: 2;
  }
  .sc-sideimg{
    order: 1; 
    display:block;
  }
  .thumb img{
    width: 17vh;
    height: 17vh;
  }


}

/* Desktop / Tablet CSS */
@media only screen and (min-width: 601px){
  
  
  #main-container {
    max-width: 80%;
    margin: auto;
  }
  .flex {
    display: flex;
    margin-bottom: 10px;
  }
  .content-wrap {
    margin-top: 10px;
  }
  #header-contained{
	  height: 100px;
  }
  #content-container {
    width: 60%;
    max-width: 1000px;
    margin: auto;
    margin-bottom: 0px;
    background: linear-gradient(180deg, #5946b2 5%, #00b9be 5%, #61e1e4 24%, #00b9be 100%);
    border: 2px solid #4d3b3c;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 10px;
	padding-top: 0px;
    box-shadow: 3px 3px #46425e, inset 0 -6px 1px #f47983;
    font-size:0.7em;
    color: #ffddca;
	overflow: hidden;
	
  }
  #sidebar-container{
    display: block;
    position: sticky;
    position: -webkit-sticky; /* Safari */
    width: 165px;
    margin: auto;
    margin-top: 50px;
    margin-right: .5em;
    margin-bottom: 0px;
    padding: 5px;
    height: auto;
    border-radius: 6px;
    top: 0;
    align-self: flex-start;
    z-index:5;
    color: #33596a;
  }
  #sidebar{
    display: block;
    width: 150px;
    margin: auto;
    margin-top: 50px;
    margin-right: .5em;
    margin-bottom: 0px;
    padding: 5px;
    height: auto;
    background: linear-gradient(180deg, #61e1e4 54%, #00b9be 100%);
	image-rendering: pixelated;
    border: 2px solid #33596a;
    border-radius: 6px;
    top: 0;
    align-self: flex-start;
    z-index:5;
    color: #33596a;
	font-size: .8em;
  }
  #footer {
	font-size: 0.7em;
  }
  
    
  /*navigation menu items*/
  .navbutton{
    display:inline-block;
	text-align: left;
	flex:1;
	font-size: 1.3em;
	font-family: Monospace;
	width: 100%;
	height: auto;
	letter-spacing: 0em;
	transition: 0.3s;
	background-color: rgba(0,0,0,0);
	margin-left: -1.9em;
	padding-left: 1.75em;
	padding-right: .2em;
   }
  .navbutton:hover{
	  border-bottom: 1px solid grey;
	  box-shadow: inset -0px -20px 10px -10px #8b14f9;
	  cursor: pointer;
	  letter-spacing: .05em;
	  
   }
  .navdeco{
    display:block;
   }
  #navmini{
    display:none;
   }
  ul.navmenu > li {float:none;}
   
  @keyframes textspread{
	  0% {letter-spacing: 0em;}
	  100% {letter-spacing: .2em;}
  }
   
  .sidebar-wrapper {
    font-size: 1em;
    margin-top: 5px;
    padding: 0px;
    text-align: left;
    line-height: 230%;
    border-width: 1px;
	border-style: solid;
	border-image: linear-gradient(
      to right, 
      transparent, purple, purple, purple, transparent
    ) 100% 1;
    font-family: Abel;
  }
   
  #profilepic{
    margin-right: 0.5vw;
    max-width: 150px;
  }
  #scrollbox{
    max-height:300px; 
    overflow-y:auto; 
    border: 2px solid #33596a;
    background-color: azure;
    margin-top: .5em;
    padding: .5em;
  }
  
  /*Scrollbar size adjustment*/
  ::-webkit-scrollbar{
   width: 10px;
  }
 
  /*Lightbox controls for desktop*/
  .gallery{
    height:150%;
  }
  .item{
    padding-top: 3%;
  }
  .pager {
  	position: absolute;
  	top: 45%;
    left:15vw;
    display:flex;
  	width: 70vw;
  	pointer-events:none;
  }
  .pager label{
    padding:8px;
    padding-bottom: 2vh;
    background:rgba(255,255,255,0);
    font-size: 3em;
	color: white;
    cursor: pointer;
    pointer-events:auto;
  }
  .pager label:hover{
	background:rgba(255,255,255,0.7); 
	color: black;
  }
  .imgcaption{
	margin:0 auto;
    text-align: left;
    padding: 1vmin;
    width: 45vw;
    max-width:700px;
    height:auto;
    max-height: 50vh;
    overflow-y:auto;
    color:white;
  }
  
  /*Image/Descript display order for portfolio*/
  .sc-top{
   flex-wrap:nowrap; 
  }
  .sc-text{
    order: 1;
  }
  .sc-sideimg{
    order: 2; 
    display:inline;
  }
  .thumb img{
    width: 100px;
    height: 100px;
  }
}

/*Special 1: Momo's page*/
@media only screen and (max-width: 1099px){
	.polaroid{display: none;}
	.polaroidsmall{
		display: inline;
		width: 1vw;
		}
	.notepaper{
		background-size: cover;
		background-repeat: no-repeat;
		transform: rotate(0deg);
		right: 0;
		margin:0;
		margin-bottom: 12vh;
		min-width: 9em;
		width: 100%;
	}
	.sticker{display: none;}
	.momo{display: none;}
	.tp-text {
      max-width: 100%;
      
    }
    .tp-header {
      flex-wrap: wrap;
	  display: block;
    }
}

@media only screen and (min-width: 1100px){
	.polaroid{
		display: block;
		width: 70%;
		}
	.polaroidsmall{display: none;}
	.notepaper{
		background-image: url('paper.png'); 
		background-size: cover; 
		background-repeat: no-repeat;
		width: 26em; height: 30em; 
		transform: rotate(5deg);
		margin-left:-10vw;
		margin-right: 2em;
		right: 5em;
	}
	.sticker{display: block;}
	.momo{display: block;}
	.tp-text{
	  max-width: auto;
	  min-width: 300px;
	} 
    .tp-header{
	  display: flex;
	  flex-wrap: nowrap;
    }
}

/*Special 2: Chat, updates and latest art*/
#statuscafe-username a{display: none;}
@media only screen and (max-width: 1099px){
  #chatandupdates{
	  display:block;
	  justify-content:space-around;
	  gap: .5em;
	  max-width: 100%;
	  flex:1;
  }
  .leftbox{
	  
  };
}
@media only screen and (min-width: 1100px){
	  #chatandupdates{
		  display:flex;
		  flex:1;
		  gap: .5em;	
	  }
	  .leftbox{
		  width: 1000px;
		  max-width: 400px;
	  };
}

/*Special 3: Damned Divider */
@media only screen and (max-width: 1035px){
	.divider{
	padding: 0;
	background-color: #ffb0a3;
	background-image: linear-gradient(rgb(38,71,171) 60%,rgb(38,177,239) 80%);
	background-size: cover;
	background-attachment: fixed;
	overflow-x: hidden;
	overflow-y: auto;
  }
  .divideroverlay{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(to right, #CB72FF 2px, transparent 2px), linear-gradient(to bottom, #CB72FF 2px, transparent 2px);
	background-size: 50px 50px;
	mix-blend-mode: color-dodge;
	animation: blueprintAnimation 500s linear infinite;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	overflow:hidden;
	background-attachment:fixed;
	max-height: 100px;
	min-height:100px; 
	z-index: 5; 
	height:100%;
	width:100%;
	}
 .dividerparallax{
	 position: relative;
	 top: -100px;
	 background-repeat: no-repeat;
	 background-attachment: fixed;
	 max-height: 100px;
	 height:100px;
	 min-height: 100px;
	 max-width:100%;
	 margin-bottom: -100px;
	 background-size: 100% auto;
 }
}
@media only screen and (min-width: 1036px){
  .divider{
	padding: 0;
	background-color: #ffb0a3;
	background-image: linear-gradient(rgb(38,71,171) 60%,rgb(38,177,239) 80%);
	background-size: cover;
	background-attachment: fixed;
	overflow-x: hidden;
	overflow-y: auto;
  }
  .divideroverlay{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(to right, #CB72FF 2px, transparent 2px), linear-gradient(to bottom, #CB72FF 2px, transparent 2px);
	background-size: 50px 50px;
	mix-blend-mode: color-dodge;
	animation: blueprintAnimation 500s linear infinite;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	overflow:hidden;
	background-attachment:fixed;
	max-height: 100px;
	min-height:100px; 
	z-index: 5; 
	height:100%;
	width:100%;
	}
 .dividerparallax{
	 position: relative;
	 top: -100px;
	 background-repeat: no-repeat;
	 background-attachment: fixed;
	 max-height: 100px;
	 height:100px;
	 min-height: 100px;
	 max-width:100%;
	 margin-bottom: -100px;
	 background-size: auto;
 }
 
}
.dvpower{
	 background-image: url('site graphics/powerlines.png');
	 background-position: bottom -20vh left -300px;
	 z-index: 1;
}
.dvstars{
	background-image: url('site graphics/stars.png');
	background-repeat: repeat;
	z-index: 0;
	mix-blend-mode: hard-light;
}
.dvperson{
	mix-blend-mode: multiply;
	z-index: 1;
	opacity: .8;
	filter: blur(2px);
	-webkit-filter: blur(2px);
}


/*Special 4: Cursed Intro Banner*/
@media only screen and (max-width: 799px){
	.introboxsidebanner{
		width: 18%; 
		height: 105%; 
		position: absolute; 
		right: 0;
		margin-right: 10px; 
		box-shadow: 0px 0px 10px grey, 0px 0px 5px white; 
		border: 1px solid white; 
		display: none; 
		padding: 5px;
		image-rendering: pixelated;
		}
	.introbox{
		border: 1px solid rosybrown; 
		margin-top: 0em; 
		width: 99.5%; 
		background-color: ivory; 
		box-shadow: -2px 2px 2px rosybrown;
	}
	.introtext{
		width: auto; 
		margin: .5em;
		height: 90%;
	}

}
@media only screen and (min-width: 800px){
	.introboxsidebanner{
		width: 18%; 
		height: 105%; 
		position: absolute; 
		right: 0;
		margin-right: 10px; 
		box-shadow: 0px 0px 10px grey, 0px 0px 5px white; 
		border: 1px solid white; 
		display: flex; 
		padding: 5px;
		image-rendering: pixelated;
	}
	.introbox{
		border: 1px solid rosybrown; 
		margin-top: 1em; 
		width: 99.5%; 
		background-color: ivory; 
		box-shadow: -2px 2px 2px rosybrown;
	}

}
@media only screen and (min-width: 800px) and (max-width: 1199px){
	.introtext{
		width: 72%; 
		margin: .5em; 
		height: 90%;
	}
}
@media only screen and (min-width: 1200px) and (max-width: 1400px){
	.introtext{
		width: 75%; 
		margin: .5em; 
		height: 90%;
	}
}
@media only screen and (min-width: 1401px){
	.introtext{
		width: auto; 
		margin: .5em; 
		margin-right:10em;
		height: 90%;
	}
}

/*Special 5: Art Organization*/
@media only screen and (max-width: 1200px){
	.artwrapper{
		max-height: auto; height: 100vh; display: flex; flex-direction: column; gap: 1em;
	}
	.imagegallery{
		max-width: 100%; margin-left: 0em; margin-top: 1em;
	}
	.doodlefeed{
		padding: 0; margin: 0; width: 98%; height: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; 
		background: linear-gradient(180deg, #5946b2 1.8em, #00b9be 1.8em, #61e1e4 24%, #00b9be 100%);
		border: 2px solid #4d3b3c;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
		box-shadow: 3px 3px #46425e, inset 0 -6px 1px #f47983;
		font-size:0.7em;
		color: #ffddca;
		font-family: Ubuntu Mono;
	}
	.doodleframe{
		width: 97%; height: 92%; margin: auto; margin-top: 0em; border: 2px solid #33596a;
	}
}
@media only screen and (min-width: 1201px){
	.artwrapper{
		max-height: 650px; height: 100vh; display: flex; flex-direction: row; gap: 1em;
	}
	.imagegallery{
		max-width: 60%; width: 60%; margin-left: 0em; margin-top: 1em;
	}
	.doodlefeed{
		padding: 0; margin: 0; margin-top: 1em; width: 40%; height: 95%; display: flex; justify-content: space-between; flex-wrap: wrap;
		background: linear-gradient(180deg, #5946b2 1.8em, purple 1em, #00b9be 1.8em, #61e1e4 24%, #00b9be 100%);
		border: 2px solid #4d3b3c;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
		box-shadow: 3px 3px #46425e, inset 0 -6px 1px #f47983;
		font-size:0.7em;
		color: #ffddca;
		font-family: Ubuntu Mono;
	}
	.doodleframe{
		width: 97%; height: 94%; margin: auto; margin-top: 0em; border: 2px solid #33596a;
	}
}


/* Common across all sizes */
  body {
   margin: .5em;
   padding: 0;
   background-color: #ffb0a3;
   font-family: monospace;
   font-size: 18px;
   line-height: 130%;
   background-image: linear-gradient(rgb(38,71,171) 60%,rgb(38,177,239) 80%);
   background-size: cover;
   background-attachment: fixed;
   overflow-x: hidden;
   overflow-y: auto;
   }
  body::before{
   content:" ";
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: linear-gradient(to right, #CB72FF 2px, transparent 2px), linear-gradient(to bottom, #CB72FF 2px, transparent 2px);
   background-size: 50px 50px;
   mix-blend-mode: color-dodge;
   animation: blueprintAnimation 500s linear infinite;
   z-index: -15;
   pointer-events: none;
   opacity: 0.5;
  }
  body::after{
	content:"";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.20) 33%);
	background-size: 100% 3px;
	z-index: 9999;
	animation: blueprintAnimation 500s linear infinite;
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
  }
  body a {
    color: #33596a;
    font-weight: bold;
    text-decoration: none;
    }
  body a:hover{
    color: white;
    text-shadow: 0 0 10px red;
  }
  @keyframes blueprintAnimation{
    0% {
        background-position:-200% -50%;
       }
  }
  @keyframes bob{
	0% {bottom: 0vh;}
	50% {bottom: .5vh;}
	100% {bottom: 0vh;}
  }
  bgelements{
	  position: absolute;
	  left:0; 
	  top: 0; 
	  z-index: -10; 
	  height: 100%; 
	  max-height: 100vh; 
	  width: 100%; 
	}
  .notepaper{
	  z-index: 10000; 
	  padding: .5em; 
	  display: inline-block;
	  background-image: url('site graphics/paper.png');
  }
 
  #content-container {
    background: linear-gradient(180deg, #5946b2 2.3em, #00b9be 2.3em, #61e1e4 24%, #00b9be 100%);
    border: 2px solid #4d3b3c;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 5px;
	padding-top: 0px;
    box-shadow: 3px 3px #46425e, inset 0 -6px 1px #f47983, 2px 2px 5px 3px white;
    color: #eee1c9;
	overflow: hidden;
	font-family: Ubuntu Mono;
  }
  #content-container a:after {
    /*content: "↗";*/
}
  #sidebar {
      background: linear-gradient(180deg, #61e1e4 54%, #00b9be 100%);
      border: 2px solid #33596a;
	  box-shadow: 0px 0px 5px 0px white;
      border-radius: 6px;
      z-index:5;
      color: #33596a;
	  font-family: Ubuntu Mono;
  }
  #sidebar a{
	  font-family: Ubuntu Mono;
  }
  
  #content-buttons{
    margin-top: .5em;
	padding-left: 2px;
    padding-right: 2px;
    float: right;
	z-index: 10;
	margin-left: 0em;
  }
  #header-contained {
    /*display: none;*/
    margin-bottom: 0px;
    margin-top: 10px;
    background-position: center center;
  }
  #titlebar{
	  min-width: 3em; 
	  max-width: 3em; 
	  max-height: 1em;
	  background-image: linear-gradient(#00b9be 0%, #46425e 10%, #00b9be 50%);
	  float: left;
	  margin-right: 1em;
	  border-left: 1px solid #fff6d3;
	  border-right: 1px solid #fff6d3;
	  border-bottom: 1px solid #fff6d3;
	  text-align: center;
	  padding-bottom: .75em;
	  font-size: 1em;
	  color: white;
  }
  .sticker{
	  max-width: 10vw;
	  max-height: 20vh;
	  background-size: contain;
	  background-repeat: no-repeat;
	  position: absolute;
	  z-index: 100000;
  }
  
  #chatborder{
	  border: 10px solid transparent;
	  border-image:url("site graphics/textbubble.png") 10 round;
  }
  
  .wrapper {
    font-size: 20px;
    padding: 15px;
    padding-top: 10px;
    background: #eee1c9;
    border: 2px solid #33596a;
    box-shadow: inset 0 3px #f47983;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    color: #473f2d;
    font-family: Nunito, Verdana;
  }
  .wrapper a {
    color: #bd6573;
    font-family: Do Hyeon, Verdana;
    letter-spacing: 0.8px;
  }
  .wrapper a:hover {
    color: #eb3b5a;
    text-shadow: 0 0 2px #ffeecc;
  }
  .footer-wrapper{
    padding: 5px;
  }
  .footer-wrapper::before{
	content: "browseresque 2.0 | 2021 - Present";
  }
  #footer {
	text-align: center;
    color: white;
    text-shadow: 0 0 10px #000;
    margin-bottom: 15px;
  }
  
  
  img {
    max-width:100%;
  }
   /*div to hold the image labels*/
  .container{
  	position:relative;
  	max-width:100%;
  	min-height:300px;
  	overflow:hidden;
  }
  .container input{
  	display:none;
  }
  .container nav{
  	min-width:100%;
  	min-height:50px;
  	background-color:#bd6573;
    margin-bottom: -15px;
    margin-left: -40px;
  }
  .container nav ul{
  	list-style-type:none;
  }
  .container nav ul li{
    text-align:center;
  	display:inline-block;
  	position:relative;
  	color:azure;
  	cursor:pointer;
  	user-select:none;
  	padding-right:5px;
  }
  .container nav ul li label{
  	cursor:pointer;
  	display:inline-block;
  	width:100%;
  	height:100%;
  	padding:5px;
  	font-family: Do Hyeon, Verdana;
  }
  .container .content{
  	width:500%; /*please increase this percentage by how many tab contents you have!*/
  	min-height:250px;
  	display:flex;
  	transition:0.1s;
  }
  .container .content .article{
  	width:100%;
  	height:100%;
  	padding:5px;
    margin-top: -20px;	
  }
  .container #r1:checked ~ .content{
  	margin-left:0%;
  }
  .container #r2:checked ~ .content{
  	margin-left:-100%;
  }
  .container #r3:checked ~ .content{
  	margin-left:-200%;
  }
  .container #r4:checked ~ .content{
  	margin-left:-300%;
  }
  .container #r5:checked ~ .content{
  	margin-left:-400%;
  }
  
  .container #r1:checked ~ nav ul li:first-of-type{
  	background-color:#ffb0a3;
  	color:#eb3b5a;
  }
  .container #r2:checked ~ nav ul li:nth-of-type(2){
  	background-color:#ffb0a3;
  	color:#eb3b5a;
  }
  .container #r3:checked ~ nav ul li:nth-of-type(3){
  	background-color:#ffb0a3;
  	color:#eb3b5a;
  }
  .container #r4:checked ~ nav ul li:nth-of-type(4){
  	background-color:#ffb0a3;
  	color:#eb3b5a;
  }
  .container #r5:checked ~ nav ul li:last-of-type{
  	background-color:#ffb0a3;
  	color:#eb3b5a;
  }*/
  
  /*thumbnail + gallery + carousel*/
  .thumb{
    display: flex;
  }
  .thumb label{
    flex: 1 1;
    cursor:pointer;
  }
  .thumb img{
    object-fit: cover;
    filter:grayscale(.7);
  }
  .thumb img:hover{
    filter:grayscale(0);
    box-shadow: 0px 0px 10px 0px red;
  }
  .gallery{
    position:fixed;
    left:0;
    bottom: -100vh;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.8);
    text-align:center;
    z-index: 7;
    overflow:hidden;
    transition: all 0.1s ease;
  	-moz-transition: all 0.1s ease;
  	-ms-transition: all 0.1s ease;
  	-o-transition: all 0.1s ease;
  	-webkit-transition: all 0.1s ease;
    
  }
  #tpimg1:checked ~ .gallery, #tpimg2:checked ~ .gallery, #tpimg3:checked ~ .gallery, #tpimg4:checked ~ .gallery, #tpimg5:checked ~ .gallery, #tpimg6:checked ~ .gallery{
    top: 0;
    bottom: 0;
  }
  #nmimg1:checked ~ .gallery, #nmimg2:checked ~ .gallery, #nmimg3:checked ~ .gallery, #nmimg4:checked ~ .gallery, #nmimg5:checked ~ .gallery{
    top: 0;
    bottom: 0;
  }
  #mrimg1:checked ~ .gallery, #mrimg2:checked ~ .gallery, #mrimg3:checked ~ .gallery, #mrimg4:checked ~ .gallery, #mrimg5:checked ~ .gallery, #mrimg6:checked ~ .gallery, #mrimg7:checked ~ .gallery, #mrimg8:checked ~ .gallery, #mrimg9:checked ~ .gallery, #mrimg10:checked ~ .gallery, #mrimg11:checked ~ .gallery, #mrimg12:checked ~ .gallery, #mrimg13:checked ~ .gallery, #mrimg14:checked ~ .gallery{
    top: 0;
    bottom: 0;
  }
  
  #art1:checked ~ .gallery, #art2:checked ~ .gallery, #art3:checked ~ .gallery, #art4:checked ~ .gallery, #art5:checked ~ .gallery, #art6:checked ~ .gallery, #art7:checked ~ .gallery, #art8:checked ~ .gallery, #art9:checked ~ .gallery, #art10:checked ~ .gallery, #art11:checked ~ .gallery, #art12:checked ~ .gallery{
    top: 0;
    bottom: 0;
  }
  .gallery h2, .gallery p{
    padding:8px 0;
    color:white;
    cursor: pointer;
    font-family: Do Hyeon, Verdana;
    font-weight: normal;
  }
  .gallery img{
    max-width:80vw;
    max-height:60vh;
    transition: all 0.3s ease;
  	-moz-transition: all 0.3s ease;
  	-ms-transition: all 0.3s ease;
  	-o-transition: all 0.3s ease;
  	-webkit-transition: all 0.3s ease;
  	cursor: pointer;
    
  }
  .item{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    
  }

  .pager label.prev{margin-right:auto}
  .pager label.next{margin-left:auto}
  #tpimg1:checked ~ .gallery #tpgal1{display:block}
  #tpimg2:checked ~ .gallery #tpgal2{display:block}
  #tpimg3:checked ~ .gallery #tpgal3{display:block}
  #tpimg4:checked ~ .gallery #tpgal4{display:block}
  #tpimg5:checked ~ .gallery #tpgal5{display:block}
  #tpimg6:checked ~ .gallery #tpgal6{display:block}
  
  #nmimg1:checked ~ .gallery #nmgal1{display:block}
  #nmimg2:checked ~ .gallery #nmgal2{display:block}
  #nmimg3:checked ~ .gallery #nmgal3{display:block}
  #nmimg4:checked ~ .gallery #nmgal4{display:block}
  #nmimg5:checked ~ .gallery #nmgal5{display:block}
  
  #mrimg1:checked ~ .gallery #mrgal1{display:block}
  #mrimg2:checked ~ .gallery #mrgal2{display:block}
  #mrimg3:checked ~ .gallery #mrgal3{display:block}
  #mrimg4:checked ~ .gallery #mrgal4{display:block}
  #mrimg5:checked ~ .gallery #mrgal5{display:block}
  #mrimg6:checked ~ .gallery #mrgal6{display:block}
  #mrimg7:checked ~ .gallery #mrgal7{display:block}
  #mrimg8:checked ~ .gallery #mrgal8{display:block}
  #mrimg9:checked ~ .gallery #mrgal9{display:block}
  #mrimg10:checked ~ .gallery #mrgal10{display:block}
  #mrimg11:checked ~ .gallery #mrgal11{display:block}
  #mrimg12:checked ~ .gallery #mrgal12{display:block}
  #mrimg13:checked ~ .gallery #mrgal13{display:block}
  #mrimg14:checked ~ .gallery #mrgal14{display:block}
  
  #art1:checked ~ .gallery #art1{display:block}
  #art2:checked ~ .gallery #art2{display:block}
  #art3:checked ~ .gallery #art3{display:block}
  #art4:checked ~ .gallery #art4{display:block}
  #art5:checked ~ .gallery #art5{display:block}
  #art6:checked ~ .gallery #art6{display:block}
  #art7:checked ~ .gallery #art7{display:block}
  #art8:checked ~ .gallery #art8{display:block}
  #art9:checked ~ .gallery #art9{display:block}
  #art10:checked ~ .gallery #art10{display:block}
  #art11:checked ~ .gallery #art11{display:block}
  #art12:checked ~ .gallery #art12{display:block}
  
   
   
  /* Scrollbar */
  ::-webkit-scrollbar-track{
   background: #33596a;
  }
  ::-webkit-scrollbar-thumb{
   background: #ffeecc;
   border: 2px solid #33596a;
  }
  ::-webkit-scrollbar-thumb:hover{
   background:#61e1e4;
  }
  
  /*The Bleeding Sun*/
  .dot {
    width: 90vh;
    padding-top: 90vh;
    background-color: red;
    border-radius: 50%;
    margin: auto;
    margin-top: 2em;
    display:block;
    box-shadow: 0 0 5px red;
	animation: shake 2.5s linear infinite;
  }
  @keyframes shake{
    5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
		filter: blur(0.018em);
		transform: translateY(0.018em) rotate(0deg);
		}
	20%, 60% {
		filter: blur(0.03em);
		transform: translate(-0.018em, 0.018em) rotate(0deg);
		}
	45%, 85% {
        filter: blur(0.03em);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }

    100% {
        filter: blur(0.007em);
        transform: translate(0) rotate(-0.5deg);
    }
  }
  @keyframes bob2{
	  50%{transform: translateY(1px);}
	  100%{transform: translateY(-1px);}
  }