@font-face {
	font-family: yg;
	src: url(font/Inter-VariableFont_slnt-wght.woff2);
}

@font-face {
	font-family: yg-emoji-bw;
	src: url(font/NotoEmoji-Regular.woff2);
}

:root {
    --color-fg: #eaf8bf;
    --color-fg-alt: #eca400;
    --color-fg-accent: pink;
    --color-bg: #27476e;
    --color-bg-alt: #001d4a;
    --color-bg-accent: #006992;
    --color-highlight: #eca400;	--transition: 400ms ease-in-out;
	--transition-fast: 200ms ease-in-out;
	--spacing: 0.2cm;
	--radius: 0.5cm;
	--white: #fff;
	--gray: #333333;
	--lightg: #eeeeee;
	--message-gap: calc(4 * (var(--spacing)));
}

* {
	font-family: 'yg', sans-serif;
	border-color: transparent;
	transition: var(--transition-fast);
	scroll-behavior: smooth;
	max-width: 100%;
	box-sizing: border-box;
}

.bw-emoji {
	font-family: yg-emoji-bw;
}

body {
	margin: 0;
	display: flex;
	flex-flow: column;
	height: 100vh;
}

main,
header,
footer {
	min-height: 1cm;
	padding: var(--spacing);
}

header {
	background-color: var(--color-bg-alt);
	color: var(--color-fg);
	flex: 0 0 auto;
	z-index: 1;
	position: sticky;
	top: 0
}

video {
	aspect-ratio: auto 16 / 9;
	width: 100%;
	margin: auto;
	display: block;
	margin-top: 40px;
	border-radius: 5px;
	z-index: 5;
}

header>ul>li {
	text-align: center;
}

header>ul>li:first-child+li {
	flex-basis: 5cm;
	margin: var(--spacing) 0;
}

footer {
	background-color: var(--color-bg-alt);
	color: var(--color-fg-alt);
	flex: 0 0 auto;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-flow: column;
	padding: 0;
	min-height: var(--spacing);
}

footer select {
	margin-left: var(--spacing);
}

footer section {
	padding: 0;
	margin: var(--spacing);
	min-height: 1cm;
}

footer section.install {
	flex: 1 1 100%;
}

footer section.install button {
	background-color: var(--color-bg);
}

.landing {
	display: block;
	min-height: 100%;
	overflow-y: scroll;
}

.fakeHeader {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%),
		url(/images/banner-landing.jpg);
	height: 550px;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: -33px;
}

.landing .fakeHeader h1 {
	transform: translate(84%, 100%);
	text-shadow: 2px 2px 2px var(--color-bg-alt);
	width: 50%;
	font-size: 50px;
	color: var(--white);
}

