.foot{
	position:fixed;
	bottom:0;
	left:0;
	margin-top:auto;
	display:flex;
	flex-direction: column;
	flex-grow:1;
	width:100vw;
	pointer-events: none;
}
.cmd-output{
	/* background-color: #000; */
	flex-grow: 2;
	margin-left:4px;
	margin-right:80px;
	display:flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #777;
	word-wrap:break-word;
	width:100vw;
	pointer-events: none;
}
.cmd-input{
	padding:0;
	flex-grow:0;
	flex-shrink:1;
	/* background-color: #fff; */
	height: 32px;
	min-height:0;
	margin-left:4px;
	margin-right:80px;
	margin-bottom:4px;
	width:100vw;
}
#cmdInput{
	background: none;
	border:none;
	pointer-events: none;
	color:#ccc;
	width:100%;
}
#cmdInput:focus{
	outline:none;
}
#arrow{
	color:#ccc;
	pointer-events: none;
	cursor: default;
}
.jumpscare{
	transition:opacity 2s;
}
.fadejumpscare{
	opacity:0;
}
.terminal-shadow{
	text-shadow: 1px 1px 0 #1b1b1b;
}
/* Global stuff that makes no sense to redefine 80 billion times. */
@font-face{
	font-family: 'Toshiba';
	src: url(/49ce8999be347f672e9d.ttf) format('truetype');
}

:root{
	background-color: #333;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font: 16px 'Toshiba';
}

.content{
	padding:8px;
	padding-top: 80px;
	padding-left: 80px;
	height:100%;
	color: #fff;
	display:block;
}

.too-small p{
	font: 3vw 'Toshiba';
}

.no-select{
	user-select: none;
	cursor: default;
}

#tooltip{
	opacity:0;
	position:fixed;
	background: rgba(73, 78, 110, 0.8);
	border:2px rgba(94, 99, 131, 0.8) solid;
	color:#fff;
	top:0;
	left:0;
	transition: opacity 0.2s;
	z-index: 1000000;
	pointer-events: none;
	/* font-size:0.5em; */
	padding:4px;
	font: 16px 'Toshiba';
}
#tooltip p{
	filter: drop-shadow(1px 1px 1px rgb(112, 112, 112));
}

.account-banner{
	position:absolute;
	top:60px;
	left:0;
	background-color: #34273d;
}

.account-banner::after{
	content:'';
	z-index: -2;
	position: absolute;
	top:0;
	right:-30px;
	/* border-left: 60px solid transparent; */
	border-right: 30px solid transparent;
	/* border-top: 60px solid #9358bd; */
	border-top: 30px solid #34273d;
}

.profile-btn{
	font: 16px 'Toshiba';
	/* font-weight: bold; */
	color:#fff;
	text-decoration: none;
	background:none;
	border:none;
	margin:8px;
}
.profile-btn:hover{
	color:#0fd7e6;
}

.account-panel{
	--width: 320px;
	--height: 400px;
	--offset-x: -320px;
	--offset-y: 0px;
	position:fixed;
	display:flex;
	flex-direction:column;
	width:var(--width);
	min-height:var(--height);
	max-height:calc(var(--height) + 180px);
	left:var(--offset-x);
	top:var(--offset-y);
	background-color: #34273d;
	z-index: 100000;
	border-right: 15px solid transparent;
	border-bottom: 15px solid transparent;
	clip-path:polygon(0 0, 100% 0, 100% 96%, 96% 100%, 0 100%);
	transition: left 0.4s ease-in-out, top 0.4s ease-in-out;
	color: #fff;
}

.account-panel-open{
	left:0;
	top:0;
}

