:root {
	--white: #e6edf0;
	--white-alt: #9dabb0;
	--yellow: #dcde81;
	--yellow-alt: #808037;
	--green: #4fd15a;
	--green-alt: #519c57;
	--blue: #366199;
	--blue-alt: #244266;
	--black: #14171d;

	--font: 'CourierNew-Patched', Courier, monospace;
	--header-font: 'FontStuck-Extended-Patched', monospace;

	--inner-gap: 16px;
	--outer-gap: 16px;

	--outer-radius: 8px;
	--inner-radius: 3px;

	--border-width: 5px;
	--border-color: #ccc;

	--cursor: url("https://f.freya.cat/spacehey/cursor/cursor_green.png");
	--hover-cursor: url("https://f.freya.cat/spacehey/cursor/cursor_red.png");
}

@font-face {
	font-family: "FontStuck-Extended";
	font-display: swap;
	src: url("https://f.freya.cat/spacehey/font/FontStuck-Extended.woff2") format("woff2"),
		url("https://f.freya.cat/spacehey/font/FontStuck-Extended.ttf") format("truetype");
}

@font-face {
	font-family: "CourierNew";
	font-display: swap;
	src: url("https://f.freya.cat/spacehey/font/CourierNew.woff2") format("woff2"),
		url("https://f.freya.cat/spacehey/font/CourierNew.ttf") format("truetype");
}

@font-face {
	font-family: "FontStuck-Extended-Patched";
	font-display: swap;
	src: url("https://f.freya.cat/spacehey/font/FontStuck-Extended-Patched.woff2") format("woff2"),
		url("https://f.freya.cat/spacehey/font/FontStuck-Extended-Patched.ttf") format("truetype");
}

@font-face {
	font-family: "CourierNew-Patched";
	font-display: swap;
	src: url("https://f.freya.cat/spacehey/font/CourierNew-Patched.woff2") format("woff2"),
		url("https://f.freya.cat/spacehey/font/CourierNew-patched.ttf") format("truetype");
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes moveVriska {
	0% {
		left: 100%;
	}
	100% {
		left: -12rem;
	}
}

img:hover {
	animation: shake 0.5s linear infinite;
}

img.dont-animate:hover {
	animation: none !important;
}

@media (prefers-reduced-motion) {
	img:hover {
		animation: none !important;
	}
	#vriskaTalking {
		display: none !important;
	}
}

* {
	box-sizing: border-box;
}


/**
 * Text
 */

span.count {
	color: var(--yellow);
}

h1 {
	font-family: var(--header-font);
	color: var(--white) !important;
	font-size: 4rem;
	line-height: 4rem;
	margin: 1rem 0 !important;
}

h2 {
	font-family: var(--header-font);
	color: var(--white) !important;
	font-size: 2.5rem;
	line-height: 2.5rem;
	margin: 1rem 0 !important;
}

h3 {
	font-family: var(--header-font);
	color: var(--white) !important;
	font-size: 1.8rem;
	line-height: 1.8rem;
	margin: 0.25rem 0 !important;
}

h4,
h5,
.details-table td p {
	font-family: var(--header-font);
	color: var(--white) !important;
	font-size: 1.5rem;
	line-height: 1.5rem;
	margin: 0.25rem 0 !important;
}

a,
a:visited,
button,
.logout-btn {
	color: var(--yellow) !important;
	text-decoration: underline !important;
	cursor: var(--hover-cursor), pointer;
}

button,
.logout-btn {
	font-family: var(--font);
}

a:hover,
button:hover,
.logout-btn:hover {
	color: var(--yellow-alt) !important;
	text-decoration: underline !important;
	cursor: var(--hover-cursor), pointer;
}

/**
 * Main Parts
 */

html {
	width: 100%;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--white);
	font-family: var(--font);
	font-size: 120%;
	padding: var(--inner-gap);
	min-height: 100%;
	background:
		url("https://f.freya.cat/spacehey/img/background.jpg")
			bottom left/cover no-repeat fixed,
		#181818;
	cursor: var(--cursor), default;
}

body,
p {
	font-size: 1.2rem !important;
	color: var(--white) !important;
}

main .container {
	width: 60rem !important;
	max-width: 100%;
}

/**
 * Nav Main Footer
 */

nav,
main,
footer {
	padding: 0;
	width: 100%;
	max-width: 80rem;
}

nav,
footer {
	margin-bottom: var(--outer-gap);
	border-radius: var(--outer-radius) !important;
	background: var(--black);
}

main {
	display: flex;
	flex-direction: row;
	background: transparent;
}

footer {
	margin-top: 0;
	padding: var(--inner-gap);
}

/**
 * Links
 */

.links {
	background: var(--black) !important;
	border-radius: 0 0 var(--inner-radius) var(--inner-radius);
	color: var(--white);
}

.links a {
	font-size: 1.2rem !important;
	font-family: var(--font) !important;;
}

.links li::after {
	content: '';
	background: url("https://f.freya.cat/spacehey/img/bee.png");
	display: inline-block;
	height: 11px;
	width: 11px;
	margin-left: 5px;
	background-size: 100%;
}

.links li:last-child::after {
	display: none;
}

/**
 * Main Layout
 */

main .col {
	width: 50% !important;
	padding: 0;
	margin: 0;
	display: table-cell;
}

main .left {
	padding-right: var(--outer-gap);
}

@media (max-width: 800px) {
	main .col {
		display: block;
		width: 100% !important;
	}

	main .left {
		padding-right: 0;
	}
}

/**
 * Name
 */

main .left > *:first-child {
	display: block;
}

main .left > *:first-child h1 {
	text-align: center;
	line-height: 4rem;
	font-size: 4rem;
	color: var(--yellow) !important;
	padding-bottom: 0.75rem;
}

/**
 * Section Blocks
 */

main .col > * {
	color: var(--white) !important;
	margin: 0;
	margin-bottom: var(--outer-gap);
	border-radius: var(--outer-radius);
	background: var(--black);
}

nav,
footer,
main .col > * {
	border: 5px solid #ccc !important;
}

nav .top,
.heading {
	border-radius: var(--inner-radius) var(--inner-radius) 0 0;
	background: linear-gradient(var(--blue), var(--black)) !important;
}

.left > p.edit-link,
.general-about,
.mood,
.url-info,
.blog-preview,
.blurbs .inner,
.friends .inner,
.comments .inner {
	padding: var(--inner-gap) !important;
}

.heading {
	color: var(--white);
	background: var(--blue);
}

.online {
	font-family: var(--header-font);
	font-size: 1.5rem;
}

.online img {
	height: 1.5rem;
}

.contact img {
	content: url("https://f.freya.cat/spacehey/img/light.png");
}

#vriskaTalking {
	position: fixed;
	bottom: -0.5rem;
	height: 15rem;
	width: 12rem;
	left: 100%;
	animation: moveVriska 20s linear infinite;
}

#vriskaTalking:hover {
	opacity: 0.33;
	transition: opacity 0.3s ease;
}

/**
 * Main Element Styling
 */

main table {
	width: 100%;
}

main table td {
	padding: 0.5rem;
	font-family: var(--header-font);
	font-size: 1.5rem;
	line-height: 1.5rem;
}

main table td {
	background: var(--blue) !important;
}

main table tr:last-child td:first-child {
	border-radius: 0 0 0 var(--inner-radius);
}

main table tr:last-child td:last-child {
	border-radius: 0 0 var(--outer-radius) 0;
}

main table td:nth-child(2) {
	background: var(--blue-alt) !important;
}

main .buttons img,
main .buttons a {
	height: 31px;
}