* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-display: swap;
}

body {
  font-family: 'Lato', 'NotoColorEmoji';
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.4vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  height: 100vh; /* Ensures the body element covers the entire viewport height */
  margin: 0; /* Removes default margin */
}

::selection {
  background-color: #1C2023;
}

.blur-effect {
  transition: 0.20s;
  filter: blur(0.5vh);
  pointer-events: none;
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

button:disabled { 
  opacity: 0.4; 
  cursor: not-allowed;
}

.invite-btn-mobile {
	display: none;
}

.footer-mobile {
	display: none;
}


[data-bg-style="patch-art"] {
	body {
	  opacity: 77%; /* Only valueable when background image */
      background-size: cover; /* Ensures the image covers the screen */
      background-repeat: no-repeat; /* Prevents the image from repeating */
      background-position: center; /* Centers the image in the viewport */
      #background-blend-mode: luminosity;
	}
}

[data-bg-patch-art="2-0-mothercrystal"] {
	body {
	  background-image: url("/assets/images/backgrounds/2-0-mothercrystal.png");
	}
}

[data-bg-patch-art="6-0-moon"] {
	body {
	  background-image: url("/assets/images/backgrounds/6-0-moon.jpg");
	}
}

[data-bg-patch-art="6-0-thavnair"] {
	body {
      background-image: url("/assets/images/backgrounds/6-0-thavnair.jpg");
	}
}

[data-bg-patch-art="6-2-island-sanctuary"] {
	body {
      background-image: url("/assets/images/backgrounds/Endwalker-ConceptArt-IslandSanctuary.jpg");
	  background-blend-mode: overlay;
	  background-color: #444 !important;
	}
}

[data-bg-patch-art="7-0-ocean"] {
	body {
      background-image: url("/assets/images/backgrounds/7-0-ocean.jpg");
	  background-blend-mode: overlay;
	  background-color: #444 !important;
	}
}

[data-bg-patch-art="7-0-tural"] {
	body {
	  background-image: url("/assets/images/backgrounds/7-0-tural.jpg");
	}
}

[data-bg-patch-art="7-0-map"] {
	body {
	  background-image: url("/assets/images/backgrounds/7-0-map.jpg");
	  background-blend-mode: overlay;
	  background-color: #444 !important;
	}
}

[data-bg-patch-art="7-1"] {
	body {
      background-image: url("/assets/images/backgrounds/7-1.jpg");
	}
}

[data-bg-patch-art="7-2"] {
	body {
	  background-image: url("/assets/images/backgrounds/7-2.jpg");
	}
}

[data-bg-patch-art="7-21"] {
	body {
      background-image: url("/assets/images/backgrounds/7-21.jpg");
	  background-blend-mode: overlay;
	}
}

[data-bg-patch-art="7-3"] {
	body {
	  background-image: url("/assets/images/backgrounds/7-3.jpg");
	  background-blend-mode: overlay;
	  background-color: #444 !important;
	}
}

[data-bg-style="tomestone"] {
	body {
	  opacity: 77%; /* Only valueable when background image */
	  background-blend-mode: overlay;
	}
}

[data-bg-style="flat-bg"] {
	body { }
}

/* Light theme */
[data-theme="light"] {
	
	body {
	  color: #333;
	  background-color: #444;
	}
	
	.maplink {
	  color: #333;
	}
	
	.subtitle {
	  color: #ddd;
	}

	.subtitle#alt-subtitle {
	  color: #737373;
	}
	
	a {
	  color: #333;
	}
	
	.session_status a {
	  color: #ddd;
	}
	
	.entry, .avatar, .character-portrait img {
	  border: 0.23vh solid #ddd;
	  background-color: #f9f9f9;
	  transition: 0.20s;
	}

	.sidebar-button {
	  border: 0.23vh solid #333;
	  background-color: #e0e0e0;
	}

	.sidebar {
	  border-left: 0.23vh solid #333;
	}

	.mini-avatar {
	  border: 0.13vh solid #ddd;
	}
	
	.linked:hover {
	  border: 0.23vh solid #333;
	  background-color: #e6e6e6;
	  cursor: pointer;
	  transition: 0.20s;
  	  transform: scale(1.01);
	}
	
	.vertical-bar {
	  background-color: #e0e0e0;
	}

    .sticky-header {
	  background: rgb(224,224,224);
	  background: linear-gradient(180deg, rgba(224,224,224,1) 95%, rgba(224,224,224,1) 100%);
	}
	
	h2 {
	  color: #333;
	}
	
	.rainbow {
  	  background-image: 
		radial-gradient(circle, rgba(51,51,51,1) 50%, rgba(255,123,241,1) 100%);
	}
	
	.footer {
	  color: #ddd;
	}
	
	.footer a {
	  color: #ddd;
	}
	
	.logon, .popup, .print {
      background-color: #e0e0e0;
      border: 0.3vh solid #ddd;*/
    }
	
	.login-form input[type="text"],
	.login-form input[type="number"],
    .login-form input[type="password"],
	.invitelink_box,
	select {
      border: 0.15vh solid #ddd;
	  background-color: #f9f9f9;
	  color: black;
    }
	
	.login-form button, .theme-btn, .bg-btn, .dc-btn, .lang-btn, .misc-btn, .invite-btn, .invite-btn-mobile {
	   background-image: linear-gradient(45deg, #333  0%, #545454  51%, #333  100%);
	   background-size: 200% auto;
	   /* background-color: #333; */
       color: #f9f9f9;
	}
	
	.theme-btn.active, .bg-btn.active, .dc-btn.active, .lang-btn.active, .misc-btn.active, .invite-btn.active, .invite-btn-mobile.active {
	  box-shadow: inset 0px 0px 0.5vh white;
	}

    .login-form button:enabled:hover {
	  box-shadow: 0px 0px 0.5vh black;
    }
	
	.close-button {
	  color: #333;	
	}
}

/* Dark theme */    
[data-theme="dark"] {
	
	body {
	  color: #ddd;
	  background-color: #222;
	}
	
	.maplink {
	  color: #ddd;
	}
	
	.subtitle {
	  color: #bbb;
	}
	
	a {
	  color: #bbb;
	}
	
	.entry, .avatar, .character-portrait img {
	  border: 0.23vh solid #555;
	  background-color: #444;
	  transition: 0.20s;
	}

	.sidebar-button {
	  background-color: #333;
      border: 0.23vh solid #555;
	}

	.sidebar {
      border-left: 0.23vh solid #555;
	}

	.mini-avatar {
	  border: 0.13vh solid #555;
	}
	
	.linked:hover {
	  border: 0.23vh solid #ddd;
	  background-color: #595959;
	  cursor: pointer;
	  transition: 0.20s;
  	  transform: scale(1.01);
	}
	
	.vertical-bar {
	  background-color: #333;
	}
	
	.sticky-header {
	  background: rgb(51,51,51);
	  background: linear-gradient(180deg, rgba(51,51,51,1) 90%, rgba(51,51,51,0) 100%);
	}
	
	h2 {
	  color: #ddd;
	}

	.rainbow {
  	  background-image: 
	  	radial-gradient(circle, rgba(221,221,221,1) 50%, rgba(255,123,241,1) 100%);
	}

	.footer {
	  color: #bbb;
	}

	.footer a {
	  color: #bbb;
	}
	
	.logon, .popup, .print {
	  background-color: #333;
	  border: 0.23vh solid #555;*/
    }
	
	.login-form input[type="text"],
	.login-form input[type="number"],
    .login-form input[type="password"],
	.invitelink_box,
	select {
	  border: 0.15vh solid #555;
	  background-color: #444;
	  color: white;
    }
	
	.volume {
      filter: invert(100%);
	}
	
	.login-form button, .theme-btn, .bg-btn, .dc-btn, .lang-btn, .misc-btn, .invite-btn, .invite-btn-mobile {
	   background-image: linear-gradient(45deg, #f9f9f9  0%, #B8B8B8  51%, #f9f9f9  100%);
	   background-size: 200% auto;
	   /* background-color: #f9f9f9; */
       color: #333;
	}

	.theme-btn.active, .bg-btn.active, .dc-btn.active, .lang-btn.active, .misc-btn.active, .invite-btn.active, .invite-btn-mobile.active {
  	  box-shadow: inset 0px 0px 0.5vh black;
	}

	.login-form button:enabled:hover {
	  box-shadow: 0px 0px 0.5vh white;
    }
	
	.close-button {
	  color: #ddd;	
	}
	
}


/* Logon */

	.logo-login {
  		max-width: 10vh;
  		max-height: 10vh;
  		width: auto;
  		height: auto;
		transition: 0.20s;
	}

    .logon, .popup, .print {
	  text-align: center;
      padding: 2vh;
      border-radius: 1vh;
	  max-width: 43vh;	
      width: 100%;
	  position: absolute;
  	  top: 50%;
      left: 50%;
      transform: translate(-50%, -400%);
	  transition: opacity 500ms ease-in-out, transform 300ms cubic-bezier(1, 0, 0, 1);;
	  opacity: 0;
	  pointer-events: none;
  	  user-drag: none; 
  	  user-select: none;
  	  -moz-user-select: none;
  	  -webkit-user-drag: none;
  	  -webkit-user-select: none;
  	  -ms-user-select: none;
    }

    .logon.active, .popup.active {
      transform: translate(-50%, -50%);
      opacity: 1;
	  pointer-events: auto;
	  user-drag: auto;
	  user-select: auto;
	  -moz-user-select: auto;
	  -webkit-user-drag: auto;
	  -webkit-user-select: auto;
	  -ms-user-select: auto;
    }

	.popup.active {
	  z-index: 9999;
	}

    .popup, .print {
	  text-align: left;
	  box-shadow: 0 0 5vh 1vh grey;
    }

    .login-form {
      margin-top: 1vh;
    }
		
	.login-form input {
		transition: 0.20s;
	}

	.login-form input:hover {
		transition: 0.20s;
		transform: scale(1.01);
	}
		
	.login-form input:focus {
		background: white;
		transition: 0.20s;
		transform: scale(1.05);
	}

    .login-form input[type="text"],
	.login-form input[type="number"],
    .login-form input[type="password"],
	.invitelink_box,
	select {
	  font-size: 1.5vh;
      width: calc(100% - 2vh);
      padding: 0.6vh;
      margin: 0.6vh 0;
      border-radius: 0.75vh;
    }

	.invitelink_box { width: 100%; }

	.condensed {
	  padding: 0.25vh !important;
      margin: 0.25vh 0 !important;
	}

    .login-form button {
	  transition: 0.20s;
      border: none;
      padding: 0.75vh 2vh;
      border-radius: 1vh;
      cursor: pointer;
	  font-size: 1.75vh;
    }

    .login-form button:enabled:hover {
	  transition: 0.20s;
      transform: scale(1.2) !important;
    }


/* Normal page */

.blink {
  animation: blink 1s;
  animation-iteration-count: 3;
}

@keyframes blink {
  0% {
	    transform: scale(1.0);
	}
	
	50% {
		transform: scale(1.05);
		background-color: #dc143c;
		background-image: none;
		color: white;
	}
	
	100% {
		transform: scale(1.0);
	}
}

.SS {
  animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255,0,0,0.7);
	}
	
	70% {
		box-shadow: 0 0 0 1vh rgba(255,0,0,0);
	}
	
	100% {
		box-shadow: 0 0 0 0 rgba(255,0,0,0);
	}
}

