@import url("vars.css");
@import url("header_style.css");
@import url("nav_style.css");
@import url("settings_box_style.css");
@import url("lightbox_style.css");

/* main flexbox that stores everything */
#main-layout {
	align-items: start;
	/* add margin to the left and right of the main container 
	  TODO: Make this adaptive so that margin value changes on mobile/pc*/
	gap: 10px;
	min-width: min(100vw, 500px);
	max-width: max(700px, 70vw);
	margin: 2px auto 2px;
	top: 0;
}
/* sidebar on the right */
#sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.standard-box {
	width: auto;
	transition: var(--ease-trans);
	background-color: var(--translucent-black);
	border: var(--border-width) double var(--accent-purple);
	justify-content: start;
	overflow: hidden;
	font-family: TelegramaRaw;
	line-height: 1.3;
	font-variant-ligatures: none;
	color: white;
	padding: 1rem;
}

.standard-box h2 { 
	font-size: 1.5rem;
	font-family: GAUBlock;
	text-decoration: underline;
}


.standard-box p { 
	text-indent: 1rem;
	line-height: 1.5rem;
	padding: 0em 0.5em;
	font-size: 1rem;
}

.standard-box a {
	color: var(--accent-lilac);
}

/* visitor count */

#visitor-count {
	font-size: 2em;
	font-weight: bold;
	text-decoration: underline;
}

/* changelog */

#changelog li {
	margin-left: -2.5em;
	list-style: none;
	list-style-type: none;
}

/* heading of textbox */

.box-head {
	transition: var(--ease-trans);
	font-family: GAUBlock;
	text-align: center;
	border: var(--border-width) double white;
	border-bottom: 2px double white;
	padding: 1px;
	margin: calc((var(--border-width) * -1) - 1rem);
	margin-bottom: calc((var(--border-width) * -1) + 2em);
	background: url('../images/heading_space.png');
}

.box-head h2 {
	font-size: 1.33rem;
	padding: 0rem;
	text-decoration: underline;
	color: white;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

hr {
	color: white;
	height: 2px;
}
/* make textbox glow when hovered over */ 

.animatable-box:hover {
	transition: var(--ease-trans);
 	box-shadow:
		0 0 8px #FFFFFF,
		0 0 14px #8B44FF,
		0 0 20px #874FB8;
	background-color: var(--hover-color);
 }

.animatable-box:hover .box-head {
	transition: var(--ease-trans);
	filter: brightness(1.5);
 }

/* class for anything with a black outline around it */
.outlined {
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

/* changelog-list */ 

#changelog-list {
	max-height: 225px;
	overflow-y: scroll;
	scrollbar-color: var(--accent-purple) var(--accent-purple);
	scrollbar-width: thin;
}

.border-img {
	border: 6px double white;
	max-width: 100%;
	max-height: 450px;
	margin: 4px 16px;
}
/* media queries for responsive design */
/* regular text box */
	@media (width >= 800px) {
		#main-layout {
			display: grid;
			grid-template-columns: 8fr 3fr;
			min-width: 700px;
		}
	} 
	@media (width < 800px) {
		#main-layout {
			display: flex;
			flex-direction: column;
			align-content: center;
			width: 100vw;
		}

		#main-layout > * {
			max-width: 100%;
			box-sizing: border-box;
		}

		body {
			margin: 2px 0px;
		}
	}