@import url('https://fonts.googleapis.com/css2?family=Libertinus+Mono&family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* Main styling */
body {
    margin: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	font-family: Libertinus Serif;
	background-image: url("./images/bg.png");
	background-attachment: fixed;
}
main, footer, header { padding: 0 2% 0 2%; }
main { background-color: #fff; }
footer { background-color: #ccc; }
main, footer { margin: 0 5% 0 5%; width: 90%; }
main { box-shadow: 0 0 20px #000; }

main a, footer a { color: #be1f77; }
main a:hover, footer a:hover { color: #bf8e1f; }

code, pre { font-family: Libertinus Mono; }
p, li { max-width: 90ch; }

/* Header */
header {
	background-color: #000;
	color: #fff;
    margin: 0;
    width: 98%;
}
header a { color: #ff1998; }
header a:hover { color: #ffe900; }
#top-header { text-align: center; width: 100%; padding: 1% 0 1% 0; }
#main-pages {
	margin: 0;
	text-align: center;
	background-color: #be1f77;
	color: #ffffff;
	font-size: large;
}
#main-pages a {
	color: #fff;
	display: inline-block;
	background-color: #be1f77;
	padding: 0.5%;
}
#main-pages a:hover {
	transform: scale(1.1);
	background-color: #ff1998;
	box-shadow: 0 0 10px #000;
}

/* Blog stuff */
.posts-div { background-color: #cfcfcf; padding: 1%; }
details {
    background-color: #fff;
    box-shadow: 0 0 10px #000;
    padding: 5px;
    margin: 10px 0 10px 0;
}


/* Miscellaneous */
.flag { border: 2px solid #555; }
.shrink-img { width: 50%; }

/* Info boxes (originally for Bakhroshungz, can be used wherever though)
   and blog tags */
.warn {
    background-color: lavenderblush;
    border: solid 5px lightcoral;
}
.warn-light, .blog {
    background-color: ivory;
    border: solid 5px khaki;
}
.info, .update {
    background-color: azure;
    border: solid 5px lightblue;
}
.warn, .warn-light, .info { padding: 1%; max-width: 80ch; }
.tag {
	font-size: small;
	margin: 0;
	display: inline-block;
	width: fit-content;
	border-width: 3px;
}

/* Mobile */
@media screen and (max-width: 768px) { .shrink-img { width: 100%; } }