@import url("./colors.css");

/*
	page settings
*/
body, html {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0;
	margin-top: 1vh;
	font-size: larger;
}

a {
	color: var(--dark-greenish);
}

html {
	background-color: #a1eb7f;
	background-image: linear-gradient(315deg, var(--greenish) 0%, var(--off-white) 100%);
	background-size: 25vh 25vh;
	background-repeat: round;
	background-position: 0px -10px;
}

/*
	Things everything needs
*/
* {
	font-weight: normal;
	box-sizing: border-box;
}

/*
	element styles
*/
h3 {
	color: gray;
	text-decoration: underline;
}

/*
	The display for the site on larger screens, like laptops
*/
@media (min-aspect-ratio: 1/1) {
	#content {
		width: 50%;
		margin: auto;
	}
}

/*
	The display for the site on smaller screens, like phones
*/
@media (max-aspect-ratio: 1/1) {
	#content {
		width: 90%;
		margin: auto;
		font-size: xx-large;
	}
}

/*
	General content display
*/
#content {
	padding: 16px;
	background-color: var(--white);
	filter: drop-shadow(4px 4px 4px black);
	border-radius: 4px;
}

/*
	the navigaion bar
*/
#navbar {
	margin-right: 4px;
	width: 100%;
	display: flex;
	border-bottom: 1px solid black;
	padding-bottom: 16px;
}
#navbar-other {
	flex: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: right;
}
#navbar-other > *::after {
	content: ";";
}
#navbar > a {
	flex: 1;
}
#navbar > div {
	flex: 2;
}

/*
	the basic page info
*/
#page {
	min-height: 256px;
}

/*
	the webring info
*/
#webring {
	box-sizing: border-box;
	padding: 0.5rem;
	width: 100%;
	margin-right: 4px;
	margin-top: 32px;
	display: flex;
	border: 1px solid black;
	align-items: center;
}
#webring > * {
	flex: 1;
}
#webring > div {
	display: flex;
	flex-direction: column;
}

/*
	bottom-most window
*/
#links {
	margin-top: 16px;
}

/*
	copyright notice
*/
#copyright > p {
	font-size: medium;
	font-style: italic;
}

/*
	load posts
*/
.post-date {
	font-style: italic;
	margin-top: 0px;
	padding-top: 0px;
	font-size: medium;
	text-align: center;
}
.post-title {
	margin-bottom: 0px;
	text-align: center;
}
.post-return {
	font-style: italic;
	font-size: medium;
}