/*
  The CSS in this style tag is based off of Bear Blog's default CSS.
  https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
  License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
 */

#blog-layout {
	all: unset;
	--accent: #2337ff;
	--accent-dark: #000d8a;
	--black: 15, 18, 25;
	--gray: 96, 115, 159;
	--gray-light: 229, 233, 240;
	--gray-dark: 34, 41, 57;
	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
	--box-shadow:
		0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
		0 16px 32px rgba(var(--gray), 33%);

	body {
		font-family: "Atkinson Hyperlegible", sans-serif;
		margin: 0;
		padding: 0;
		text-align: left;
		background: linear-gradient(var(--gray-gradient)) no-repeat;
		background-size: 100% 600px;
		word-wrap: break-word;
		overflow-wrap: break-word;
		color: rgb(var(--gray-dark));
		font-size: 20px;
		line-height: 1.7;
	}

	main {
		width: 960px;
		max-width: calc(100% - 2em);
		margin: auto;
		padding: 3em 1em;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0 0 0.5rem 0;
		color: rgb(var(--black));
		line-height: 1.2;
	}

	h1 {
		font-size: 3.052em;
	}

	h2 {
		font-size: 2.441em;
	}

	h3 {
		font-size: 1.953em;
	}

	h4 {
		font-size: 1.563em;
	}

	h5 {
		font-size: 1.25em;
	}

	strong,
	b {
		font-weight: 700;
	}

	a {
		color: var(--accent);
	}

	a:hover {
		color: var(--accent);
	}

	p {
		margin-bottom: 1em;
	}

	.prose p {
		margin-bottom: 2em;
	}

	textarea {
		width: 100%;
		font-size: 16px;
	}

	input {
		font-size: 16px;
	}

	table {
		width: 100%;
	}

	img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
	}

	blockquote {
		border-left: 4px solid var(--accent);
		padding: 0 0 0 20px;
		margin: 0px;
		font-size: 1.333em;
	}

	hr {
		border: none;
		border-top: 1px solid rgb(var(--gray-light));
	}

	@media (max-width: 720px) {
		body {
			font-size: 18px;
		}

		main {
			padding: 1em;
		}
	}

	footer {
		padding: 2em 1em 6em 1em;
		background: linear-gradient(var(--gray-gradient)) no-repeat;
		color: rgb(var(--gray));
		text-align: center;
	}

	.social-links {
		display: flex;
		justify-content: center;
		gap: 1em;
		margin-top: 1em;
	}

	.social-links a {
		text-decoration: none;
		color: rgb(var(--gray));
	}

	.social-links a:hover {
		color: rgb(var(--gray-dark));
	}

	.sr-only {
		border: 0;
		padding: 0;
		margin: 0;
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
		/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
		clip: rect(1px 1px 1px 1px);
		/* modern browsers, clip-path works inwards from each corner */
		clip-path: inset(50%);
		/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
		white-space: nowrap;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	ul li {
		width: calc(50% - 1rem);
	}

	ul li * {
		text-decoration: none;
		transition: 0.2s ease;
	}

	ul li:first-child {
		width: 100%;
		margin-bottom: 1rem;
		text-align: center;
	}

	ul li:first-child img {
		width: 100%;
	}

	ul li:first-child .title {
		font-size: 2.369rem;
	}

	ul li img {
		margin-bottom: 0.5rem;
		border-radius: 12px;
	}

	ul li a {
		display: block;
	}

	.title {
		margin: 0;
		color: rgb(var(--black));
		font: bold;
		font-weight: bold;
		line-height: 1;
		display: inline;
	}

	.date {
		margin: 0;
		color: rgb(var(--gray));
		font: normal;
		line-height: normal;
		display: inline;
	}

	.description {
		margin: 0;
		color: rgb(var(--black));
		width: 720px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	ul li a:hover span,
	ul li a:hover .date {
		color: rgb(var(--accent));
	}

	ul a:hover img {
		box-shadow: var(--box-shadow);
	}
	.navigation {
		display: flex;
		justify-content: center;
		gap: 20px;
		height: 60px;
		align-items: center;
		background-color: hsl(0, 0%, 95%);
		padding: 10px 20px;
		box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.2);
	}

	.navigation .title {
		font-size: xx-large;
		color: black;
		text-decoration: none;
		position: absolute;
		left: 20px;
	}

	.navigation .title a {
		font-weight: bold;
	}

	.navigation .mini-nav {
		display: hidden;
		visibility: hidden;
	}

	.navigation .mini-nav button {
		background-color: hsl(0, 0%, 95%);
		color: back;
		font-size: larger;
		font-weight: 500;
		border: none;
		padding: 10px 15px;
		cursor: pointer;
		display: hidden;
		visibility: hidden;
	}

	.navigation .mini-nav a {
		display: block;
		padding: 10px 15px;
		text-decoration: none;
		color: black;
	}

	.navigation .mini-nav-content {
		display: none;
		position: absolute;
		background-color: hsl(0, 0%, 90%);
		min-width: 160px;
		box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.8);
	}

	.navigation .mini-nav:hover .mini-nav-content {
		display: block;
	}

	.navigation .mini-nav:hover button {
		background-color: hsl(0, 0%, 80%);
	}

	.navigation .avatar {
		font-size: large;
		font-weight: 500;
		color: black;
		text-decoration: none;
		position: absolute;
		right: 20px;
		top: 10px;
	}

	.navigation a {
		font-size: larger;
		font-weight: 500;
		text-decoration: none;
		color: black;
		padding: 10px 15px;
	}

	.navigation a:hover {
		background-color: hsl(0, 0%, 90%);
	}

	.navigation .dropdown {
		display: inline-block;
	}

	.navigation .dropdown button {
		background-color: hsl(0, 0%, 95%);
		color: back;
		font-size: larger;
		font-weight: 500;
		border: none;
		padding: 10px 15px;
		cursor: pointer;
	}

	.navigation .dropdown a {
		display: block;
		padding: 10px 15px;
		text-decoration: none;
		color: black;
	}

	.navigation .dropdown-content {
		display: none;
		position: absolute;
		background-color: hsl(0, 0%, 90%);
		min-width: 160px;
		box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.8);
	}

	.navigation .dropdown:hover .dropdown-content {
		display: block;
	}

	.navigation .dropdown:hover button {
		background-color: hsl(0, 0%, 80%);
	}

	@media (max-width: 720px) {
		.navigation .mini-nav {
			display: inline-block;
			visibility: visible;
		}
		.navigation .mini-nav button {
			display: inline-block;
			visibility: visible;
		}
		.navigation .links {
			display: none;
		}
		.navigation .title {
			position: absolute;
			padding-left: 0;
			left: -2rem;
			scale: 0.5;
		}
		.navigation .avatar {
			position: absolute;
			padding-right: -4rem;
			right: 0;
			scale: 0.8;
		}
	}

	@media (max-width: 400px) {
		.navigation {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: auto;
		}
		.navigation .title {
			display: flex;
			position: relative;
			justify-self: center;
		}
		.navigation .mini-nav {
			display: flex;
			position: relative;
		}
		.navigation .mini-nav button {
			display: flex;
			position: relative;
		}
		.navigation .avatar {
			display: flex;
			position: relative;
			justify-self: center;
		}
	}

	@media (max-width: 720px) {
		ul {
			gap: 0.5em;
		}

		ul li {
			width: 100%;
			text-align: center;
		}

		ul li:first-child {
			margin-bottom: 0;
		}

		ul li:first-child .title {
			font-size: 1.563em;
		}

		ul li:first-child .description {
			width: 100%;
		}
	}
}
