.App {
	text-align: center
}

.App-logo {
	height: 40vmin;
	pointer-events: none
}

@media (prefers-reduced-motion: no-preference) {
	.App-logo {
		animation: App-logo-spin infinite 20s linear
	}
}

.App-header {
	background-color: #282c34;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: calc(10px + 2vmin);
	color: #fff
}

.App-link {
	color: #61dafb
}

@keyframes App-logo-spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.error-content, .error-details {
    align-items: center;
    display: flex;
}


.error-content {
    flex-grow: 1;
    justify-content: center;
    padding: 8vw;
    user-select: text;
}

.error-details {
    margin-bottom: 4rem;
}

.error-message {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 15px;
}

.error-code {
    color: #c5d2d9;
    font-size: 10vw;
    font-weight: 600;
    letter-spacing: -.4vw;
    line-height: .9em;
    margin: 0;
}

.error-description {
    border: none;
    color: #54666d;
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
}

.error-message a {
    font-size: 1.4rem;
    line-height: 1;
    margin: 8px 0;
}

.error-link {
    background-color: transparent;
    color: #5ba4e5;
    text-decoration: none;
    transition: background .3s,color .3s;
}

header.site-header{
	user-select: none;
}

a.theme-link{
	color: var(--theme-color);
}


.col-md{
	display:flex;
	flex-direction:column;
}
.kg-canvas-md{
	display: grid;
	grid-template-columns: [full-start] minmax(4vw,auto) [wide-start] minmax(auto,140px) [main-start] min(640px,calc(100% - 8vw)) [main-end] minmax(auto,140px) [wide-end] minmax(4vw,auto) [full-end];
}
.kg-canvas-md>* {
	grid-column: main-start/main-end;
}
@media (min-width: 992px) {
	.kg-canvas-md{
		display:block;
	}
	.col-md{
		flex-direction: row;
	}
	.col-md *{
		flex:1;
	}
}

.dropdown-container{
	position:relative;

}
.dropdown-menu{
	/* bg-white dark:bg-gray-900 border rounded-lg border-gray-150 dark:border-gray-800 */
	--background-color: #f2f2f2;
	--border-color: #e6e6e6;
	position:absolute;
	right:0;
	display:none;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	min-width:150px;
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 0.5em;
	margin-top:1em;
	min-height:10px;
	z-index:10;
}
.dropdown-menu.open{
	display:flex;
}
.theme-dark .dropdown-menu{
	--background-color:#1f2128;
	--border-color: #555;
}
@media (prefers-color-scheme: dark){
	html:not(.theme-light) .dropdown-menu{
		--background-color:#1f2128;
		--border-color: #555;
	}
}

.dropdown-menu-item{
	display:block;
	width:100%;
	padding: 0.25em 1em;
	/* padding */
	/* hover */
}

.github-corner svg{fill:var(--primary-text-color);color:var(--white-color);}
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}
@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
@media (max-width:500px){
	.github-corner:hover .octo-arm{animation:none}
	.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}
}

.spinner{
	width:2rem;
	height:2rem;
	animation: spin 1s linear infinite;
	color: var(--light-gray-color);
	fill: var(--theme-color);
}

.loader{
	width:2rem;
	height:2rem;
	color: var(--light-gray-color);
	fill: var(--theme-color);
}
  
@keyframes spin{
	100%{
		transform: rotate(1turn);
	}
}

.blog-post{
	margin-bottom:2em;
}
.blog-header{
	display:flex;
	gap:2em;
}
.blog-title{
	font-weight:bold;
	font-size:1.2em;
}
.blog-date, .blog-estimate{
	opacity:0.75;
}
.blog-author{
	opacity:0.5;
}