.blink.SS {  
  animation: blink 1s 3, pulse 2s infinite 3s; /* This is what an SS rank would actually use */
}

.blink-color {
  animation: blink-color 1s;
  animation-iteration-count: 3;
}

@keyframes blink-color {
  0%, 100% {
    color: inherit;
	text-shadow: inherit;
  }
  50% {
    color: white;
	text-shadow: inherit;
  }
}

.rainbow {
  -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;  
  animation: move 60s linear infinite;
}

@keyframes move {
	to {
		background-position: 100vh;
	}
}

.gelatine {
  animation: gelatine 0.5s;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.hithere {
  animation: hithere 1s ease;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

.bounce {
  animation: bounce 2s ease;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.bounce2 {
  animation: bounce2 2s ease;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.shake {
  animation: shake 2s ease;
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.swing {
	transform-origin: top center;
	animation: swing 2s ease;
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.wobble {
  animation: wobble 2s ease;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}


/* Title Bar */
.title-bar {
  width: 100%;
  color: #fff;
  padding: 0.75vh;
  position: fixed;
  z-index: 1;
  transition: opacity 500ms ease-in-out, transform 300ms cubic-bezier(1, 0, 0, 1);
  transform: translate(0, -300%);
  opacity: 0;
}

.title-bar.active {
  transform: translate(0);
  opacity: 1;
}

.logo-title {
  display: flex;
  align-items: center;
  margin-left: 0.6%;
}

.logo {
  max-width: 7.25vh;
  max-height: 7.25vh;
  width: auto;
  height: auto;
  margin-right: 2vh;
  transition: 0.20s;
}

.logo:hover, .logo-login:hover {
  transition: 0.20s;
  transform: scale(1.07) rotate(-7deg);
}

h1 {
  margin: 0;
}

.subtitle { font-size: 1.5vh; }

.session_status {
  margin-top: -7.5vh;
  margin-right: 0.75vh;
  text-align: right;
  float: right;
}

.avatar {
  height: 5.5vh;
  width: 5.5vh;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

.avatar:hover {
	border-width: 0.32vh;
	transition: 0.20s;
    transform: scale(1.12) rotate(7deg);
}

.mini-avatar {
  height: 2.2vh;
  width: 2.2vh;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.5vh;
  vertical-align: middle;
}

a:hover, .session_status a:hover, .maplink:hover {
  text-shadow: 0px 0.05em 0.05em #000000;
}


/* Content */
.content {
  display: flex;
  width: 99.5%;
  justify-content: space-around;
  margin-top: 9vh;
  transform: translate(0, 120%);
  transition: opacity 500ms ease-in-out, transform 300ms cubic-bezier(1, 0, 0, 1);;
  opacity: 0;
}

.content.active {
  transform: translate(0);
  opacity: 1;
}

.placeholder-img {
  width: 18vh;
  pointer-events: none;
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.entry {
  text-align: left;
  padding: 1.5vh;
  margin-top: 0.25vh;
  margin-bottom: 0.25vh;
  border-radius: 1vh;
  transition: width 2s, height 2s, 0.20s;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
	
.entry::after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  /* max-width: 40%; This could be a solution for exceptionally visually large entries. But needs more work. */
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  overflow: hidden;
  z-index: -1;
}

.entry.atrain-entry::after {
  background-size: 55%;
}

.entry.departed.atrain-entry::after {
  background-size: contain;
}	
	
/* Style for entries that are dead */
.entry.dead, .entry.departed, .entry.completed, .entry.alertOver {
  opacity: 0.6;
  position: relative;
  overflow: hidden;
  transition: width 2s, height 2s, 0.20s;
  pointer-events: none;
}

/* Image overlay effect, right-aligned */
.entry.dead::before, .entry.departed::before, .entry.completed::before, .entry.alertOver::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0%;
  width: 12.5vh;
  height: 12.5vh;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  z-index: 2;
}

.entry.dead::before {
  background-image: url('/assets/images/dead.webp');
}

.entry.departed::before {
  background-image: url('/assets/images/departed.webp');
}

.entry.completed::before {
  background-image: url('/assets/images/completed.webp');
}

.entry.alertOver::before {
  background-image: url('/assets/images/redalert_resolved.webp');
  top: 50%;
  transform: translateY(-15%);
  width: 15.5vh;
  height: 15.5vh;
}


div.entry p { 
  width: calc(65% - (0.2 * (100% - 25vh)));
  max-width: 65%;
}
div.entry.compact p { width: 75%; } /* Used on Achievement page */

div.entry.nolimit p { 
  width: 100%;
  max-width: max-content;
}

a.is-entry,
a.is-entry:hover,
a.is-entry:active {
  text-decoration: none;
  color: inherit;
  text-shadow: none;
}

.reward-icon { 
  max-height: 1.4em;
  height: auto;
  vertical-align: middle;
  margin-left: -0.1vh;
}

.reward-container {
	  text-align: center;
	  vertical-align: middle;
	  padding-top: 0.2vh;
	  padding-bottom: 0.2vh;
	  padding-left: 0.4vh;
	  padding-right: 0.4vh;
 	  /* border: 0.23vh solid #595959; */
	  /* background-color: #004040; */
	  /* border-radius: 0.35vh; */
}

.reward-container:first-child { padding-left: 0 } /* Remove this if returning to background + border */
.reward-container:last-child { padding-right: 0 } /* Remove this if returning to background + border */

.reward-container-container {
	/* border: 0.23vh solid #595959; */
	/* background-color: #004040; */
	/* border-radius: 0.35vh; */
	margin-top: 0.5vh;
}

.otw-container {
  display: flex;
  align-items: center;
  margin-top: 1vh;
}

.member-text {
	padding-left: 0.2vh;
}



/* Vertical Bar */
.vertical-bar {
  position: relative;
  width: 24.2%;
  max-height: 87.5vh;
  padding: 1vh;
  padding-top: 0;
  border-radius: 1vh;
  overflow: hidden;
  scrollbar-gutter: stable both-edges;
}

.vertical-bar:hover {
  overflow-y: scroll;
}

.vertical-bar::-webkit-scrollbar {
  width: 0.5vh;
  position: absolute;
  background-color: transparent;
  overflow: hidden;
}

.vertical-bar::-webkit-scrollbar-track {
  display: none;
  background-color: transparent;
}

.vertical-bar::-webkit-scrollbar-thumb {
  background: #888;
}

.vertical-bar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.mobile-data-container {
	display: none;
}

.vertical-bar-content { 
  /*padding-top: 0.5vh;*/
}

.sticky-header {
  padding-top: 1.25vh;
  padding-bottom: 1.25vh;
  padding-right: 2vh;
  padding-left: 2vh;
  margin-left: -2vh;
  margin-right: -2vh;
  top: 0;
  position: sticky;
  z-index: 3;
}

.vertical-bar h2 {
  font-size: 2.6vh;
}

.volume {
  position: relative;
  float: right;
  margin-top: -3.3vh;
  transition: 0.20s;
  max-width: 3.75vh;
  max-height: 3.75vh;
  width: auto;
  height: auto;
  opacity: 0.70;
  border-radius: 1vh;	
}

.volume:hover {
  transition: 0.20s;
  transform: scale(1.2);
  cursor: pointer;
  border: 0.2vh solid black;
}

.volume.sound {
  display: none;
  pointer-events: none;
}

.topmenu {
  filter: invert(100%);
  position: relative;
  float: right;
  transition: 0.20s;
  max-width: 2.2em;
  max-height: 2.2em;
  width: auto;
  height: auto;
  padding: 0.2vh;
  border-radius: 1vh;
  overflow: visible;;
}

.topmenu:hover {
  transition: 0.20s;
  transform: scale(1.2);
  cursor: pointer;
  border: 0.2vh solid black;
}

#logoutLink .topmenu:hover  {
  filter: brightness(0) saturate(100%) invert(49%) sepia(84%) saturate(3548%) hue-rotate(334deg) brightness(96%) contrast(110%);
}

.drag-handle {
  display: none;
  font-size: 1vh;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.25vh;
  opacity: 0.4;
}

.drag-handle:hover { cursor: grab; opacity: 0.75 }
.drag-handle:active { cursor: grabbing; }

.vertical-bar:hover .drag-handle {
  display: block;
}

.sidebar {
  width: 25%;
  padding-left: 1.5vh;
  right: 0;
  border-radius: 0;
  position: absolute;
  z-index: 5;
  height: 100vh;
  max-height: 100vh;
  transition: transform 500ms cubic-bezier(1, 0, 0, 1);
}

.sidebar.collapsed {
  transform: translateX(100%);
  transition: transform 500ms cubic-bezier(1, 0, 0, 1);
}

.sidebar-button {
  padding-bottom: 0.5vh;
  border-radius: 2vh;
  font-size: 6vh;
  top: 45%;
  position: absolute;
  right: 24.2%;
  transform: scaleX(-1);
  padding-left: 3vh;
  margin-right: -1vh;
  transition: right 500ms cubic-bezier(1, 0, 0, 1);
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.sidebar-button.collapsed {
  margin-right: -2vh;
  padding-right: 2vh;
  padding-left: 0vh;
  margin-left: 0vh;
  transform: scaleX(1);
  right: 0;
  transition: right 500ms cubic-bezier(1, 0, 0, 1);
}


/* Small Screen ish */
@media only screen and (max-aspect-ratio: 16/8.7) and (min-aspect-ratio: 3.3/3) {
	
	/* If changed also apply to: Excessively narrow Mobile */
	
	div.entry p { 
		width: 100%;
		max-width: 100%;
	}
	
	.entry::after {
  		position: absolute;
  		content: '';
  		height: 100%;
  		width: 100%;
  		top: 0;
  		left: 0;
  		opacity: 0.2;
  		background-repeat: no-repeat;
  		background-size: cover;
  		background-position: center;
  		overflow: hidden;
  		z-index: -1;
	}
	
	.entry.atrain-entry::after {
  		background-size: contain;
	}

	.character-portrait {
    	display: none;
	}

	.character-text {
		margin-left: 0 !important;
	}
	
}

/* Mobile */
@media only screen and (max-aspect-ratio: 3.3/3) {
	
	.entry { font-size: 1.75vh; }
	
	.footer { display: none; }

    .sidebar-button { display: none; }
	
	.content { margin-top: 0.4vh; }
	
	.vertical-bar {
		display: none;
		width: 99%;
  		min-height: 99vh; 
  		padding: 0.5vh;
		padding-top: 0;
	}

	.mobile-data-container {
		display: block;
	}
	
	.entry, .logo-title { padding: 1.75vh; }
	
	.session_status { padding: 1.75vh; margin-right: 0vh; margin-top: -10.75vh; }
	
	.sticky-header { padding-top: 12vh; }

	.invite-btn {
		display: none;
	}

	.footer-mobile {
		position: absolute;
		transform: translate(0, 300%);
		transition: opacity 750ms ease-in-out, transform 500ms cubic-bezier(1, 0, 0, 1);
		opacity: 0;
		display: block;
		bottom: 0.5%;
		width: 95%;
	}

	.footer-mobile.active {
		transform: translate(0);
		opacity: 1;
	}

    .footer-mobile .vertical-bar {
		text-align: center;
		max-width: 99%;
		min-height: 2em;
		max-height: 2em;
		height: 2em;
		display: block;
    }

    .footer-mobile .vertical-bar p {
		vertical-align: middle;
		padding: 0.4em;
    }

	.invite-btn-mobile {
		display: block;
		position: absolute;
		bottom: 150%;
		right: 0;
    }
	
	[data-theme="light"] {
	
		.subtitle {
	  	  color: #737373;
		}
	 
		.title-bar {
	  	  color: #333;
		}
	
		.session_status a {
	  	  color: #737373;
		}
		
		.avatar {
	  		border: 0.23vh solid #555;
	  		background-color: #444;
	  		transition: 0.20s;
		}

		.topmenu {
  			filter: none;
		}

	}
	
}

/* Excessively narrow Mobile */
@media only screen and (max-aspect-ratio: 9/10) {
	
	/* If changed also apply to: Small Screen ish */
	
	.logo-title { display: flex; justify-content: center; }
	
	.session_status { margin-top: -3vh; float: none; display: flex; justify-content: center; align-items: center; }
	
	.session_status p { text-align: center; }
	
	/* .avatar { display: none; visibility: none;} */
	
	.sticky-header { padding-top: 17vh; }
	
	div.entry p { 
		width: 100%;
		max-width: 100%;
	}
	
	.entry::after {
  		position: absolute;
  		content: '';
  		height: 100%;
  		width: 100%;
  		top: 0;
  		left: 0;
  		opacity: 0.2;
  		background-repeat: no-repeat;
  		background-size: cover;
  		background-position: center;
  		overflow: hidden;
  		z-index: -1;
	}
	
	.entry.atrain-entry::after {
  		background-size: contain;
	}
	
}

/* Real fucking narrow Mobile */
@media only screen and (max-aspect-ratio: 20/47) {

.session_status_text { display: none; }
	
}

/* Settings Menu */

.close-button {
  transition: 0.20s;
  position: absolute;
  right: 2vh;
  margin-top: -6vh;
  font-size: 3.5vh;
  text-decoration: none;
}

.close-button:hover {
  rotate: 90deg;
  transition: 0.20s;
  transform: scale(1.1);
  text-shadow: none;
}

.theme-btn, .bg-btn, .dc-btn, .lang-btn, .misc-btn, .invite-btn, .invite-btn-mobile {
  font-family: 'Lato', 'NotoColorEmoji', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  transition: 0.20s;
  border: none;
  padding: 0.5vh 1vh !important;
  margin-right: 0.5vh !important;
  border-radius: 1vh !important;
  cursor: pointer;
  font-size: 1.5vh !important;
  vertical-align: middle;
}

.invite-btn {
  margin-right: 2.5vh !important;
}

.login-form button:enabled:hover, .theme-btn:enabled:hover, .bg-btn:enabled:hover, .dc-btn:enabled:hover, .lang-btn:enabled:hover, .misc-btn:enabled:hover, .invite-btn:enabled:hover, .invite-btn-mobile:enabled:hover {
  transition: 0.20s;
  transform: scale(1.1);
  background-position: right center;
  /* background-color: #0056b3; */
}

.theme-btn.active, .bg-btn.active, .dc-btn.active, .lang-btn.active, .misc-btn.active, .invite-btn.active, .invite-btn-mobile.active {
  transition: 0.20s;
  border: 0.2vh solid black;
  /* background-color: #90ee90; */
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 1vh;
}

input[type="checkbox"] {
  transition: 0.20s;
  width: 2vh;
  height: 2vh;
  cursor: pointer;
  border: none;
  border-radius: 1vh;
}

input[type="checkbox"]:hover {
  transition: 0.20s;
  border: 0.5vh solid black;
}

input[type="checkbox"]:checked {
  transition: 0.20s;
  border: 0.5vh solid black;
}


/* Footer */
.footer {
  margin-top: 0.5vh;
  font-size: 1.5vh;
  width: 98.6%;
  transition: opacity 750ms ease-in-out, transform 500ms cubic-bezier(1, 0, 0, 1);;
  transform: translate(0, 300%);
  opacity: 0;
}

.footer.active {
  transform: translate(0);
  opacity: 1;
}

/* Character page specific */

.character-container {
    display: flex;
    align-items: center;  /* Vertically aligns the items */
    justify-content: flex-start;
}

.character-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.character-text {
    font-size: 1.8vh;
    margin-left: 2.5vh; /* Adds some space between the text and the portrait */
    flex: 1;  /* Allows the text to take up available space */
}

.character-portrait img {
    height: 77vh; 
	max-width: 45vh;
	object-fit: cover;
    flex-shrink: 0;
    border-radius: 1vh;
}



/* Print Blocker */

DIV.print {
  display: none !important;
  visibility: hidden !important; 
}

@media only print {

	DIV.title-bar,
	DIV.content,
	DIV.footer,
	DIV.footer-mobile,
	DIV.popup {
  		display: none !important;
  		visibility: hidden !important;
	}

	DIV.print {
  		display: block !important;
  		visibility: visible !important;
      	transform: translate(-50%, -50%);
      	opacity: 1;
	  	pointer-events: auto;
	  	user-drag: auto;
	  	user-select: auto;
	  	-moz-user-select: auto;
	  	-webkit-user-drag: auto;
	  	-webkit-user-select: auto;
	  	-ms-user-select: auto;
	}

}