h1 span::before {
	content: '';
	width: 33%;
	background-image: linear-gradient(#fff, transparent);
	display: block;
	height: 1px;
	margin: 15px 0;
}

.bg-gray {
	background-color: var(--color-fg);
	color: var(--color-bg-alt);
	text-align: center;
	height: auto;
}

.bg-gray>.constrain {
	padding: 40px;
}

.dive {
	padding-top: 30px;
}

.bg-lightgray {
	height: auto;
	background-color: var(--color-fg);
	margin-top: -200px;
}

.thirds.images {
	padding: 250px 0 50px 0;
}

.thirds.images>div>img {
	border-radius: 5px;
	height: 50%;
}

.thirds {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.thirds>* {
	width: 31%;
	border-radius: 5px;
	padding: 0 0 15px 0;
}

.thirds>div {
	height: 100%;
}

.thirds.text>div {
	background-color: var(--color-bg-alt);
}

.thirds.text>div>p {
	padding: 0 25px;
}

.testimonial {
	font-size: 24px;
	padding: 50px;
	height: auto;
}

.stars {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.dive p {
	margin-bottom: 40px;
}

.dive .butn {
	padding: 20px 60px;
}

.constrain {
	width: 1100px;
	margin: auto;
	text-align: center;
}

.requestNotify {
	padding: var(--spacing);
	width: 100%;
	background-color: var(--color-fg-alt);
	color: var(--color-bg-alt);
}

main {
	background-color: var(--color-bg-alt);
	color: var(--color-fg);
	flex: 1 1 auto;
	display: flex;
	padding: 0;
	flex-flow: column wrap;
}

main nav {
	display: flex;
	flex-flow: row wrap;
	background-color: var(--color-bg-alt);
	text-align: center;
	padding: 0.4cm;
	width: 100%;
	position: sticky;
	bottom: 0
}

main nav * {
	flex: auto;
}

main nav a.linkButton span {
	display: inline-block;
}

main nav a.linkButton:hover {
	background-color: var(--color-fg-alt);
}

main nav a.linkButton.active {
	background-color: var(--color-bg);
}

main nav a.linkButton span svg {
	height: 100%;
}

main section:nth-of-type(3) input[type='file'] {
	display: none;
}

h2 {
	font-weight: 500;
	font-size: 24px;
}

hr {
	border-bottom: 1px solid var(--color-bg-accent);
	margin: 0.75cm auto;
}

.pane {
	flex: 1 1 auto;
	display: flex;
	min-width: 20%;
	overflow-y: auto;
}

.pane:first-child {
	flex: 1 1 8cm;
	flex-flow: column;
}

.pane:first-child section {
	margin: 0.5cm;
	background-color: var(--color-bg-accent);
	border-radius: 12px;
}

.pane:first-child+.pane {
	flex: 1 1 65%;
}

.pane.greeting {
	flex: 1 1 auto;
	border: none;
	max-width: unset;
	align-items: center;
}

.pane.greeting p {
	max-width: 80%;
	margin: 0.5cm auto;
}

.greeting .left {
	border: 1px solid black;
	background-color: var(--color-fg);
	color: var(--color-bg);
	margin: 0.5cm auto;
	width: 80%;
	border-radius: 5px;
}

.pane:nth-child(2) section {
	display: flex;
	flex-flow: column;
	padding: 0 var(--spacing);
}

.pane:nth-child(2) section>ul {
	flex: 0;
	margin: 0 calc(var(--spacing) * -1);
	padding: 0 var(--spacing);
	display: block;
}

.pane:nth-child(2) section>ul li:first-child+li {
	color: var(--color-fg-alt);
	font-size: 14px;
}

*::-webkit-scrollbar {
	width: 0.25cm;
	height: 0.25cm;
}

*::-webkit-scrollbar-thumb {
	background: var(--color-fg-alt);
	border-radius: var(--radius);
}

section {
	padding: var(--spacing);
	flex: 1;
	overflow: auto;
}

section.feedView {
	display: flex;
	flex-direction: column;
}

section.feedView .banner {
	background-color: var(--color-bg-alt);
	padding: var(--spacing);
	margin: var(--spacing) 0;
	border-radius: var(--radius);
}

.pane:first-child section:first-child {
	border-top: 0;
}

.icon {
	font-family: 'Noto Color Emoji', sans-serif;
	font-size: 200%;
	vertical-align: middle;
	margin: 0.2em;
	max-width: min-content;
}

.logo {
	height: 42px;
	width: 42px;
	opacity: 0.8;
	vertical-align: middle;
}

header>ul>li:first-child a {
	text-decoration: none;
}

header>ul>li:first-child a::after {
	color: var(--color-fg);
	font-weight: bold;
	font-size: 18px;
}

header a.linkButton {
	font-size: 13px;
	font-weight: 600;
}

p .logo {
	width: 3cm;
	height: 3cm;
}

ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul li {
	flex: 1;
	width: calc(100% - var(--spacing));
}

button {
	background-color: var(--color-bg-alt);
	color: var(--color-fg-alt);
	border: none;
	border-radius: var(--radius);
	font-size: 110%;
	font-weight: bold;
	padding: 0.4cm;
	margin: 0.5cm auto;
	transition: var(--transition-fast);
}

button:hover,
button:focus {
	background-color: var(--color-fg-alt);
	color: var(--color-bg-alt);
}

.btn {
	background-color: var(--color-bg-alt);
	color: var(--color-fg-alt);
	border: none;
	border-radius: var(--radius);
	font-size: 110%;
	font-weight: bold;
	padding: 0.4cm;
	margin: 0.5cm auto;
	transition: var(--transition-fast);
}

.btn:hover,
.btn:focus {
	background-color: var(--color-fg-alt);
	color: var(--color-bg-alt);
}

@keyframes fadeAway {
	40% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		height: 0;
		overflow: hidden;
	}
}

@keyframes fade {
	to {
		opacity: 0;
	}
}

.spinner {
	animation: fade 2s ease-in-out infinite;
	margin: auto;
	position: relative;
	transition: unset;
}

.spinner svg.logo {
	opacity: 0.8;
	height: 3cm;
	width: 3cm;
}

a.linkButton {
	color: var(--color-fg-alt);
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-fast);
}

a.linkButton:hover,
a.linkButton:focus {
	color: var(--color-fg);
	text-decoration: underline;
}

form {
	display: flex;
	flex-flow: column;
	margin: 0 auto;
}

form label {
	flex: 1;
	display: flex;
	flex-flow: column;
	align-items: center;
	margin: calc(var(--spacing) * 2) auto;
}

form label * {
	flex: 1;
}

form label span {
	flex: 0;
}

input[readonly] {
	opacity: 0.5;
}

input[maxlength='2'] {
	width: 2.75em;
}

input,
select,
textarea,
form.message {
	background-color: var(--color-bg-accent);
	color: var(--color-fg);
	border-radius: var(--radius);
	padding: var(--spacing);
}

@-webkit-keyframes flasher {

	0%,
	49% {
		background-color: var(--color-bg);
		animation-iteration-count: 3;
	}

	50%,
	100% {
		background-color: var(--color-bg-accent);

	}
}

form.message div:first-of-type:not(div > div),
.editMsg {
	background-color: var(--color-bg);
	color: var(--color-fg);
	border-radius: var(--radius);
	padding: 0.3cm;
	-webkit-animation: flasher 500ms infinite;
	/* Safari 4+ */
	-moz-animation: flasher 500ms infinite;
	/* Fx 5+ */
	-o-animation: flasher 500ms infinite;
	/* Opera 12+ */
	animation: flasher 500ms infinite;
	/* IE 10+, Fx 29+ */
	-webkit-animation-iteration-count: 3;
	-moz-animation-iteration-count: 3;
	-o-animation-iteration-count: 3;
	animation-iteration-count: 3;
}

form.message div:first-of-type:not(div > div):focus,
.editMsg:focus {
	-webkit-animation: none;
	/* Safari 4+ */
	-moz-animation: none;
	/* Fx 5+ */
	-o-animation: none;
	/* Opera 12+ */
	animation: none;
}

form.message input.messageText {
	z-index: -1;
	height: 1px;
	padding: 0;
	word-break: break-word;
}

form.message fieldset label div {
	word-break: break-word;
}

.content {
	word-break: break-word;
}

input::placeholder,
select::placeholder {
	color: var(--color-fg);
	opacity: 50%;
}

input[type='checkbox'] {
	flex: none;
	width: 2em;
	height: 2em;
	accent-color: var(--color-fg-alt);
}

table.permissions tr:first-child th {
	transform: rotate(225deg);
	writing-mode: vertical-lr;
}

input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover,
form.message:focus,
form.message:hover {
	background-color: var(--color-bg-accent);
}

footer select {
	outline: none;
	padding: calc(var(--spacing) / 2);
}

form.message fieldset label {
	flex-basis: 100%;
}

form.message fieldset input,
form.message fieldset textarea {
	width: 100%;
	background-color: var(--color-bg);
}

.action {
	flex: 0 1 0;
	font-size: 150%;
}

.primary {
	flex-grow: 2;
}

.soft a.linkButton {
	color: unset;
	display: inline-block;
	padding: var(--spacing);
	border-radius: var(--radius);
	cursor: pointer;
	user-select: none;
	margin-right: 1em;
}

.soft a.linkButton:hover,
.soft a.linkButton:focus {
	background-color: var(--color-fg-alt);
	text-decoration: none;
}

.soft a.linkButton.active {
	background-color: var(--color-bg-alt);
	color: var(--color-fg-alt);
	text-decoration: none;
}

.groups {
	flex-flow: column;
}

.groups .groups {
	margin-left: calc(2 * var(--spacing));
}

.balanced {
	text-align: center;
}

.separated {
	margin: 0.5cm;
}

fieldset,
.group {
	margin: auto;
	padding: 0;
	border: 0;
	display: flex;
	flex-flow: row wrap;
}

.group {
	width: 100%;
}

fieldset:disabled,
button:disabled,
button[aria-disabled="true"] {
	opacity: 0.2;
}

form.longForm {
	margin: 0;
}

form.longForm fieldset {
	flex-flow: column;
	align-items: center;
	width: 100%;
}

form.longForm fieldset ul {
	width: 100%;
}

form.longForm fieldset ul li {
	display: contents;
}

form.message {
	max-width: unset;
	padding: 0;
	margin: 0.5cm auto;
}

form.message fieldset,
form.message fieldset *,
.editMsg form fieldset * {
	margin: 0;
}

form.message label {
	flex-flow: row;
	flex: 1;
}

form.message label span {
	flex: 0 1 auto;
}

form.message button {
	flex: 1;
	background-color: unset;
	font-size: unset;
	padding: 0 0.25cm;
	box-shadow: none;
	border: none;
	width: 38px;
	margin: var(--spacing);
}

form.message button:hover,
form.message button:focus {
	background-color: var(--color-bg-alt);
	color: var(--color-fg-alt);
}

form.message input {
	border: 0;
}

form.message input:hover,
form.message input:focus {
	border: 0;
	background-color: var(--color-bg);
}

form.message input[type='file'] {
	display: none;
}

form.message * {
	outline: none;
}

.separated form.message {
	margin: auto;
}

.message {
	margin-bottom: var(--message-gap);
	background-color: var(--color-bg);
	border-radius: var(--radius);
	padding: var(--spacing);
}

.message.consecutive {
	margin-top: calc(-1 * var(--message-gap));
}

.message a {
	color: var(--color-fg-alt);
}

.message>.info {
	font-size: 80%;
	margin: 0 0 var(--radius) 0;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.message .info span {
	margin: 0 var(--radius) 0 0;
}

.message .info .person {
	font-weight: bold;
	font-size: 120%;
}

.message .info .timestamp {
	color: var(--color-fg-alt);
}

.reported .content,
.reported .attachment {
	filter: blur(var(--radius));
}

.reported .message {
	opacity: 0;
	visibility: hidden;
}

.reported .report {
	background-color: var(--color-bg-alt);
}

.interThread {
	background-color: var(--color-bg-alt);
	margin: var(--message-gap) 0;
	padding: var(--spacing);
	border-radius: var(--radius);
	text-align: center;
}

.interThread img {
	margin: var(--spacing);
}

.thread {
	background-color: var(--color-bg-alt);
	margin: var(--radius) auto;
	/* padding: var(--spacing); */
	border-radius: var(--radius);
	width: 100%;
}

.thread.completed {
	animation: fadeAway 1s ease-in-out forwards;
}

.message .info.soft,
.thread .soft,
.content,
form.message {
	margin: var(--spacing) 0;
	width: 100%;
}

.message .info.soft {
	flex: 1;
	display: flex;
	flex-flow: column wrap;
}

.feedWrapper {
	overflow: auto;
	display: flex;
	flex: 1;
	flex-flow: column-reverse;
}

/* div[contenteditable=true] { white-space: pre-line; } */

.feed {
	display: flex;
	flex-flow: column;
	flex: 1;
	min-width: 90%;
}

.threads {
	flex: 1;
	overflow: auto;
}

.people {
	flex-flow: column;
	align-items: start;
}

.person {
	flex: 1;
}

.person a.linkButton {
	display: block;
}

.person .name {
	font-weight: bold;
	display: block;
}

.person .lastSeen,
.person .memberid {
	display: block;
	font-size: 80%;
}

.person ul li:nth-child(2) {
	flex: 4;
}

.groupInfo {
	flex-flow: column wrap;
}

.groupInfo li:first-child {
	flex-grow: 2;
}

fieldset label+span.status {
	margin-top: calc(var(--spacing) * -2);
	margin-bottom: calc(var(--spacing) * 2);
}

.ok {
	color: var(--color-fg-alt);
}

.error {
	color: var(--color-fg);
}

.errorContainer {
	margin: calc(var(--spacing) * 2);
}

.united {
	display: flex;
	flex-flow: row;
}

.united input {
	border-right-width: 0;
	border-left-width: 0;
	border-radius: 0;
	margin: 0;
}

.united input:first-child {
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
	border-left-width: 2px;
	width: 10em;
}

.united input:last-child {
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	border-right-width: 2px;
}

ul.choiceList {
	align-items: center;
	margin-top: calc(var(--spacing) * 2);
}

ul.choiceList li {
	display: flex;
}

.fakeIcon {
	display: inline-block;
	width: 1.25em;
	margin: 0 0.25em 0 0;
	background: var(--color-fg-alt);
	text-align: center;
}

.active .fakeIcon {
	color: var(--color-fg);
}

ul.media {
	display: flex;
	flex-flow: column wrap;
}

.attachment {
	display: flex;
	flex-flow: row;
	align-items: center;
	margin-bottom: var(--spacing);
}

.attachment div {
	margin: auto;
}

.attachment img,
.attachment video {
	height: 25vh;
	width: auto;
}

.checkbox label {
	flex-flow: row;
}

.checkbox label span {
	margin-left: var(--spacing);
	flex: 1 1 auto;
}

.group .checkbox {
	flex: auto;
}

.group .checkbox label {
	flex-flow: column;
}

.searchGroups {
	flex-flow: column wrap;
}

.searchGroups li {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	margin: var(--spacing);
}

.searchGroups li>*:first-child {
	flex: 1;
}

.searchGroups li>*:nth-child(2) {
	/* flex: 2; */
	display: flex;
	flex-flow: row wrap;
}

.searchGroups li>*:nth-child(2)>* {
	margin: auto;
	flex: 1;
	text-align: center;
}

.searchGroups li>*:nth-child(2)>*:nth-child(2) {
	margin: auto;
	flex: 2;
}

.unpinned {
	display: inline-block;
	rotate: 90deg;
}

.mentions {
	background-color: var(--color-bg-accent);
	border-radius: 5%;
	box-shadow: 1px var(--color-fg-alt);
	position: element('.newMessage');
	overflow-y: scroll;
}

.mentions button {
	cursor: pointer;
	margin: 0.1cm auto;
}

.mentioned {
	color: var(--color-fg);
	font-weight: bold;
}

.closeMention {
	position: relative;
	top: -30px;
	right: -40%;
	cursor: pointer;
}

.specialMention {
	font-weight: bold;
	background-color: #6d90da;
	color: black;
}

.solo {
	flex: 1 0 100%;
}

.signOut {
	margin: auto;
}

svg.arcGraph {
	flex: 1 0 auto;
	width: calc(100% - 2px);
	height: auto;
}

svg.arcGraph text.arcText {
	font-size: 10px;
}

svg.arcGraph .arcLink {
	stroke: var(--color-fg-alt);
}

svg.arcGraph text {
	fill: var(--color-fg);
}

svg.arcGraph .arcLink:hover {
	opacity: 1;
	cursor: default;
}

svg.arcGraph .arcLink:hover text {
	startoffset: 90%;
}

.letters {
	display: none;
}

.tools {
	flex-basis: 100%;
	justify-content: flex-end;
	flex-grow: 0;
	width: 10%;
	background-color: var(--color-bg);
}

.delete {
	cursor: pointer;
	margin: auto 0.2cm;
}

.messageMenu {
	display: flex;
}

.messageMenu .linkButton {
	font-weight: bold;
	margin: 0 var(--spacing);
	align-self: center;
}

.deleteForm button {
	background-color: var(--color-fg-alt);
	color: var(--color-bg-alt);
	padding: 0.2cm;
	margin: 0.5cm 0.2cm;
}

details {
	cursor: pointer;
	margin: var(--spacing) 0;
}

.details {
	margin: var(--spacing) auto;
}

.media a {
	text-decoration: none;
	color: var(--color-fg);
}

.media a:hover {
	color: var(--color-fg-alt);
	transition: var(--transition);
}

.folder-nested {
	margin-left: 1em;
	position: relative;
}

.hide {
	display: none;
}

input,
form input,
form fieldset input {
	font-size: 16px;
	width: 100%;
}

.files {
	background-color: var(--color-bg-accent);
	cursor: pointer;
	border: var(--color-bg-accent) 1px solid;
}

.files img {
	max-height: 2cm;
	max-width: 2cm;
}

.bread {
	cursor: pointer;
}

.documents .folder {
	align-self: end;
}

.folder {
	margin: 1cm auto;
}

.folder form {
	margin: 1cm auto;
}

.folder select {
	margin: 10px auto;
}

.flex {
	display: flex;
}

.row {
	flex-direction: row;
	align-items: center;
}

.column {
	flex-direction: column;
}

.documents .flex h3 {
	margin: 0.35cm;
	padding: 0.3cm 0.4cm;
}

.flex .files {
	margin: 0.5em 0.1cm;
}

.crumbs {
	margin: 1cm 0;
	flex: 0 1 auto;
}

.fakeLink {
	cursor: pointer;
}

.a2hs {
	flex: 1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-evenly;
}

.a2hs>* {
	flex: 0 1;
	margin: 0;
	vertical-align: middle;
}

.colorscheme label {
	text-align: center;
}

.restrict {
	height: 2cm;
	max-width: 100%;
	overflow: hidden;
	justify-content: space-between;
}

.restrict span {
	align-items: center;
}

.fileMenu {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.fileMenu input {
	display: flex;
	max-width: 50%;
	border: 1px solid white;
}

.initial {
	flex-wrap: wrap;
}

.fileMenu button {
	background-color: var(--color-bg-alt);
	color: var(--color-fg-alt);
	border: none;
	border-radius: var(--radius);
	font-size: 110%;
	font-weight: bold;
	padding: 0.2cm;
	margin: 0.25cm auto;
	transition: var(--transition-fast);
}

.folderMenu button {
	background-color: var(--color-bg-alt);
	color: var(--color-fg-alt);
	border: none;
	border-radius: var(--radius);
	font-size: 110%;
	font-weight: bold;
	padding: 0.2cm;
	margin: 0.25cm auto;
	transition: var(--transition-fast);
}

.folderMenu {
	display: flex;
}

.folderMenu input {
	width: 50%;
	height: 75%;
	border: 1px solid white;
}

.between {
	justify-content: space-between;
}

.files.search {
	align-items: center;
}

.search span,
.search p {
	font-size: 12px;
	align-items: center;
	padding-left: 0.15cm;
}

.searchmedia fieldset {
	display: block;
}

.highlight {
	color: var(--color-highlight);
}

.invite {
	display: block;
}

.center {
	text-align: center;
}

.soft a.inEvent {
	background-color: var(--color-bg-alt);
	width: calc(100% - 0.15cm);
}

.prompt {
	display: block;
	margin-left: 0;
}

.warn {
	font-weight: bold;
	font-size: 1.15em;
}

.success {
	text-align: center;
}

.overlay {
	background-color: #000000;
	opacity: 1;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000000000;
	color: #000000;
}

.overlay img,
.overlay video,
.overlay audio,
.overlay iframe {
	display: block;
	margin: auto;
}

.overlay iframe {
	overflow-y: scroll;
	height: 70%;
	width: 100%;
}

.overlay audio {
	margin-top: 0.15cm;
}

.overlay p {
	font-weight: bold;
	color: #fff;
	text-align: center;
	font-size: x-large;
}

.block {
	display: block;
}

.overlay .btn {
	width: 50%;
	cursor: pointer;
}

.emoji {
	font-size: 16px;
}

a.linkButton.emoji:hover {
	text-decoration: none;
}

.pad {
	padding: 0 3px;
	border: 0.01cm solid var(--color-bg-alt);
	border-radius: var(--radius);
	background-color: var(--color-bg-alt);
}

.theemojis {
	cursor: pointer;
	padding: 10px
}

.emojiContainer {
	width: 250px;
	height: 150px;
	background-color: black;
	position: absolute;
	right: 10%;
	bottom: 30%;
	border-radius: 5px;
	overflow-y: scroll;
	z-index: 5000;
}

.emojiContainer form {
	display: flex;
	flex-wrap: wrap;
	padding: 10px
}

@media (max-width: 800px) {
	.landing .fakeHeader h1 {
		font-size: 40px;
		transform: translate(60%, 100%);
	}
}


@media (max-width: 700px) {
	.metrics {
		display: none;
	}

	.landing .fakeHeader h1 {
		font-size: 40px;
		transform: translate(50%, 100%);
	}

	.thirds>* {
		display: block;
		width: 100%;
		margin: 10px auto;
	}

	.thirds.images>div>img {
		width: 100%;
		height: auto;
	}
}

@media (max-width: 600px) {
	.metrics {
		display: none;
	}

	.emojiContainer {
		right: 20%;
		bottom: 50%
	}
}

@media (max-width: 500px) {
	.overlay img {
		max-width: 100vw;
		max-height: 80vh;
	}

	.overlay video {
		height: 70%;
	}
}

@media (max-width: 350px) {
	.landing .fakeHeader h1 {
		font-size: 30px;
	}
}

@media (orientation: landscape) {

	.overlay img,
	.overlay video,
	.overlay audio {
		width: auto;
		max-height: 70%;
	}

	.overlay audio {
		width: 20%;
	}

	.overlay iframe {
		overflow-y: scroll;
		height: 90%;
		width: 100%;
	}

	.overlay .btn {
		display: inline-block;
		margin-top: 0.5cm;
	}

	.overlay>* {
		margin: auto;
	}
}

@media all and (display-mode: standalone) {
	body {
		height: 100lvh;
	}
}

.help {
	padding: 1em;
	overflow-y: scroll;
}

.help a {
	color: var(--color-fg-alt);
}

.metrics {
	margin: auto;
	border-collapse: collapse;
	max-width: 50%;
}

.metrics th {
	padding-bottom: 10px;
	text-align: center;
}

.metrics td {
	padding: 10px;
	border-bottom: var(--color-highlight);
	text-align: center;
	border: 1px solid var(--color-bg-accent);
}

.wrap {
	flex-wrap: wrap;
}

.featured>.groups {
	align-items: flex-start;
}

cite {
	background-color: var(--gray);
	color: #fff;
	border-radius: var(--radius);
	line-height: 2em;
	padding: 0.25cm
}