@import url('lunchtype.css');


body{
	--bg-color: #ffffff; 
	--content-color: #e5e5e5;
	--accent-color: #ff053e; 
	--accent2-color: #ff337e;
	--indent-color: #f2f2f2;
	--text-color: #c42146;
	
	margin: 0;
	background-color: var(--bg-color);
	background-image: url("../media/images/backgroundLight.gif");
	background-size: cover;
	image-rendering: pixelated;
}
@media (prefers-color-scheme: dark) { 
	body { 
		--bg-color: #020007;
		--content-color: #0d0c1c;
		--accent-color: #00fa45;  
		--accent2-color: #28ffa0;
		--indent-color: #130e24;
		--text-color: #00fa45; 
		--visited-text-color: #00face;

		margin: 0;
		background-color: var(--bg-color);
		background-image: url("../media/images/backgroundDark.gif");
		background-size: cover;
		} 
	}

/* Fonts */
html{
	background-color: var(--bg-color);
	color: white;
	font-size: 14px;
	font-family: "Lunchtype", sans-serif;
}

h1{font-family: "Lunchtype Expanded", sans-serif;}

a {color: var(--text-color);}

a:visited {color: var(--visited-text-color);}

.spoilered {
	background-color: var(--text-color);
	transition-duration: .15s;
}
.spoilered:hover{
	background-color: #00000000;
	color: var(--accent-color);
}

.loud{
	animation: bigHueRotate .5s linear 0s infinite alternate; 
	border-style: dashed;
}

/* Animations */
@keyframes hueRotate{
  0% {filter: hue-rotate(-2deg);}
  100% {filter: hue-rotate(10deg);}
  }
  
@keyframes bigHueRotate{
	0% {filter: hue-rotate(-20deg);}
	100% {filter: hue-rotate(20deg);}
  }
  
@keyframes erect{
	0% {transform: scale(1.0);}
	25% {transform: scale(1.1);}
	50% {transform: scale(0.95);}
	75& {transform: scale(1.05);}
	100% {transform: scale(1.0);}
}

/* Screen Wide Elements */

.wrapper{
	display: grid;
	height: 100vh;
	grid-template-columns: 15.625% 79.175% 5.2%;
}

.error-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 80vh;
}

/* Center Elements */

.center {
	margin: 0px 0px;
}

.center-content {
	display: grid;
	grid-template-columns: 1fr 3fr;
	color: var(--text-color);
	background-color: var(--content-color);
	padding: 10px 25px;
	border-radius: 0px 0px 15px 15px;
	height: 78vh;
	overflow-y: scroll;
	
	/* From https://css.glass */
	background: var(--content-color);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(7.1px);
	-webkit-backdrop-filter: blur(7.1px);
	
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.center-content::-webkit-scrollbar {
	display: none;
	box-sizing: border-box;
}

.hazard-stripes {
	background: repeating-linear-gradient(-45deg, var(--accent-color), var(--accent-color) 20px, var(--indent-color) 20px, var(--indent-color) 40px);
	animation: hueRotate 8s ease 0s infinite alternate;
	height: 50px;
	border-radius: 15px 15px 0px 0px;
}

.error-content {
	color: var(--text-color);
	background-color: var(--content-color);
	padding: 10px 25px;
	border-style: dashed;
	border-radius: 15px;
	animation: hueRotate 8s ease 0s infinite alternate;
	
	height: 30vh;
	width: 30vw;
	
	transform: rotate(10deg);
}

#confirm {
	background-color: var(--content-color);
	
	padding: 24px;
	border-style: solid;
	border-radius: 10px;
	
	/*margin: 0;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 12%);*/
	display: flex;
	justify-content: center;
	
	font-family: "Lunchtype Expanded", sans-serif;
	font-size: 24px;
	
	animation: bigHueRotate 8s ease 0s infinite alternate;
	transition-duration: .1s;
}
#confirm:hover{
	background-color: var(--accent-color);
	color: var(--content-color);
	transition-duration: 0s;
	animation: hueRotate 4s ease 0s infinite alternate;
}
#confirm:active{
	background-color: var(--indent-color);
}

/* Leftside Element */

.leftside {
	margin-left: 50px;

	/*display: grid;
	grid-template-columns: 1fr;*/
}

.leftside-content {
	background-color: var(--accent-color);
	
	animation: hueRotate 8s ease 0s infinite alternate;
	
	margin: 0px 33%;
	width: 20px;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
}

.leftside-button{
	background-color: var(--accent-color);
	height: 55px;
	width: 55px;
	border-radius: 50%;
	margin-left: -17.5px;
	margin-top: 150%;

	display: flex;
	justify-content: start;
	align-items: center;
	image-rendering: pixelated;
	
	transform: translateX(1px);
}
.leftside-button:hover{animation: erect .25s ease 0s 1 normal;}

.label{
	margin-left: 1.5vw;
	
	font-size:20px;
	font-family:"Lunchtype Condensed", sans-serif;
	
	color:var(--bg-color);
	background-color:var(--accent-color);
	
	padding:4px;
	border-radius: 5px;
}

#index-icon{
	content: url('../media/images/icon6_light.png')
}
@media (prefers-color-scheme: dark) { 
	#index-icon{
		content: url('../media/images/icon6_dark.png')
	}
}

#home-icon{
	content: url('../media/images/icon2_light.png')
}
@media (prefers-color-scheme: dark) { 
	#home-icon{
		content: url('../media/images/icon2_dark.png')
	}
}

#blog-icon{
	content: url('../media/images/icon5_light.png')
}
@media (prefers-color-scheme: dark) { 
	#blog-icon{
		content: url('../media/images/icon5_dark.png')
	}
}

#nsfw-icon{
	content: url('../media/images/icon7_light.png')
}
@media (prefers-color-scheme: dark) { 
	#nsfw-icon{
		content: url('../media/images/icon7_dark.png')
	}
}

#slowchat-icon{
	content: url('../media/images/icon8_light.png')
}
@media (prefers-color-scheme: dark) { 
	#slowchat-icon{
		content: url('../media/images/icon8_dark.png')
	}
}

#gallery-icon{
	content: url('../media/images/icon9_light.png')
}
@media (prefers-color-scheme: dark) { 
	#gallery-icon{
		content: url('../media/images/icon9_dark.png')
	}
}

#settings-icon{
	content: url('../media/images/icon4_light.png')
}
@media (prefers-color-scheme: dark) { 
	#settings-icon{
		content: url('../media/images/icon4_dark.png')
	}
}
	
/* Boxes */

.box1 {
	margin-bottom: 3vh;
	padding: 10px 25px;
	width: 300px;
	background-color: var(--indent-color);
	color: var(--accent-color);
	text-align: justify;
	
	overflow-y: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.blogbox {
	margin-bottom: 3vh;
	padding: 10px 25px;
	background-color: var(--indent-color);
	
	font-size: 16px;
	
	overflow-y: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.postbox {
	padding: 1ch 1ch;
	margin-top: 1.2vh;
	background-color: var(--indent-color);
	border-radius: 10px;
	border-style: solid;
	border-color: var(--accent-color);
	border-width: 2.5px;
	
	color: var(--accent-color);
	color: var(--accent-color);
	
	animation: hueRotate 8s ease 0s infinite alternate;
	transition-duration: .1s;
	
	display: flex;
	align-items: center;
}
.postbox:hover{background-color: var(--accent-color);color: var(--indent-color);}

/* Embelishments */

.font-cycle{
	margin: 0px 5px;
}