.profile{
	margin:8px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:8px;
}
.badges-container{
	margin:8px;
	margin-top:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:8px;
	flex-wrap: wrap;
}
.badges-container p u{
	font-size:32px;
}
/*
.badges{
	display:flex;
	flex-direction:row;
	justify-content:center;
	gap:8px;
	overflow-y:scroll;
	max-height:140px;
}
*/
.badges{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items:center;
	/* gap:4px; */
	max-height: calc(3 * 80px);
	overflow:hidden;
}
.badge{
	flex: 1 1 auto;
	max-width: 64px;
	max-height: 64px;
	object-fit: contain;
	margin:5px;
}
.profile-actions{
	margin-top:auto;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:8px;
}
#avatar{
	width:160px;
	height:160px;
	border: 2px solid #fff;
	border-radius:50%;
}
#displayname *{
	font-size:32px;
}
.account-badge-rarity-0{
	color:#fff;
}
.account-badge-rarity-1{
	color:#333cb9;
}
.account-badge-rarity-2{
	color:#37c730;
}
.account-badge-rarity-3{
	color:#d47b28;
}
.account-badge-rarity-4{
	color:#d46060;
}
.account-badge-rarity-5{
	color:#f566df;
}
.account-badge-rarity-6{
	color:#f3e410;
}
.account-badge-rarity-7{
	color:#f51a16;
}
.account-badge-rarity-8{
	color:#1a95db;
}
.account-badge-rarity-9{
	color:#8d3bd1;
}
.account-badge-rarity-10{
	background: linear-gradient(to right, #db2a2a, #d16d15, #d4b413, #18fa14, #192abf, #760dd9, #db2a2a);
	-webkit-background-clip: text;
	background-clip:text;
	background-repeat:repeat-x;
	color:transparent;
	animation: rainbow_animation 6s linear infinite;
	background-size: 400% 100%;
}
.profile-action-btn{
	font: 32px 'Toshiba';
	/* font-weight: bold; */
	color:#fff;
	text-decoration: none;
	background:none;
	border:none;
	margin:8px;
}
.profile-action-btn:hover{
	color:#0fd7e6;
}
.logout-btn:hover{
	color:#db2a2a;
}

navi{
	position: fixed;
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	color: #fff;
	top:0px;
	left:-320px;
	width: 320px;
	height: 60px;
	background-color: #34273d;
	z-index: 99999;
	/* clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%); */
	transition: left 0.4s ease-in-out, top 0.4s ease-in-out;;
}

navi::after{
	content:'';
	z-index: -2;
	position: absolute;
	top:0;
	right:-60px;
	/* border-left: 60px solid transparent; */
	border-right: 60px solid transparent;
	/* border-top: 60px solid #9358bd; */
	border-top: 60px solid #34273d;
}

navi::before{
	content:'';
	position: absolute;
	top: 4px;
	right: -20px;
	z-index: -1;
	width:0;
	height:0;
	/* border-left: 40px solid transparent; */
	border-right: 15px solid transparent;
	border-top: 15px solid #ffffff;
	transition: opacity 0.2s;
	opacity:100%;
}

.navi-content{
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	padding: 4px;
	overflow: hidden;
}

.navi-btn{
	font: 32px 'Toshiba';
	/* font-weight: bold; */
	color:#fff;
	text-decoration: none;
	background:none;
	border:none;
}
.navi-btn:hover{
	color:#0fd7e6;
}
.navi-btn:visited{
	color:#fff;
}

.navi-open{
	left:0;
}
.navi-open::before{
	opacity:0;
}

.navi-disabled{
	left:-380px;
	top:-60px;
}
.navi-disabled::before{
	opacity:0;
}

.red{
	color:#db2a2a;
}
.orange{
	color:#d16d15;
}
.yellow{
	color:#d4b413;
}
.green{
	color:#15961e;
}
.blue{
	color:#192abf;
}
.purple{
	color:#760dd9;
}
.lightblue{
	color:#1ad6cd;
}
.lightgreen{
	color:#18fa14;
}
.lightpurple{
	color:#e714fa;
}
.darkred{
	color:#6e0000;
}
.darkblue{
	color:#00046e;
}
.rainbow{	
	background: linear-gradient(to right, #db2a2a, #d16d15, #d4b413, #18fa14, #192abf, #760dd9, #db2a2a);
	-webkit-background-clip: text;
	background-clip:text;
	background-repeat:repeat-x;
	color:transparent;
	animation: rainbow_animation 6s linear infinite;
	background-size: 400% 100%;
}

.no-scroll-x{
	overflow-x: hidden;
}

.no-scroll.y{
	overflow-y: hidden;
}

.no-scroll{
	overflow: hidden;
}

@keyframes rainbow_animation {
    0% {
        background-position: 0 0;
    }

	100% {
        background-position: 132% 0;
    }
}

@media (max-width: 768px) {
	.content {
		padding: 48px; /* Reduce padding for smaller screens */
	}
}
/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
  position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none;
}

/* Expanded CSS Variables */

.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);

  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);

  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));

  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));

  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));

  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );

  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));

  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}

