html {
	font-family: 'Consolas';
	width: 100%;
	line-height: 1.15;
}
body {
	width: 100%;
	margin: 0;
	background: url(img/misskey.io_a0s5ei1h7sr902ac_a0s5db3lh3pj002h.webp);
	background-repeat: no-repeat;
	background-size: calc(768px + 10vh);
	background-position: -126px -20%;
}
@media (max-width: 1169px) {
	body {
		background-position: 50% -33%;
		background-size: 100vh;
	}
}
img {
	display: block;
	width: 100%;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}
.wrapper {
	/* top: 0;
	left: 0;
	right: 0;
	bottom: 0; */
	overflow: visible;
	text-align: center;
	max-width: 768px;
	height: fit-content;
	margin: auto;
	margin-bottom: 1rem;
	&.title {
		pointer-events: none;
		margin-top: 2rem;
		
		color: midnightblue;
		& > div {
			margin: auto;
			padding: 1rem 2rem;
			width: fit-content;
			background: #e9e6e2;
			box-shadow: 8px 8px #4d4d5579;
			border-radius: 4px;
			& > * {margin: 0;}
		}
	}
	&.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
		padding: 0 .5rem;
		& a {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: x-large;
			text-decoration: none;
			padding: 1rem 0;
			background: #f9cdcd;
			box-shadow: 8px 8px #4d4d5579;
			border-radius: 4px;
			
			color: #a96f6f;
			&:hover {
				color: #f59090;
				font-weight: bold;
				background: #fde4eb;
			}
		}
	}
	&.text {
    padding: .5rem;
	}
}
@media (min-width: 1170px) {
	main > .wrapper {
		margin-left: 40vw;
	}
}
@media (min-width: 1660px) {
	main > .wrapper {
		margin-left: 700px;
	}
}
@media (max-width: 1169px) {
	.wrapper.text {
		background: #ffffffd9;
	}
}
.main-content {
	overflow: hidden;
	background: #e9d0af;
	box-shadow: 8px 8px #4d4d55;

	&a {
		color: #715957;
		&:hover {
			color: blueviolet;
		}
	}
}