@import url('normalize.css');

/* ELEMENTS */
* { box-sizing: border-box; }

:root {
	--accent: #e621bb;
	--textcolor: #ddd;
	--boxbg: hsla(310, 50%, 10%, 0.7);
	--boxbg2: hsla(310, 50%, 16%, 0.7);
}

body {
	background-color: #000;
	background-image: url('/images/backgrounds/stars.gif');
	font-family: sans-serif;
	font-size: 87.5%;
	line-height: 1.3;
	color: var(--textcolor);
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	max-width: 100%;
}

a {
	color: var(--accent);
	text-decoration: none;
	font-weight: bold;
}
a:hover { color: var(--textcolor); }

h1,h2,h3,h4 {
	color: var(--accent);
	margin-top: 0;
	margin-bottom: 10px;
}

h1 { font-size: 20px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p:first-child {
	margin-top: 0;
}

p {
	margin-top: 10px;
	margin-bottom: 10px;
}

p:last-child {
	margin-bottom: 0;
}

.hr {
	border-bottom: 1px solid var(--accent);
	overflow: auto;
	height: 0;
	margin-top: 10px;
	margin-bottom:10px;
}

/* PARTS */

.center { text-align: center; }
.overflow { overflow: auto; }
.margin { margin-bottom: 10px; }

.box {
	background-color: var(--boxbg);
	border: 1px solid var(--accent);
	border-radius: 5px;
	padding: 10px;
	overflow: auto;
}

#sidebar nav {
	margin-bottom: -5px;
}

#sidebar nav a {
	background-image: url('/images/icons/arrow.png');
	background-repeat: no-repeat;
	padding-left: 20px;
}

.imglist-split {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.imglist-split .imglist {
	width: 48%;
}

.imglist {
	display: flex;
	flex-direction: column;
}

.imglist img {
	width: 16px;
	height: 16px;
	vertical-align: top;
}

.imglist a {
	padding: 2px 0;
	line-height: 1.25;
}

a.button {
	padding: 5px 7px;
	background: var(--accent);
	border: 1px solid var(--accent);
	color: var(--text);
	border-radius: 5px;
	transition: 0.15s;
	display: inline-block;
}

a.button:hover {
	background: var(--boxbg);
	transition: 0.15s;
}

/* SECTIONS */

header {
	background: url('/images/backgrounds/fire.gif');
	padding: 0 !important;
}
	header .box:first-child {
		border-bottom: 0px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
	header img {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		display: block;
		width: 600px;
	}

#navbar {
	text-align:center;
	background-color: var(--boxbg2);
	text-align: center;
	margin: 0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
	#navbar a {
		margin: 8px 0;
		padding: 8px;
	}

#sidebar { /* old browsers */
	float: left;
	width: 170px;
	padding-right: 10px;
}

main {
	width: 620px;
}

#footer {
	margin-top: 10px;
}
	#footer img {
		width: 88px;
		height: 31px;
		display: block;
		margin: auto;
	}

.article img {
	max-width: 100px;
	margin-right: 10px;
}

/* Desktop only */
@media only screen and (min-width:800px) {
	.nodesktop { display: none !important; }

	body {
		width: 800px;
	}

	body:not(.nosidebar) {
		display: grid;
		grid-template-areas: 'header header' 'navbar navbar' 'side content' 'footer footer';
		grid-template-columns: 170px 620px;
	}
	
	header { 
		grid-area: header;
	}
	
	#navbar {
		grid-area: navbar;
	}
	
	#sidebar { 
		grid-area: side;
		margin: 0;
		float: inherit;
	}
	
	#sidebar .box {
		height: 100%;
	}
	
	main { 
		grid-area: content;
	}

	body.nosidebar main {
		width: 100%;
	}
	
	#footer {
		grid-area: footer;
	}
}

/* Mobile only */
@media only screen and (max-width:799px) {
	.nomobile { display: none !important; }
	
	body {
		width: 95vw;
	}
	
	#sidebar {
		display: none;
		padding: 0;
	}
	
	main {
		width: 100%;
	}
}

#colors div {
	font-size: 16px;
	padding: 10px;
}

/*linear-gradient(to bottom right, #FF4283 0%, #FFFF43 20%, #43FF59 40%, #44CAFF 60%, #713DFF 80%, #D043FF 100%)*/

.grid {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
}

.grid .pic {
	background-image: linear-gradient(to bottom right, #FF4283 0%, #FFFF43 20%, #43FF59 40%, #44CAFF 60%, #713DFF 80%, #D043FF 100%);
	border-radius: 5px;
}

.grid a {
	color: #fff;
	padding: 8px;
	display: block;
	text-align: center;
		text-shadow: 1px 1px 2px rgb(0 0 0 / 60%);
	font-size: 14px;
}

.grid a:hover {
	text-decoration: underline;
}

.grid img {
	width: 100%;
	height: 150px;
	display: block;
	object-fit: cover;
	height: inherit;
	border-radius: 5px 5px 0 0;
	transition: 0.05s;
}

#showmore, #showmorebtn {
	user-select: none;
}

#showmore, #more { display: none; }
#showmore:checked~#more { display: grid; }

.button {
	cursor: pointer;
	display: block;
	text-align: center;
	padding: 8px 0;
	/*border-radius: 5px;
	font-size: 16px;*/
}

/*#showmore+#showmorebtn,.button {
	background: var(--accent); color: #fff; transition: 0.2s;
}

#showmore+#showmorebtn:hover,.button {
	background: var(--accent); color: #000; transition: 0.2s;
}*/

#showmore:checked+#showmorebtn {
	display: none;
}

@media only screen and (max-width:969px) {
	body {
		border: 0;
	}
	
	.grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width:970px) {
	.grid img:hover {
		background-image: linear-gradient(to bottom right, #FF4283 0%, #FFFF43 20%, #43FF59 40%, #44CAFF 60%, #713DFF 80%, #D043FF 100%);
		transform: scale(1.2);
		animation: rainbowglow 0.65s infinite;
		border-radius: 5px;
		transition: 0.15s;
	}
}

.damnfuck {
	height: 150px;
	width: 150px;
	float: right;
	margin-bottom: 10px;
	animation: wobble .2s linear infinite alternate;
}

@keyframes wobble {
	0% { transform: rotate(-1.2deg); }
	100% { transform: rotate(1.2deg); }
}