/* ELEMENTS -------------------------------------------------- */	
	
	body {
	margin:0px;
	width:100vw;
	background-color:var(--bg);
	color:var(--text);
	background-image:url('/img/bg.png');
	}
	
	h1 {
	font-family:Sylfaen, serif;
	padding:5px;
	margin:0px;
	background:linear-gradient(90deg, var(--div) 0%, var(--main) 90%);
	}
	
	h1::before {
	content:"›› ";
	}
	
	h3 {
	font-family:Gaegu, sans-serif;
	font-size:26px;
	margin:0px;
	}
		
	p {
	font-family:Corbel, sans-serif;
	text-align:justify;
	font-size:18px;
	line-height:1.15
	}
	
	a {
	color:var(--text);
	}
	
	a:hover {
	text-decoration-style:wavy;
	color:var(--ahover);
	}
	
	details summary {
	cursor:pointer;
	font-size:18px;
	list-style:none;
	padding:5px;
	}
	
	details summary::after {
	content: " ◿";
	}
	
	details p {
	padding-left:10px;
	font-family:Comfortaa, sans-serif;
	font-size:15px;
	margin:5px;
	text-align:left;
	}
	
	details p::before {
	content: "★ ";
	}
	
	details[open] summary {
	background-color:var(--light);
	padding-bottom:5px;
	}


	.star a::before {
	content: "★ ";
	}

	
	em {
	color:var(--bold);
	}
	
	.gaegu {
	color:var(--bold);
	font-family:Gaegu, sans-serif;
	font-size:20px
	}	
	
	/* CUSTOM -------------------------------------------------- */
	
	.offsetdiv {
	background:linear-gradient(90deg, var(--main) 0%, var(--div) 50%, var(--main) 100%);
	height:5px;
	width:100%;
	}
	
	.offsetdivthin {
	background-color:var(--div);
	height:2px;
	width:100%;
	}

	.tiny {
	font-size:14px;
	font-family:Gaegu, sans-serif;
	text-align:center;
	margin-top:-15px
	}

	.pad {
	padding:5px;
	}	

	.contain {
	max-width:90%;
	max-height:90%;
	}

	.blackbar {
	margin:20px;
	border-left:10px solid var(--dark);
	}

	.quote {
	border-left:5px solid var(--light); 
	margin-left:10px; 
	padding-left:10px
	}

	.quote2 {
	border-left:5px solid var(--offset); 
	margin-left:10px; 
	padding-left:10px
	}

/* LAYOUT -------------------------------------------------- */	
    
	/* SIDEBAR -------------------------------------------------- */	
    
    .wrapper {
    display:flex;
    flex-direction:row;
    max-width:1200px;
	}
    
    .homesidebar {
    max-width:150px;
    width:150px;
    min-height:100vh;
    background-color:var(--main);
    border-right:1px solid var(--light);
    padding:10px;
    margin-left:-30px;
    border-left:2px solid black;
    box-shadow: -2px 5px 5px #00000050
	}
	
	.sidebardeco {
	width:225px;
	display:flex;
	flex-direction:column;
	justify-content:end;
	}
	
	.sidebardeco img {
	width:225px;
	height:500px;
	z-index:999;
	filter:drop-shadow(-5px -5px 5px #00000050)
	}
	
	#sideheader {
	width:150px;
	height:150px;
	filter:drop-shadow(3px 3px 3px #00000050);
	}
	
	.sidep {
	font-family:Comfortaa, sans-serif;
	font-weight:bold;
	}
	
	.sidep a {
	padding:5px;
	}
	
	.sidep a:hover {
	background-color:var(--light);
	}
	
	.sidefooter {
	text-align:center;
	margin-top:10px;
	}

	#imood {
	padding:3px; 
	background-color:var(--div); 
	margin-top:3px
	}
	
	/* CONTENT -------------------------------------------------- */
	
	.homemain {
	background-color:var(--main);
	padding:20px;
	border-right:1px solid black;
	box-shadow: 5px 5px 5px #00000050
	}
	
	.buttonp img:hover {
	filter:drop-shadow(0px 3px 1px var(--offset));
	}	
	
	/* TOOLTIPS -------------------------------------------------- */
	
	.tooltiptext {
	  visibility: hidden; /* Hidden by default */
	  font-family:Comfortaa, sans-serif;
	  width: 150px;
	  background-color: var(--dark);
	  color: #ffffff;
	  text-align: center;
	  padding: 5px 0;
	  border-radius: 6px;
	  position: absolute;
	  z-index: 1; /* Ensure tooltip is displayed above content */
	  margin-left:15px;
	  font-size:15px
	}		

	.tooltip:hover .tooltiptext {
	  visibility: visible;
	}
	
	.tooltiptext::after {
	  content: " ";
	  position: absolute;
	  top: 50%;
	  right: 100%; /* To the left of the tooltip */
	  margin-top: -5px;
	  border-width: 5px;
	  border-style: solid;
	  border-color: transparent var(--dark) transparent transparent;
	}

/* THEME -------------------------------------------------- */	

#theme_switcher {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap:5px;
  margin-top: -10px;
}

#theme_switcher button {
    border:1px solid var(--dark);
    width:25px;
    border-radius:50%;
    height:25px;
    cursor: pointer;
}

.defaultStyle {background-color:#cb1561;}
.htmlStyle {background-color:#EEE}
.yellowStyle {background-color:#FFBC4C;}
.coralStyle {background-color:#FF8888;}
.reverseStyle {background-color:#34272D;}

/* MEDIA QUERIES -------------------------------------------------- */	

@media (max-width: 1000px) {
  .sidebardeco {
	display:none;
	}

  .homesidebar {
	margin-left:0px;
}

  .homemain {
	min-width:250px;
	}

  .p {
	text-align:left;
	}

}