* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Times New Roman', Times, serif;
	color: white;
	-webkit-user-drag: none;
}
body, html {
	background-color: black;
	background-image:
	url("../img/background/city.jpeg"),
	linear-gradient(transparent, rgb(0,0,44) 70%),
	url("../img/background/star1.png"),
	linear-gradient(rgba(0,0,0,0.5) 70%),
	url("../img/background/star2.png"),
	linear-gradient(black);
	background-attachment: fixed;
	background-position-y: bottom, top, top, top, top;
	background-repeat: repeat-x, no-repeat, repeat, no-repeat, repeat;
	background-size: auto 30%, auto, auto 50%, auto, auto 50%;
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	animation: backAnim 60s linear infinite;
	font-size: 16px;
}
@keyframes backAnim {
	0% {
		background-position-x: 0px, ;
	}
	100% {
		background-position-x: calc(100vh * 0.3 / 414 * 736 * 8), 0px, calc(100vh * 0.5 / 300 * 400 * 2), 0px, calc(100vh * 0.5 / 300 * 400);
	}
}
header {
    user-select: none;
    font-size: 10rem;
	text-shadow: -0.125rem -0.125rem 0px cyan, 0.125rem 0.125rem 0px blue;
	margin: 1rem;
	margin-top: 2rem;
}
footer {
    border-top: 3px double cyan;
}
main {
	width: 1200px;
	max-width: 100%;
	display: grid;
	gap: 1rem;
	margin: 1rem;
}
nav, section, aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	word-wrap: break-word;
	min-width: 0;
}
footer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: -1px -1px 0px white, 1px 1px 0px blue, 1px -1px 0px blue, -1px 1px 0px blue, 0px 0px 0.5rem blue, inset 0px 0px 1rem blue;
	background-color: black;
	width: 100%;
}
.layoutBox {
	border: 3px double cyan;
	box-shadow: -1px -1px 0px white, 1px 1px 0px blue, 1px -1px 0px blue, -1px 1px 0px blue, 0px 0px 0.5rem blue, inset 0px 0px 1rem blue;
	background-color: black;
	border-radius: 0.25rem;
}
h1 {
	box-shadow: inset 0px 0px 0.25rem cyan, 0px 1px 0px blue, inset 0px -1px 0px white;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid cyan;
	font-size: 1.25rem;
	text-align: center;
	text-shadow: 0px 1px 0px blue;
	background-image: linear-gradient(to bottom, rgba(0,0,255,0.2), rgba(0,255,255,0.2));
	width: 100%;
	color: cyan;
	user-select: none;
}
h2 {
    margin: 1rem;
    margin-bottom: 0rem;
	text-shadow: 0px 1px 0px red;
	line-height: 1.5rem;
	font-size: 1.25rem;
	color: yellow;
	text-decoration: underline;
	font-style: italic;
}
u {
    text-shadow: 0px 1px 0px red;
	color: yellow;
}
p {
	margin: 0.5rem 1rem 1rem;
	text-shadow: 0px 1px 0px blue;
	line-height: 1.5rem;
	font-size: 1rem;
}
a {
	text-decoration: none;
}
p a {
    color: cyan;
    text-decoration: underline;
}
.navigation {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin: 0.5rem
}
.navigation div {
	border: 1px solid blue;
	box-shadow: 1px 1px 0px cyan, -1px -1px 0px white, 1px -1px 0px cyan, -1px 1px 0px white;
	text-align: center;
	border-radius: 0.25rem;
	user-select: none;
}
.navigation div:hover {
	border-color: yellow;
	box-shadow: inset 0px 0px 0.5rem yellow, 1px 1px 0px red, -1px -1px 0px white, 1px -1px 0px red, -1px 1px 0px white;
	cursor: pointer;
}
.navigation div:hover p {
	color: yellow;
	text-shadow: 0px 1px 0px red;
}
.navigation div p {
	margin: 0.5rem;
	font-size: 1.125rem;
}

@media (max-width: 768px) {
	main {grid-template-columns: 1fr !important;}
	html, body {font-size: 14px;}
	.layoutBox {
	    border-left: none;
	    border-right: none;
	    border-radius: 0px;
	}
	header{
	    font-size: 14vw;
	    text-shadow: -0.05rem -0.05rem 0px cyan, 0.05rem 0.05rem 0px blue;
	}
}
::-webkit-scrollbar {width: 15px;}
::-webkit-scrollbar-track {
    border: 1px solid cyan;
    box-shadow: inset 0px 0px 0.25rem cyan;
}
::-webkit-scrollbar-thumb {
    border: 1px solid cyan;
    box-shadow: inset 0px 0px 0.5rem blue;
}
::-webkit-scrollbar-thumb:hover {box-shadow: inset 0px 0px 0.5rem cyan;}
::-webkit-scrollbar-thumb:active {box-shadow: inset 0px 0px 1rem cyan;}

#followerWall {
    margin: 1rem 0.5rem;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, 88px);
    align-items: center;
    justify-content: center;
}
#followerWall a {
    height: 31px;
    width: 88px;
}
.nonButton, #followerWall img {
    box-shadow: 1px 1px 0px blue, -1px -1px 0px white, 1px -1px 0px blue, -1px 1px 0px white;
}
.nonButton {
    border: 1px solid cyan;
    height: 31px;
    width: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0px 1px 0px blue;
}

#statuscafe {
    margin: 1rem;
    font-size: 1.125rem;
}
#statuscafe-username, #statuscafe-username a {
    font-weight: bold;
    text-decoration: none;
    color: yellow;
    text-shadow: 0px 1px 0px red;
    margin-bottom: 0.25rem;
}
#statuscafe-username a {
    text-decoration: underline;
}
#statuscafe-content {
    text-shadow: 0px 1px 0px blue;
}