.splitting.cells img { width: 100%; display: block; }

@supports ( display: grid ) {
  .splitting.cells {
    position: relative;
    overflow: hidden;
    background-size: cover;
    visibility: hidden;
  }

  .splitting .cell-grid {
    background: inherit;
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    display: grid;
    grid-template: repeat( var(--row-total), 1fr ) / repeat( var(--col-total), 1fr );
  }

  .splitting .cell {
    background: inherit;
    position: relative;
    overflow: hidden;
  }

  .splitting .cell-inner {
    background: inherit;
    position: absolute;
    visibility: visible;
    /* Size to fit the whole container size */
    width: calc(100% * var(--col-total));
    height: calc(100% * var(--row-total));
    /* Position properly */
    left: calc(-100% * var(--col-index));
    top: calc(-100% * var(--row-index));
  }

  /* Helper variables for advanced effects */
  .splitting .cell {
    --center-x: calc((var(--col-total) - 1) / 2);
    --center-y: calc((var(--row-total) - 1) / 2);

    /* Offset from center, positive & negative */
    --offset-x: calc(var(--col-index) - var(--center-x));
    --offset-y: calc(var(--row-index) - var(--center-y));

    /* Absolute distance from center, only positive */
    --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );

    /* Absolute distance from center, only positive */
    --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
  }
}


.splitting .char{
	animation: wavy 4s infinite ease-in-out;
	animation-delay: calc(60ms * var(--char-index));
}

.head{
	margin-bottom:32px;
    position:relative;
}
.head *{
	font-size:64px;
}
a{
	color:#32c286;
	text-decoration: none;
}
a:visited{
	color:#32c286;
}
a:hover{
	color:#0fc6e6;
	text-decoration: underline;
}

.content{
	/* display: flex; */
    flex-direction: column; /* Arrange children in a column */
    justify-content: center; /* Center content */
    text-align: center;     /* Center text */
    flex: 1;   
}

.headtext{
	height:1.4em;
}

body{
	height:100vh;
}

:root{
	background-color:#643131;
    --shadow-clr:#000;
    --shadow2-clr: #281a3f;
}

ul{
	text-align: center;
	columns:3;
	-webkit-columns:3;
	-moz-columns:3;
	list-style:none;
	font:32px 'Toshiba';
}

.shadow{
    text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000;
}

.shadow2{
    text-shadow: 1px 1px 1px var(--shadow2-clr), -1px 1px 1px var(--shadow2-clr), -1px -1px 1px var(--shadow2-clr), 1px -1px 1px var(--shadow2-clr);
}

.splash{
    animation: wavysplash 4s infinite ease-in-out;
    animation-delay: calc(60ms * var(--char-index));
    position:absolute;
    right:0;
    top:0;
    transform: rotate(19deg);
}
.splash>*{
    animation: splashbounce 1.5s infinite ease-in-out;
    font-size:32px;
    display:inline-block;
    pointer-events: none;
}

li{
	font:32px 'Toshiba';
}

li::before{
	content:'';
}

.container{
	/* flex:1; */
	margin-top:8px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	gap:32px;
}

@keyframes wavy{
	0%{
		transform:translateY(0em);
	}
	50%{
		transform:translateY(0.4em);
	}
	100%{
		transform:translateY(0em);
	}
}

@keyframes wavysplash{
    0%{
        transform: translateY(0em) rotate(19deg);
    }
    50%{
        transform: translateY(0.4em) rotate(19deg);
    }
    100%{
        transform:translateY(0em) rotate(19deg);
    }
}

@keyframes splashbounce{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}

#info{
	flex:1;
}
#slots{
    position:relative;
}

@media (max-width: 768px) {
	:root {
		overflow-x:hidden;
		overflow-y:scroll;
	}
	ul{
		columns:1;
	}
	.headtext{
		height:3em;
	}
}