.portrait-warning {
	color: #00adf1;
    max-width: 50%;
    text-align: center;
    top: 30%;
    left: 20%;
    position: relative;
    font-size: 28px;
    line-height: 6vh;
}

.preloader-counter {
    color: cyan;
    font-weight: bold;
    position: relative;
    font-size: x-large;
    left: 45%;
    top: 90%;
}

.beam {
    pointer-events: none;
    z-index: 100;
    position: fixed;
    width: 17vh;
    height: 17vh;
    margin-top: 4.5vh;
    margin-left: 1.5vh;
    opacity: 0.5;
    animation: 5s rotate linear infinite;
  }
  
.arrow-up {
    position: fixed;
    margin-top: 4.8vh;
    margin-left: 7vh;
    width: 6vh;
    opacity: 0.2;
}
.arrow-down {
    position: fixed;
    margin-top: 16.8vh;
    margin-left: 7vh;
    width: 6vh;
    opacity: 0.2;
}
.arrow-left {
    position: fixed;
    margin-top: 10.8vh;
    margin-left: 1vh;
    width: 6vh;
    opacity: 0.2;
}
.arrow-right {
    position: fixed;
    margin-top: 10.8vh;
    margin-left: 13vh;
    width: 6vh;
    opacity: 0.2;
}

.arrow-transit {
    position: fixed;
    margin-top: 10.6vh;
    margin-left: 7.5vh;
    width: 5vh;
    opacity: 0.25;
}

  @keyframes rotate {
    100% {
      rotate: 1turn;
    }
  }

.preloader-bg {
    z-index: 998;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
}

.preloader {
    z-index: 999;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
}

.preloader-img {
    /* background: url(/bgs/preloader.png)  no-repeat center center fixed; */
    background-size: auto 100%;
    background-color: black;
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-position: right top;
    height: 100%;
}

.preloader12 {
    background: url(/bgs/preloader12.png)  no-repeat center center fixed;
    background-size: contain;
}

.preloader5 {
    background: url(/bgs/preloader5.png)  no-repeat center center fixed;
    background-size: contain;
}

@media screen and (orientation: landscape) {
	.force-landscape {
		display: block !important;
	}	
}

.force-landscape {
    font-family: "Press Start 2P", system-ui;
    z-index: 1000;
    background-color: black;
	display: none;
    width: 120%;
    left: -40px;
    height: 100%;
    position: absolute;
}

.bg-image {
    background-size: auto 100%;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center top;
    height: 100%;
    display: flex;
    justify-content: center;
	/* background-image: url('/bgs/background-final.jpg'); */
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}


.ray-effect{
    width: 8.3vh;
    margin-left: 3.7vh;
    margin-top: -7.4vh;
    margin-bottom: 3.8vh;
    position: relative;
}

.infect-effect{
width: 3.3vh;
    margin-left: -3.3vh;
    margin-top: -7.4vh;
    margin-bottom: 4vh;
    position: relative;
}

.poison-effect{
    width: 3.3vh;
    margin-left: -3.3vh;
    margin-top: -7.4vh;
    margin-bottom: 4vh;
    position: relative;
}

.control-effect{
    width: 4vh;
    margin-left: -9vh;
    margin-top: -7.4vh;
    margin-bottom: 3.2vh;
    position: relative;
}

.spray-effect{
    width: 3vh;
    margin-left: -3.5vh;
    margin-top: -6.4vh;
    margin-bottom: 3.1vh;
    position: relative;
}

.suicide-effect {
/* width: 22vh;
    margin-left: -2.3vh;
    margin-top: -9.4vh;
    margin-bottom: -1.3vh;
    position: relative; */
        z-index: 999;
        width: 10vh;
    margin-left: -0.3vh;
    margin-top: -9.4vh;
    rotate: 494deg;
    margin-bottom: -1vh;
    position: relative;
}

.bite-effect{
    width: 2vh;
    margin-left: -18.3vh;
    margin-top: -7.4vh;
    margin-bottom: 1.7vh;
    position: relative;
}

.oxygen-effect{
    width: 3.3vh;
    margin-left: -17.3vh;
    margin-top: -7.4vh;
    margin-bottom: 3.3vh;
    position: relative;
}

.glow-effect {
    width: 15.3vh;
    margin-left: -2.7vh;
    margin-top: -7.4vh;
    margin-bottom: 3vh;
    position: relative;
}

.panic-effect {
    width: 7.3vh;
    margin-left: -7.6vh;
    margin-top: -7.4vh;
    margin-bottom: 2.3vh;
    position: relative;
}

.stun-effect {
width: 6.3vh;
    margin-left: -6.7vh;
    margin-top: -7.4vh;
    margin-bottom: 2vh;
    position: relative;
}

.lysis-effect {
    width: 7.3vh;
    margin-left: -8.7vh;
    margin-top: -7.4vh;
    margin-bottom: 3vh;
    position: relative;
}

.cure-effect {
    width: 7.3vh;
    margin-left: -5.7vh;
    margin-top: -7.4vh;
    margin-bottom: 3.7vh;
    position: relative;
}

.menu-header {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.5vh;
    font-size: 1.7vh;
	letter-spacing: 1px;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
}


.map-legend-label {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 11.5vh;
    font-size: 0.9vh;
	letter-spacing: 1px;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
}

.map-legend-safe {
    margin-left: 5vh;
    max-width: 11vh;
}

.map-legend-device {
    margin-left: 16vh;
}

.map-legend-quest {
    margin-left: -16vh;
}

.map-legend-puzzle {

    margin-left: -5.5vh;
    width: 7vh;
    word-break: break-all;
}

.map-legend-header {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5vh;
    font-size: 1.7vh;
	letter-spacing: 1px;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
}

.menu-header-bg {
    height: 5.6vh;
	position:fixed;
	left: 50%;
    margin-top: 0.3vh;
  transform: translateX(-50%);
}

.menu-header-panel {
	position: fixed;
    z-index: 10;
}


@keyframes scroll {
	0% { height: 0 }
	100% { height: 100%; }
}

.radar-panel {
 
    height: 100%;
    display: flex;
}

.radar-canvas {
width: 16.8vh;
    position: fixed;
    height: 16.8vh;
    min-height: 16.6vh;
    margin-top: 5vh;
    margin-left: 1.5vh;
}

.connected-button-override {
    touch-action: manipulation;
    background-color: #ffd52c !important;
    border: 2px solid orange !important;
        pointer-events: all !important;

}
.connected-button-override:hover {
background-color: #b38f00 !important;           /* even darker yellow for press */
  border-color: #995900 !important; /* darker orange */
          pointer-events: all !important;
                  transition: none !important;
}

.disabled {
  pointer-events: none;
}

.retro-login-btn {
        pointer-events: none;
    transition: border 3s ease, color 3s ease, background-color 3s ease;
    font-family: "Press Start 2P", system-ui;
    letter-spacing: 0.3vh;
    font-weight: 600;
    position: fixed;
    text-align: center;
    margin-top: 53vh;
    height: 0.6vh;
    width: 17.9vh;
    font-size: 1.1vh;
    background-color: gray;
    border: 2px solid darkgray;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: 1.2vh 0vh 1.5vh 0vh;

    color: #000000;
    text-shadow: 0 0 0.5rem;
}

.retro-login-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
}

.retro-menu-item {
    font-family: "Press Start 2P", system-ui;
    letter-spacing: 2px;
    font-weight: 600;
    position: fixed;
    text-align: center;
    margin-left: 42.6vh;
    margin-top: -6.4vh;
    font-size: 1.1vh;
    background-color: #ffd52c;
    display: grid;
    border-radius: 6px;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: 1vh 1.5vh 1.5vh 1.5vh;
    border: 2px solid #333333;
    color: #000000;
    text-shadow: 0 0 0.5rem;
}

.player-alias {
    font-size: 0.8vh;
    font-family: "Press Start 2P", system-ui;
    color: #00adf1;
    overflow: hidden;
    position: fixed;
    margin-top: -3.2vh;
    margin-left: 8vh;
    max-width: 10.5vh;
    text-overflow: ellipsis;
    line-height: 1.5vh;
    word-wrap: break-word;
    white-space: nowrap;
    position: relative;
}

.player-actions {
    height: 3.4vh;
    display: flex;
    position: relative;
    margin-left: 23.9vh;
margin-top: -3vh;
}

.player-action {
    position: relative;
    width: 4vh;
    margin-left: 0.5vh;
}

.player-action-bg {
    position: relative;
    width: 4vh;
    cursor: pointer;
}

.action-skill-icon {
    position: relative;
    width: 3vh;
    margin-left: -3.5vh;
    margin-bottom: 0.5vh;
}

.player-hazards {
    display: flex;
    height: 3.4vh;
    width: 4vh;
    position: relative;
    margin-left: 21vh;
    margin-top: -4.1vh;
}

.player-hazard {
    position: relative;
    width: 0.4vh;
    height: 1.2vh;
    margin-left: 0.3vh;
    background-color: #663;
}

.rad-effect-level {
    margin-top: 7.3vh;
    margin-left: 1.5vh;
}

.fire-effect-level {
    margin-top: 7.3vh;
    margin-left: 8.5vh;
}

.oxygen-effect-level {
    margin-top: 11.3vh;
    margin-left: 1.5vh;
}

.gravity-effect-level {
    margin-top: 11.3vh;
    margin-left: 5vh;
}

.oxygen-override {
    filter: hue-rotate(180deg) brightness(1.2) saturate(2);
}
@keyframes envBlink {
    from {
        opacity: var(--base-op);
    }
    to {
        opacity: var(--blink-op);
    }
}

.map-capture-not-fogged {
    border: 1px;
    box-sizing: border-box;
    border-style: groove;
    padding: 0;
}

.map-effect-icon {
    width: 1.2vh;
    position: absolute;
    margin-left: 0.8vh;
    margin-top: -0.9vh;
}

.map-rad-effect-icon{
    margin-left: 0.1vh;
    margin-top: -1.5vh;
}

.map-oxygen-effect-icon{
    margin-left: 0.1vh;
    margin-top: 0.3vh;
}

.map-gravity-effect-icon{
    margin-left: 1.4vh;
    margin-top: 0.3vh;
}

.map-fire-effect-icon{
    margin-left: 2.4vh;
    margin-top: -1.5vh;
}

.map-toxins-effect-icon{
    margin-left: 1.4vh;
    margin-top: -1.4vh;
    width: 1vh;
}

.map-tok-effect-icon{
    margin-left: 2.4vh;
    margin-top: 0.3vh;
}





.rad-effect-icon{
    margin-left: 1.8vh;
    margin-top: 5vh;
}

.oxygen-effect-icon{
    margin-left: 1.8vh;
    margin-top: 9vh;
}

.gravity-effect-icon{
    margin-left: 5.3vh;
    margin-top: 9vh;
}

.fire-effect-icon{
    margin-left: 8.8vh;
    margin-top: 5vh;
}

.toxins-effect-icon{
    margin-left: 5.3vh;
    margin-top: 5vh;
}

.tok-effect-icon{
    margin-left: 8.8vh;
    margin-top: 9vh;
}





.tok-effect-level {
    margin-top: 11.3vh;
    margin-left: 8.5vh;
}


.toxins-effect-level {
    margin-top: 7.3vh;
    margin-left: 5vh;
}


.hazard-effect-icon{
    margin-left: 8.8vh;
    margin-top: 13vh;
}


.hazard-effect-level {
    margin-left: 8.5vh;
    margin-top: 15.3vh;
        color: #F1C40F !important;
}


.boost-effect-icon{
    margin-left: 8.8vh;
    margin-top: 17vh;
}


.boost-effect-level {
    margin-left: 8.5vh;
    margin-top: 19.3vh;
}




.control-effect-icon{
    margin-left: 5.3vh;
    margin-top: 13vh;
}


.control-effect-level {
    margin-left: 5vh;
    margin-top: 15.3vh;
        color: #F1C40F !important;
}


.mate-effect-icon{
    margin-left: 5.3vh;
    margin-top: 17vh;
}


.mate-effect-level {
    margin-left: 5vh;
    margin-top: 19.3vh;
}



.paralysis-effect-icon{
    margin-left: 1.8vh;
    margin-top: 13vh;
}

.paralysis-effect-level {
    margin-left: 1.5vh;
    margin-top: 15.3vh;
    color: #F1C40F !important;
}


.safe-effect-icon{
    margin-left: 1.8vh;
    margin-top: 17vh;
}


.safe-effect-level {
    margin-left: 1.5vh;
    margin-top: 19.3vh;
}





.effect-level {
    font-size: 0.8vh;
    font-family: "Press Start 2P", system-ui;
    color: orangered;
    overflow: hidden;
    position: fixed;
    text-align: center;
    width: 3vh;
    line-height: 1.5vh;
    word-wrap: break-word;
    white-space: nowrap;
}

.player-level {
    font-size: 0.8vh;
    font-family: "Press Start 2P", system-ui;
    color: whitesmoke;
    letter-spacing: 0.3vh;;
    overflow: hidden;
    position: fixed;
    margin-top: -3vh;
    margin-left: 8vh;
    max-width: 10.5vh;
    text-overflow: ellipsis;
    line-height: 1.5vh;
    word-wrap: break-word;
    white-space: nowrap;
    position: relative;
}
.wires-bg {

    height: 90%;
    position: fixed;
    margin-bottom: -3vh;

}

.colony-profile-container {
    margin-top: -45vh;
}

.request-panel-offset{
    margin-top: -73vh !important;
    position: fixed;
    z-index: 100;
}

.colony-filters-bg {
    pointer-events: none;
    position: fixed;
    max-height: 14.3vh;
    margin-left: -37.8vh;
    margin-top: -50.5vh;
}

.colony-lower-bg {
    position: fixed;
    max-height: 33vh;
    margin-left: -38.7vh;
    margin-top: 64.7vh;
}

.colony-square-bg {
position: fixed;
    max-height: 59vh;
    margin-left: -35.5vh;
    margin-top: 7vh;
}

.square-puzzle-bg{
    position: fixed;
    max-height: 59vh;
    margin-left: -35.5vh;
    margin-top: 4vh;
}
.tree-bg {
position: fixed;
    max-height: 94%;
    margin-left: -36.5vh;
    margin-top: 6vh;
}
.settings-bg {
	position: fixed;
    max-height: 41%;
    margin-left: 11.5vh;
    margin-bottom: 48vh;

}
.settings-panel-container {
	flex-direction: column;
    height: 100%;
    display: flex;
	width: 100%;
    overflow-y: scroll;
	overflow-x: hidden;
    padding-right: 17px;
    box-sizing: content-box;
    justify-content: space-evenly;
    align-items: center;
}

.retro-container {
	/* font-family: "Press Start 2P", system-ui;
    letter-spacing: 0.6vh;
    font-weight: 300;
    position: fixed;
	text-align: center;
    margin-left: 42.8vh;
    margin-top: -6.4vh;
    height: 0.6vh;
    width: 9.8vh;
	font-size: 0.9vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: 1vh 1.5vh 1.5vh 1.5vh;
    color: #ffffff;
    text-shadow: 0 0 0.5rem;
    cursor: pointer; */

    pointer-events: none;
    transition: border 3s 
ease, color 3s 
ease, background-color 3s 
ease;
    font-family: "Press Start 2P", system-ui;
    letter-spacing: 0.3vh;
    font-weight: 600;
    position: fixed;
    text-align: center;
    margin-top: -6.4vh;
    margin-left: 42.7vh;
    height: 0.6vh;
    width: 12.5vh;
    font-size: 1vh;
    background-color: gray;
    border: 2px solid darkgray;
    display: grid
;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: 1.15vh 0vh 1.2vh 0vh;
    color: #000000;
    text-shadow: 0 0 0.5rem;
}


.theme-text {
	letter-spacing: 1px;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
}

.choice-text-container {
	/* animation: scroll 20s 0s 1;
    position: fixed;
    margin-left: 34.5vh;
    margin-top: -25.5vh;
    max-height: 17.5vh;
    max-width: 20vh;
    font-size: 1.1vh;
    line-height: 1.9vh;
	 */
    animation: scroll 20s 0s 1;
    position: fixed;
    letter-spacing: 0.1vh;
    margin-left: 34.5vh;
    margin-top: -25.8vh;
    max-height: 17.5vh;
    max-width: 20vh;
    font-size: 1.1vh;
    line-height: 1.9vh;

}


.retro-effect {
    mask-image: linear-gradient(to bottom, #0005 10%, #000 20%);
    mask-size: 100% 3px;
}


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

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

.old-crt-monitor {
    background-image: linear-gradient(0deg, #0000 10%, #fff1 90%, #0000 100%);
    animation: crtAnimation 100s linear infinite;
    background-size: 100% 80%;
}

.old-crt-monitor-avatar {
    background-image: linear-gradient(0deg, #0000 10%, #fff1 90%, #0000 100%);
    animation: crtAnimation 20s linear infinite;
    background-size: 100% 80%;
}

.old-crt-monitor-fast {
    background-image: linear-gradient(0deg, #0000 18%, #bbb9 74%, #0000 100%);
    animation: crtAnimation 100s linear infinite;
    background-size: 100% 80%;
    border-radius: 3px;
}

.old-crt-monitor-radar {
    background-image: linear-gradient(0deg, #0000 18%, #1b13 74%, #0000 100%);
    animation: crtAnimation 100s linear infinite;
    background-size: 100% 80%;
    border-radius: 3px;
}

.old-crt-monitor-effect {
    background-image: linear-gradient(0deg, #0000 18%, #b116 74%, #0000 100%);
    animation: crtAnimation 10s linear infinite;
    background-size: 100% 80%;
    border-radius: 3px;
}

.old-crt-monitor-fast:active {
    background-image: linear-gradient(0deg, #0000 18%, rgba(187, 187, 187, 0.6) 74%, #0000 100%);
    animation: crtAnimation 10s linear infinite;
    background-size: 100% 80%;
}


@keyframes continuousRotate {
    from {
        transform: rotate(0deg); /* Start at 0 degrees */
    }
    to {
        transform: rotate(360deg); /* End at 360 degrees */
    }
}

.ui {
    z-index: 10;
}

.choice-panel {
	margin-bottom: -6px;
}

.choice-bg {

    max-height: 35vh;
}

.choice-img {
	position: fixed;
    margin-left: -53vh;
    margin-top: 12.5vh;
    max-height: 10.5vh;
}

.vint {
    margin-left: 38.8vh;
    position: fixed;
    margin-top: 63vh;
    max-height: 17.5vh;
    animation: continuousRotate 100s linear infinite;
}


.evolution-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 95vh;
    position: absolute;
    margin-left: -37vh;
}

.main-content {
    overflow: hidden;
}

.top-section {
    height: 34.75%;
    justify-content: center;
    display: flex;
}

.menu-panel {
	width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: auto;
}

.effects-bg {
    /* max-height: 79%;
    margin: auto 0 0 auto;
    margin-bottom: 13px;
    margin-right: -8px;
    margin-left: -7px; */
    max-height: 20vh;
    /* max-width: 100%; */
    margin: auto 0 0 auto;
    position: fixed;
margin-top: 3vh;
    margin-right: 0.5vh;
    margin-left: -14vh;
}

.effects-panel {
    width: 100%;
    height: 100%;
    display: flex;
    margin-left: -0.2vh;
}

.radar-bg {
    max-height: 89%;

    margin-top: 2.6vh;
}

.vitamins-menu {
position: fixed;
    margin-left: -79vh;
    margin-top: 2.7vh;
}

.margin-1 {
    margin-top: 1vh;
}

.vitamins-bg {
max-height: 7vh;
    /* margin-top: 11%; */
    margin-top: -2.9vh;
    margin-left: 64vh;
}

.switch-bg {
    width: 48vh;
    margin-top: 0.75vh;
    position: absolute;
    pointer-events: none;
}

.location-bg {
	max-height: 97.3%;
    margin-top: 0.75vh;
}

.edge-glare {
    max-height: 35%;
    min-height: 3.6%;
    position: absolute;
    pointer-events: none;
}

.mask-opacity {
    opacity: 0.5 !important;
}

.force-opacity {
    opacity: 1 !important;
}

.glow-button {

    animation: pulseTint 1s infinite ease-in-out;
}


.tutorial-glow-5 {

    animation: pulseTint 1s infinite ease-in-out !important;
}

.tutorial-glow {

    animation: pulseTint 0.2s infinite ease-in-out !important;
}

.tutorial-glow-2 {

    animation: pulseTint2 0.2s infinite ease-in-out;
}

.tutorial-glow-4 {

    animation: pulseTint4 1s infinite ease-in-out;
}

.tutorial-glow-3 {

    animation: pulseTint3 0.2s infinite ease-in-out;
}

@keyframes pulseTint {
  0% {
    filter: sepia(1) saturate(5) hue-rotate(30deg) brightness(0.5);
  }
  50% {
    filter: sepia(1) saturate(6) hue-rotate(30deg) brightness(1.3);
  }
  100% {
    filter: sepia(1) saturate(5) hue-rotate(30deg) brightness(0.5);
  }
}

@keyframes pulseTint2 {
  0% {
    filter: sepia(1) saturate(5) hue-rotate(270deg) brightness(0.5);
  }
  50% {
    filter: sepia(1) saturate(6) hue-rotate(270deg) brightness(1.3);
  }
  100% {
    filter: sepia(1) saturate(5) hue-rotate(270deg) brightness(0.5);
  }
}

@keyframes pulseTint3 {
  0% {
    filter: sepia(1) saturate(5) hue-rotate(320deg) brightness(0.5);
  }
  50% {
    filter: sepia(1) saturate(6) hue-rotate(320deg) brightness(1.3);
  }
  100% {
    filter: sepia(1) saturate(5) hue-rotate(320deg) brightness(0.5);
  }
}
@keyframes pulseTint4 {
  0% {
    filter: grayscale(1) brightness(0.5);
  }
  50% {
    filter: grayscale(1) brightness(1.5);
  }
  100% {
    filter: grayscale(1) brightness(0.5);
  }
}
/* 
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 8px #aeb46f,
                0 0 16px rgba(174, 180, 111, 0.8),
                0 0 24px rgba(174, 180, 111, 0.5);
  }
  50% {
    box-shadow: 0 0 16px #aeb46f,
                0 0 32px rgba(174, 180, 111, 0.9),
                0 0 48px rgba(174, 180, 111, 0.7);
  }
  100% {
    box-shadow: 0 0 8px #aeb46f,
                0 0 16px rgba(174, 180, 111, 0.8),
                0 0 24px rgba(174, 180, 111, 0.5);
  }
} */

.center-panel {
	width: 100%;
	display: flex;
    height: 24%;
    margin-left: 1vh;
}

.opaque {
    opacity: 0.2;
}

.chat-settings {

    width: 14.5vh;
    height: 5vh;

    /* max-height: 21.5%; */
    margin-left: 0.5vh;
}


.effect-icon{
    max-height: 2.2%;
    min-height: 1.6%;
    position: absolute;
    padding: unset;
}

.reminder-2 {
        margin-top: 5vh;
    margin-left: 11vh;
}

.reminder-3 {
    margin-top: 9.6vh;
    margin-left: 5.2vh;
}

.reminder-4 {
    margin-top: 9.6vh;
    margin-left: 11vh;
}

.reminder-5 {
margin-top: 14vh;
    margin-left: 5.2vh;
}

.menu-item {
    width: 1.8vh;
    position: absolute;
    padding: unset;
}

.menu-item-reminder {
    width: 1.8vh;
    position: absolute;
    padding: unset;
}

.main-menu {
    max-height: 75%;
    margin: 0 auto;
    margin-top: 0.3vh;
    position: fixed;
    width: 27vh;
    margin-top: 5.3vh;
}

.menu-item-left {
    margin-left: 3vh;
}

.menu-item-right {
    margin-left: 8.8vh;
}


.menu-item-1 {
    margin-top: 6.8vh;
    margin-left: 3.1vh;
}

.menu-item-2 {
    margin-top: 6.9vh;
}

.menu-item-3 {
    margin-top: 11.4vh;
    width: 2vh;
}

.menu-item-4 {
    margin-top: 11.4vh;
}


.menu-item-5 {
    margin-top: 15.9vh;
    margin-left: 3.1vh;
}

.menu-item-6 {
    margin-top: 15.9vh;
}

.menu-item-7 {
    margin-top: 20.5vh;
    margin-left: 3.1vh;
}

.menu-item-8 {
    margin-top: 20.5vh;
}

.bottom-panel {
	width: 100%;
    height: 41.25%;
    overflow-y: scroll;
    box-sizing: content-box;
}

.player-panel {
    /* margin-bottom: 1.5vh; */
    margin-bottom: -2.5vh;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.gray {
    background-color: gray;
}

.wound-1 {
    width: 6vh;
    margin-left: -4.3vh;
    margin-top: -2.5vh;
    /* margin-bottom: 88vh; */
    position: relative;
}

.wound-2 {
width: 11.5vh;
    height: 5vh;
    margin-left: 0.8vh;
    margin-top: -7.5vh;
    margin-bottom: 2.4vh;
    position: relative;
}

.wound-3 {
    width: 4.3vh;
    height: 1.7vh;
    margin-left: 2.3vh;
    margin-top: -7.4vh;
    margin-bottom: 5.7vh;
    position: relative;
}

.wound-4 {
width: 8.3vh;
    /* height: 1.7vh; */
    margin-left: -14.7vh;
    transform: rotate(182deg);
    margin-top: -6.4vh;
    margin-bottom: 2.2vh;
    position: relative;
}

.death-splat {
width: 7.3vh;
    /* height: 1.7vh; */
    margin-left: -13.7vh;
    margin-top: -7.4vh;
    margin-bottom: 1.7vh;
    position: relative;
}

.colony-filters-id {
    margin-bottom: -2.2vh !important;
    margin-left: -0.7vh;
}

.colony-avatar {
    position: fixed;
    width: 40.5vh;
    margin-top: 23.25vh;
    margin-left: -20.6vh;
}

.colony-description-btn {
margin-left: -6.3vh;
    position: fixed;
    width: 12.2vh;
    height: 0.4vh;
    font-size: 0.9vh;
    margin-top: 88.2vh;
    padding: 0.3vh 0 0.8vh 0;
    letter-spacing: 0.1vh;
}

.upload-logo-btn {
        z-index: 10;
    margin-left: -6.4vh;
    position: fixed;
    line-height: 1.5vh;
    width: 13.2vh;
    height: 1vh;
    font-size: 1vh;
    margin-top: 41vh;
    padding: 1vh 0 2.5vh 0;
    letter-spacing: 0.1vh;
}

.top-level-btn {
    margin-left: -19vh;
    position: fixed;
    width: 9.2vh;
    height: 0.4vh;
    font-size: 2vh;
    margin-top: -41.4vh;
    padding: 0.5vh 0 2vh 0;
    letter-spacing: 0.1vh;
}

.vitamin-a {

}

.vitamin-b1 {
    margin-left: -30vh !important;
}
.vitamin-b5 {
    margin-left: -27.8vh !important;
}
.vitamin-b9 {
    margin-left: -25.6vh !important;
}
.vitamin-b12 {
    margin-left: -23.4vh !important;
}
.vitamin-c {
    margin-left: -21.2vh !important;
}
.vitamin-d {
    margin-left: -19.0vh !important;
}
.vitamin-e {
    margin-left: -16.8vh !important;
}
.vitamin-k {
    margin-left: -14.6vh !important;
}
.vitamin-pp {
    margin-left: -12.4vh !important;
}

.vitamin-active {
    filter: brightness(0.85) saturate(0.9) !important;
}

.no-interaction {
  user-select: none;         /* disables text selection */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* old Edge */
  touch-action: none;        /* disables touch gestures */

}

.vitamin-base{
    width: 1.6vh;
    filter: brightness(0.5) saturate(0);
    margin-top: -1.9vh;
    padding: 0.5vh 0.5vh 0.5vh 0.5vh;
    position: fixed;
    margin-left: -32.2vh;
}

.defense-bonus {
    background: yellow !important;
}

.info-colony-btn{
    margin-left: -19vh;
    position: fixed;
    width: 9.2vh;
    height: 0.4vh;
    font-size: 2.1vh;
    margin-top: -43.1vh;
    padding: 0vh 0 2.5vh 0;
    letter-spacing: 0.1vh;
}

.colony-filters-container{
    z-index: 100;
}

.top-capture-btn {
    margin-left: 8.5vh;
    position: fixed;
    width: 9.2vh;
    height: 0.2vh;
    font-size: 2.2vh;
    margin-top: -41.4vh;
    padding: 0vh 0 2.7vh 0;
    letter-spacing: 0.1vh;
}

.requests-colony-btn{
margin-left: 8.5vh;
    position: fixed;
    width: 9.2vh;
    height: 0.4vh;
    font-size: 2.3vh;
    margin-top: -43.1vh;
    padding: 0vh 0 2.5vh 0;
    letter-spacing: 0.1vh;
}

.force-black {
    filter: brightness(0);
}

.top-iq-btn{
    margin-left: -5.2vh;
    position: fixed;
    width: 9.2vh;
    height: 0.4vh;
    font-size: 1.8vh;
    margin-top: -41.4vh;
    padding: 0.2vh 0 2.3vh 0;
    letter-spacing: 0.1vh;
}

.members-colony-btn{
margin-left: -5.2vh;
    position: fixed;
    width: 9.2vh;
    height: 0.4vh;
font-size: 1.8vh;
    margin-top: -43.1vh;
    padding: 0vh 0 2.5vh 0;
    letter-spacing: 0.1vh;
}


.synthesize-btn{
        margin-left: 47vh;
    position: absolute;
    width: 7.7vh;
    /* height: 1.4vh; */
    font-size: 0.85vh;
    margin-top: -6.7vh;
    padding: 0.5vh 0 0.5vh 0;
    letter-spacing: 0.1vh;
    /* margin-left: 46.9vh;
    position: absolute;
    width: 8.15vh;
    height: 1.4vh;
    font-size: 0.85vh;
    margin-top: -7vh;
    padding: 3.7 0 0 0;
    letter-spacing: 0.1vh; */
}

.player-bg {
    max-height: 6.2vh;
}

.player-avatar {
/* position: relative;
    width: 4vh;
    margin-top: -2.2vh;
    margin-left: 2.5vh; */
        position: relative;
    width: 4.2vh;
    margin-top: -2.2vh;
    margin-left: 2.3vh;
    padding: 0;
    border: 0;
    background-color: black;
}

.skill-text-container {
    animation: scroll 20s 0s 1;
    position: relative;
    margin-left: 11.5vh;
    margin-top: -11.3vh;
    margin-bottom: 0vh;
    max-height: 16.5vh;
    min-height: 15vh;
    max-width: 20vh;
    font-size: 0.9vh;
    line-height: 1.55vh;
}

	
.skill-panel-container {

    flex-direction: column;
    height: 100%;
    display: flex;
    width: 100vh;
    overflow-y: scroll;
        margin-left: -39vh;
    /* margin-left: -50vh; */
    position: absolute;
    overflow-x: hidden;
    padding-right: 17px;
    box-sizing: content-box;
    justify-content: space-evenly;
    align-items: center;
}


.skill-panel {
    margin-bottom: -0.6vh;
}

.empty-panel {

min-height: 7vh;
}

.skill-bg {
margin-left: -21.5vh;
    position: relative;
    max-height: 17.5vh;
}
	
.skill-up {

    margin-left: -56.1vh;
    max-height: 1.8vh;
    margin-bottom: 4vh;
    position: relative;
}	

.skill-icon {

    margin-left: -34.5vh;
    max-height: 5.5vh;
    margin-bottom: 10.3vh;
    color: red;
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(65deg);
    margin-top: -12.8vh;
}	

.green-filter {
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(65deg);
}

.red-filter {
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(-40deg);
}

.blue-filter {
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(-200deg);
}

.purple-filter {
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(-185deg);
}

.can-upgrade-highlight-label {
    margin-left: -18vh !important;
}

.skill-plus {


    margin-left: 31.5vh;
    margin-right: -1.5vh;
    width: 4.5vh;
    margin-bottom: 5.7vh;
    margin-top: -4vh;
    position: relative;

}	
	
	
.skill-info-container {

position: relative;


}	
	
.color-theme {
    color: #aeb46f;
}

.color-microbe {
    color: #18F;
}

	.skill-bar{
    position: relative;
    background-color: green;
    width: 5.8vh;
    max-width: 5.9vh;
    height: 1.1vh;
margin-top: -7.4vh;
    margin-left: 0.9vh;
    border-radius: 0 10px 10px 0;
	}
.skill-bar-percent{
position: relative;
    height: 1vh;
    width: 5vh;
    margin-bottom: 0vh;
    margin-top: -1.1vh;
    margin-left: 1.5vh;
    letter-spacing: 1px;
    color: white;
    text-align: end;
    font-size: 0.8vh;
		
	}
	
.skill-lvl {


    margin-top: -4.2vh;
    width: 2vh;
    margin-left: -1.6vh;
    font-size: 0.7vh;
    text-align: center;
    letter-spacing: -1px;

}	



.hp-bar-container {
	position: fixed !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 12.6vh;
    height: 1.1vh;
	padding: 0.3vh;
	background: #0007;
    /* -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	 */
	margin-left: -31.5vh;
    margin-top: 1.2vh;
}
.hp-bar {
  background: #c22;
  width: 12vh;
  height: 0.5vh;
  position: relative;
  
  transition: width .5s linear;
}

.hp-hit {
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  
  transition: width .5s linear;
}

.hp-icon {
    position: fixed;
    width: 2vh;
    margin-left: -1.5vh;
    margin-top: -1.1vh;
}

.ownership-info {
        position: fixed !important;
margin-left: 2.6vh;
    margin-top: 1.2vh;
    opacity: 0.7;
}

.capture-info {
    position: fixed !important;
margin-left: -8.4vh;
    margin-top: 1.2vh;
    opacity: 0.7;
}

.owner-img {
position: relative;
    width: 2vh;
}

.contender-img {
    position: relative;
    width: 2vh;
}

.capture-cell-red {
    border-color: orangered;
}

.capture-cell-yellow {
    border-color: yellow;
}

.capture-cell-white {
    border-color: #888;
}

.map-capture-timer-lbl {
    position: fixed;
    /* color: white; */
    color: #DDD;
    font-size: 0.75vh;
    /* margin-left: 43.3vh; */
    width: 4.8vh;
    letter-spacing: 0.05vh;
    height: 1.1vh;
    padding: 0.4vh 0vh 0.45vh 0.8vh;
    margin-top: -2.3vh;
    margin-left: -0.6vh;
}

.capture-timer {
    position: fixed;
    background-color: black;
    /* color: white; */
    color: #DDD;
    font-size: 0.9vh;
    /* margin-left: 43.3vh; */
    border-color: #AAA;
    border-style: ridge;
    width: 4.8vh;
    letter-spacing: 0.1vh;
    height: 1.1vh;
    padding: 0.4vh 0vh 0.45vh 0.8vh;
    margin-top: -2.6vh;
    margin-left: 2.85vh;
}


.contender-info {
    position: fixed;
    /* background-color: black; */
    /* margin-left: 43.3vh; */
        border-color: #AAA;
    margin-top: -2.6vh;
    margin-left: 9.3vh;
    border-style: ridge;

}

.crown-img {
    position: relative;
    width: 2vh;
}

.crown-info {
    position: fixed;
    border-color: #AAA;
    border-style: ridge;
    margin-top: 0vh;
    margin-left: -2.9vh;
}


.owner-info {
        border-color: #AAA;
    border-style: ridge;
}

.ep-bar-container {
	position: fixed !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 12.6vh;
    height: 1.1vh;
	padding: 0.3vh;
	background: #0007;
    /* -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; */
		
	margin-left: -31.6vh;
	margin-top: 2.8vh;
}
.ep-bar {
  background: #18F;
  width: 12vh;
  height: 0.5vh;
  position: relative;
  
  transition: width .5s linear;
}

.ep-hit {
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  transition: width .5s linear;
}

.ep-icon {
    position: fixed;
    width: 2vh;
    margin-left: -1.4vh;
    margin-top: -1vh;
}

.yellow-log {
    color: yellow !important;
}

.red-log {
    color: red !important;
}

.red {
    background-color: red !important;
}

.green-log {
    color: #bde040 !important;
}

.orange-log {
    color: orange !important;
}

.yellow-log2 {
    background-color: yellow !important;
}

.red-log2 {
    background-color: red !important;
}

.green-log2 {
    background-color: #bde040 !important;
}

.orange-log2 {
    background-color: orange !important;
}

.retro-bar {

    mask-image: linear-gradient(to bottom, #0005 50%, #000 50%);
    mask-size: 100% 3px;
}

.location-icon-center {
    width: 1.6vh;
    margin-left: 6.8vh;
    margin-top: 1.9vh;
    position:fixed;
}

.location-icon-left {
    width: 1.6vh;
    margin-left: 2.3vh;
    margin-top: 1.9vh;
    position:fixed;
}

.location-icon-right {
    width: 1.6vh;
    margin-left: 11.1vh;
    margin-top: 1.9vh;
    position:fixed;
}

.active-location-icon {
    filter: sepia(100%) saturate(1000%) brightness(100%) hue-rotate(-225deg);
}

.answer-info{
    margin-top: 67vh;
    margin-left: -16.5vh;
    font-size: 1.1vh;
    position: fixed;
    line-height: 2vh;
    white-space: pre-line;
    /* margin-top: -82vh; */
    /* margin-left: 1vh; */
    color: white;
    font-family: "Press Start 2P", system-ui;
}

.answer-correct {
    color: yellowgreen !important;
}

.answer-wrong {
    color: orangered !important;
}

.quest-info{
    margin-top: 1vh;
    margin-left: -16.5vh;
    font-size: 1.1vh;
    position: fixed;
    line-height: 2vh;
    white-space: pre-line;
    /* margin-top: -82vh; */
    /* margin-left: 1vh; */
    color: white;
    font-family: "Press Start 2P", system-ui;
}

.location-info {
    position: fixed;
    letter-spacing: -0.02vh;
    width: 14.5vh;
    margin-top: 1.3vh;
    margin-left: 30.5vh;
    max-height: 23.5vh;
    padding: 0.8vh;
    font-family: "Press Start 2P", system-ui;
    color: white;
    font-size: 0.9vh;
    line-height: 1.25vh;
    background: #0007;
    /* -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; */
    border: 2px;
    border-color: #888;
    border-style: ridge;
}

.submit-button {
    cursor: pointer;
}



.green-text {
    color: green;
    animation: scroll 20s 0s 1;
}

.red-text {
    color: red;
    animation: scroll 20s 0s 1;
}

.chat-container {
    position: fixed;
    margin-right: -31vh;
    margin-top: 1.3vh;
    width: 16vh;
    overflow-y: scroll;
    height: 29vh;
}


.chat-message-sender {
color:white;
margin: 0;
    max-width: 13.5vh;
    text-overflow: ellipsis;
    line-height: 1.5vh;
    white-space: nowrap;
    overflow-x: clip;
}

.chat-message {

    width: 14vh;
    margin-bottom: 0.2vh;

    padding: 0.8vh;
    font-family: "Press Start 2P", system-ui;
    color: #CCC;
    font-size: 0.9vh;
    line-height: 1.25vh;
    background: #0007;
    /* -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; */

}

.input-container {

    position: fixed;
margin-top: 31.1vh;
    margin-left: 22vh;
}
::placeholder {
    color: #CCC;
    opacity: 1; /* Firefox */
}


.quest-input {
    position: fixed;
    background-color: 110000;
    height: 2.6vh;
    padding-left: 1vh;
    width: 20vh;
    margin-top: 60.9vh;
    color: whitesmoke;
    margin-left: -13vh;
    border-style: ridge;
    border-color: darkgray;
    font-size: 1.1vh;
}


.message-input {
    position: fixed;
    background-color: #1118;
    height: 2.5vh;
    padding-left: 1vh;
    width: 17vh;
    color: whitesmoke;
    margin-left: -11.54vh;
    border-style: ridge;
    border-color: darkgray;
    font-size: 1.1vh;
}

.quest-submit-button {
    transition: border 3s 
ease, color 3s 
ease, background-color 3s 
ease;
    font-family: "Press Start 2P", system-ui;
    /* letter-spacing: 0.3vh; */
    font-weight: 600;
    line-height: 1.7vh;
    /* position: fixed; */
    text-align: center;
    margin-top: 60.7vh;
    margin-left: 7vh;
    position: fixed;
    height: 2.1vh;
    /* width: 2.9vh; */
    font-size: 1.1vh;
    background-color: gray;
    border: 2px solid darkgray;
    display: grid;
    width: 4.6vh;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: 0.6vh 0vh 0vh 0.3vh;
    color: #000000;
    text-shadow: 0 0 0.5rem;
}

.message-submit-button {
    position: fixed;
    background-color: black;
    margin-left: 5.3vh;
    border: 2px;
    border-style: ridge;
    width: 3.1vh;
    height: 3vh;
    margin-top: -0.5vh;
    opacity: 0.5;
}

.puzzle-toggle-button {
    position: fixed;
    background-color: black;
    margin-left: 43.3vh;
    border: 2px;
    border-style: ridge;
    width: 3.1vh;
    height: 3vh;
    margin-top: 30.6vh;
    opacity: 0.5;
}

.quest-toggle-button {
    position: fixed;
    background-color: black;
    margin-left: 43.3vh;
    border: 2px;
    border-style: ridge;
    width: 3.1vh;
    height: 3vh;
    margin-top: 30.6vh;
    opacity: 0.5;
}

.device-toggle-button {
    position: fixed;
    background-color: black;
    margin-left: 43.3vh;
    border: 2px;
    border-style: ridge;
    width: 3.1vh;
    height: 3vh;
    margin-top: 30.6vh;
    opacity: 0.5;
}


.global-chat-toggle-button {
    position: fixed;
    background-color: black;
    margin-left: 43.3vh;
    border: 2px;
    border-style: ridge;
    width: 3.1vh;
    height: 3vh;
    margin-top: 30.6vh;
    opacity: 0.5;
}

.local-chat-toggle-button {
    position: fixed;
    background-color: black;
    margin-left: 43.3vh;
    border: 2px;
    border-style: ridge;
    width: 3.1vh;
    height: 3vh;
    margin-top: 30.6vh;
    opacity: 0.5;
}


.puzzle5 {
	cursor: pointer;

}

.lever-item {
    width: 5vh;
}

.lever-image {
    position: fixed;
    width: 41.2vh;
    margin-top: -8vh;
    height: 40.6vh;
    margin-left: 1.3vh;
}

.lever {
width: 13vh;
    /* margin: 0 auto; */
    margin-top: 30.5vh;
    margin-left: 10.6vh;
}

.lever-input-row {
    display: flex;
    /* width: 80%; */
    width: 2vh;
    padding: 1vh;
    /* margin: 0 auto; */
    /* margin-top: 2vh; */
    height: 3.5vh;
    position: relative;
}


.quiz .hatch {
    background: url(/images/puzzles/hatch.png) no-repeat center top;
    width: 100%;
    max-width: 415px;
    max-height: 415px;
    height: 130%;
    background-size: cover;
	margin: 0 auto;
}

.manhole .input-row {
    margin-bottom: 0.5vh !important;
    display: inline-flex
;
}

.refraction .input-row {
    display: inline-flex;
    top: 12px;
    left: 31px;
    position: relative;
}

.manhole .input-row input {
background: url(/images/puzzles/hole-input.png) no-repeat center top;
    height: 3vh;
    width: 8%;
    background-size: contain;
    position: relative;
    font-size: 2vh;
    border: none;
    color: #fff;
    text-align: center;
    /* width: 9vh; */
    /* line-height: 190%; */
    /* padding: 0; */
    margin: 0px;
}



.manhole {
    background: url(/images/puzzles/2.png) no-repeat center top;
    background-size: cover;
    margin: 0 auto;
    height: 43vh;
    margin-top: 20vh;
}

.device-img {
    width: 2vh;
    margin-left: 0.5vh;
    margin-top: 0.5vh;
}

.puzzle-img{
    width: 1.5vh;
    margin-left: 0.8vh;
    margin-top: 0.8vh;
}

.quest-img{
    width: 1.5vh;
    margin-left: 0.8vh;
    margin-top: 0.8vh;
}

.chat-submit-img {
    width: 2vh;
    margin-left: 0.5vh;
    margin-top: 0.8vh;
}

.stat-menu-header {
    margin-top: 2vh !important;
    font-size: 0.9vh !important;
    letter-spacing: 0.8px;
    margin-left: 0.5vh;
}

.puzzle-menu-header{
    font-size: 1vh !important;
    margin-top: 1.8vh;
}
/* 
font-size: 1vh;
    position: fixed;
    margin-top: 5vh;
    font-family: "Press Start 2P", system-ui;
    text-align: left;
    margin-left: 17vh;
    color: #aeb46f;
    border: 0px;
    background-color: rgba(0, 0, 0, .5); */

.colony-description-label{
    font-size: 1.2vh !important;
    margin-top: 70.8vh;
    width: 42vh;
height: 15vh;
    line-height: 2vh;
    position: fixed;
    white-space: pre-line;
    /* left: 50%; */
    margin-left: 0vh;
    transform: translateX(-50%);
    /* letter-spacing: 1px; */
    font-family: "Press Start 2P", system-ui;
    /* color: #aeb46f; */
        color: #aeb46f;
border: 0px;
    background-color: rgba(0, 0, 0, .1);
}

.map-location-header {
    font-size: 1.3vh !important;
margin-top: 70.8vh;
    width: 42vh;
    line-height: 2vh;
    position: fixed;
    white-space: pre-line;
    /* left: 50%; */
    margin-left: 25vh;
    transform: translateX(-50%);
    /* letter-spacing: 1px; */
    font-family: "Press Start 2P", system-ui;
    /* color: #aeb46f; */
    color: white;
}

.quote-header {
    font-size: 1.3vh !important;
    margin-top: 75.8vh;
    width: 42vh;
    /* margin-top: 75.8vh;
    width: 35vh; */
    line-height: 2vh;
    position: fixed;
    white-space: pre-line;
    /* left: 50%; */
    margin-left: 46vh;
    transform: translateX(-50%);
    /* letter-spacing: 1px; */
    font-family: "Press Start 2P", system-ui;
    /* color: #aeb46f; */
    color: white;
}

.skill-menu-header {
    font-size: 1.3vh !important;
    margin-top: 1.8vh;
}

.stat-panel-container {

	flex-direction: column;
    height: 100%;
    display: flex;
	width: 100%;
    overflow-y: scroll;
	overflow-x: hidden;
    padding-right: 17px;
    box-sizing: content-box;
    justify-content: space-evenly;
    align-items: center;
}


.top-item-panel {
    margin-bottom: 1.5vh;
    margin-top: 1vh;
    font-size: 1vh;
    word-spacing: -3px;
    margin-left: 66vh;
    width: 100vh;
    display: flex;
       
    }


.colony-item-panel {
    margin-bottom: 1.5vh;
    margin-top: 1vh;
    font-size: 1vh;
    word-spacing: -3px;
    margin-left: 66vh;
    width: 100vh;
    display: flex;
       
    }


.stat-panel {
    margin-bottom: 1.5vh;
    margin-top: 1vh;
    font-size: 1vh;
    word-spacing: -3px;
    margin-left: 66vh;
    width: 100vh;
    display: flex;
       
    }
    
    .stat-container {
    position: fixed;
    margin-top: 12vh;
        height: 72vh;
        overflow-y: scroll;
        
    }
    
    .stat-text-container {
        font-size: 0.9vh;
        width: 25.5vh;
    
    
        letter-spacing: 0.5px !important;
    }
    
    .stat-hp {
        margin-top: -80.3vh;
        width: 2.5vh;
        margin-left: -33vh;
        position: fixed;
        filter: sepia(100%) saturate(200%) brightness(120%) hue-rotate(15deg);
    }
    
    .stat-ep {
        margin-top: -80.5vh;
        width: 2vh;
        margin-left: -6vh;
        position: fixed;
        filter: sepia(100%) saturate(200%) brightness(120%) hue-rotate(15deg);
    }
    
    .stat-iq {
    margin-top: -80.5vh;
        width: 2.5vh;
        margin-left: 21.5vh;
        position: fixed;
        filter: sepia(100%) saturate(200%) brightness(120%) hue-rotate(15deg);
    }
    
    .exit-colony-btn {
        margin-left: 5.5vh;
    }

    .colony-list-about {
        font-size: 0.85vh;
    margin-top: -64.8vh;
    margin-left: 21vh;
        position: fixed;
        color: #ff5c00 !important;
    }

    .top-list-about {
        font-size: 0.85vh;
    margin-top: -64.8vh;
    margin-left: 21vh;
        position: fixed;
        color: #ff5c00 !important;
    }

    .stat-points {
        font-size: 0.9vh;
        margin-top: -66vh;
        margin-left: 21vh;
        position: fixed;
    }
    
    .colonies-request-panel{
        position: fixed;
        max-height: 9.2vh;
        margin-left: 9vh;
        margin-bottom: 82vh;
    }
    
    .colonies-bg {

        position: fixed;
        max-height: 100%;
        margin-bottom: -2vh;
        pointer-events: none;
    }

    .stat-bg {
        position: fixed;
        max-height: 100%;
        margin-bottom: -1vh;
    }

    .request-panel-container{
        margin-top: -91vh;
        margin-left: -63vh;
    }


    .colony-request-btn {
        transition: border 3s ease, color 3s ease, background-color 3s ease;
        font-family: "Press Start 2P", system-ui;
        letter-spacing: 0.3vh;
        font-weight: 600;
        /* position: fixed; */
        text-align: center;
        margin-top: -0.7vh;
        margin-left: 6.5vh;
        height: 1.2vh;
        /* width: 2.9vh; */
        font-size: 1.1vh;
        background-color: gray;
        border: 2px solid darkgray;
        display: grid;
        width: 1.6vh;
        grid-template-rows: auto 1fr auto;
        overflow: hidden;
        padding: 0.1vh 0vh 0.3vh 0.3vh;
        color: #000000;
        text-shadow: 0 0 0.5rem;
    }

    .decline-colony-btn {
            margin-left: 1.2vh;
    }

    .accept-colony-btn {
            margin-left: 2vh;
    }

    .accept-colony-btn,
    .exit-colony-btn,
    .decline-colony-btn {
        transition: border 3s 
    ease, color 3s 
    ease, background-color 3s 
    ease;
        font-family: "Press Start 2P", system-ui;
        letter-spacing: 0.3vh;
        font-weight: 600;
        /* position: fixed; */
        text-align: center;
        margin-top: -0.7vh;
        height: 1.2vh;
        /* width: 2.9vh; */
        font-size: 1.1vh;
        background-color: gray;
        border: 2px solid darkgray;
        display: grid;
        width: 1.6vh;
        grid-template-rows: auto 1fr auto;
        overflow: hidden;
        padding: 0.4vh 0vh 0vh 0.3vh;
        color: #000000;
        text-shadow: 0 0 0.5rem;
    }

    .stat-up {
        transition: border 3s 
ease, color 3s 
ease, background-color 3s 
ease;
    font-family: "Press Start 2P", system-ui;
    letter-spacing: 0.3vh;
    font-weight: 600;
    /* position: fixed; */
    text-align: center;
    margin-top: -0.7vh;
    height: 1.2vh;
    /* width: 2.9vh; */
    font-size: 1.1vh;
    background-color: gray;
    border: 2px solid darkgray;
    display: grid;
    width: 1.6vh;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: 0.4vh 0vh 0vh 0.3vh;
    color: #000000;
    text-shadow: 0 0 0.5rem;
        /* margin-top: -0.8vh;
        width: 2.2vh;
        position: relative;
        filter: sepia(100%) saturate(200%) brightness(120%) hue-rotate(25deg); */
    }

    .exit-menu {
        margin-top: 1.1vh;
        width: 3.5vh;
        left: 50%;
        opacity: 0;
        transform: translateX(-50%);
        margin-left: 14.8vh;
        position: fixed;
        /* filter: sepia(100%) saturate(200%) brightness(120%) hue-rotate(25deg); */
    }
    
    .iq-stats {
    font-size: 1.3vh;
        position: fixed;
        margin-top: -80vh;
        margin-left: 30vh;
    
    }
    
    
    .hp-stats {
    font-size: 1.3vh;
        position: fixed;
        margin-top: -80vh;
        margin-left: -25vh;
    }
    
    .ep-stats {
    font-size: 1.3vh;
        position: fixed;
        margin-top: -80vh;
        margin-left: 2.5vh;
    
    }
    
    .top-value {
        font-size: 0.9vh;
        width: 6.5vh;
        letter-spacing: -0.1vh;
        margin-left: 4vh;
    }
    
    .stat-value {
        font-size: 0.9vh;
        width: 6.5vh;
        letter-spacing: -0.1vh;
    }

.tissue-table {

	width: 100%;
    height: 100%;
}

.tissue-cell {
}

.puzzle-map-bg{
    margin-bottom: -5vh;
    position: fixed;
    max-height: 94vh;
    margin-left: -37.5vh;
    margin-top: 7vh;
}

.degrode-map-bg {
    margin-top: -8vh !important;
}

.preloader-animation{
    position: fixed;
    height: 73vh;
    margin-bottom: 27vh;
}

.quest-bg {
        position: fixed;
    margin-left: -38vh;
    max-height: 95%;
    margin-top: -9vh;
}

.map-bg {
    position: fixed;
    max-height: 95%;
    margin-bottom: -5vh;

}
.tissue-container {
position: fixed;
    margin-top: -39.6vh;
    height: 43vh;
    width: 43vh;
  
	
}


.material-panel-first {
margin-left: 0.5vh !important;
}

.material-big-bg {

position: relative;
max-height: 9.1vh;
}	

.material-panel {
margin-bottom: -2.3vh;

}

.material-label-big {
font-size: 1.1vh;
    position: absolute;
    margin-top: -6.3vh;
    margin-left: 20.5vh;
    color: white;
    font-family: "Press Start 2P", system-ui;
}

.material-label {
    font-size: 1vh;
    position: absolute;
    margin-top: -6.1vh;
    margin-left: 21vh;
    color: lightslategray;
    font-family: "Press Start 2P", system-ui;
}

.material-price {
    font-size: 1vh;
    position: absolute;
    margin-top: -6.1vh;
    margin-left: 38vh;
    letter-spacing: 0.1vh;
    color: lightcyan;
    font-family: "Press Start 2P", system-ui;
}

.material-price-big {
font-size: 1.1vh;
    position: absolute;
    letter-spacing: 0.1vh;
    margin-top: -6.3vh;
    margin-left: 37.5vh;
    color: white;
    font-family: "Press Start 2P", system-ui;

}


.material-bg {

position: relative;
    max-height: 8.3vh;
}
	
.material-color {

    position: absolute;
    margin-top: -6vh;
    margin-left: 19.6vh;
    background-color: lightslategray;
    width: 0.7vh;
    height: 0.7vh;
}

.material-big-color {

position: absolute;
    margin-top: -6.7vh;
    margin-left: 16.6vh;
    background-color: lightslategray;
    width: 1.7vh;
    height: 1.7vh;
}



.material-container {

    overflow-x: hidden;
    position: fixed;
    margin-top: -32vh;
    height: 34vh;
    overflow-y: scroll;
    scrollbar-width: none;
}



.material-panel-container {

	flex-direction: column;
	height: 100%;
    display: flex;
	margin-top:-51vh;;
	width: 100%;
    overflow-y: scroll;
	overflow-x: hidden;
    padding-right: 17px;
    box-sizing: content-box;
    justify-content: space-evenly;
    align-items: center;
	
}
.tissue-up{
	width: 4.1vh;
    position: absolute;
    margin-top: 43.7vh;
     margin-left: 30.9vh;
}
.tissue-bottom{
    width: 3.5vh;
    position: absolute;
    margin-top: 52.0vh;

    margin-left: 31.45vh;
}
.tissue-left{
    width: 3.7vh;
    position: absolute;

    margin-top: 48vh;
    margin-left: 27.2vh;
}
.tissue-right{
width: 3.7vh;
    position: absolute;
    margin-top: 48.0vh;

    margin-left: 35.5vh;
}
.tissue-bg {
position: fixed;
max-height: 62vh;
    margin-bottom: 27vh;

}

.map-row {

}

.map-cell-capture {
    background-color: #333333;
}

.map-cell-fogged {
    opacity: 0.25;
}

.map-cell-info {
    background-color: #440;
}

.map-cell-self {
    border: 1px;
    box-sizing: border-box;
    border-style: groove;
    border-color: lawngreen;
    padding: 0;
}

.map-cell-empty {
    background-color: #110;
}

.map-cell-quest,
.map-cell-safe,
.map-cell-device,
.map-cell-puzzle {
    width: 1.8vh;
    position: absolute;
    /* padding: 0vh; */
    margin-left: 0.8vh;
    margin-top: -0.9vh;
}
.map-table {
    width: 100%;
    height: 100%;
}

.map-legend-quest-icon{

    margin-left: 4.6vh;
}

.map-legend-safe-icon{

    margin-left: 25.6vh;
}

.map-legend-device-icon{

    margin-left: 36.6vh;
}

.map-legend-puzzle-icon {
margin-top: 6.3vh !important;
    margin-left: 14.6vh;
    width: 2.5vh !important;
}

.map-legend-icon {
    width: 3vh;
        margin-top: 6vh;
    position: absolute;
    filter: brightness(0) saturate(100%) invert(77%) sepia(13%) saturate(507%) hue-rotate(36deg) brightness(95%) contrast(88%);
}

.map-cell {
	/* width: 5vh;
    height: 4vh; */
}
.map-container {
    position: fixed;
    margin-top: -16vh;
    height: 64vh;
    width: 44vh;
    /* overflow-y: scroll; */
	
}

.map-legend {
    position: fixed;
    margin-top: 123vh;
    height: 64vh;
    width: 44vh;
    /* overflow-y: scroll; */
}

.common-panel-container {

	flex-direction: column;
height: 100%;
    display: flex;
	width: 100%;
    overflow-y: scroll;
	overflow-x: hidden;
    padding-right: 17px;
    box-sizing: content-box;
    justify-content: space-evenly;
    align-items: center;
}

input[type="range"] {
  accent-color: #00ff66; /* modern browsers */
}

.colony-request-label{
    font-size: 0.85vh;
    position: fixed;
    margin-top: 2.5vh;
    margin-left: 28vh;
    color: white;
    font-family: "Press Start 2P", system-ui;
}

.username-label {
	font-size: 1.1vh;
    position: fixed;
    margin-top: -82vh;
    margin-left: 1vh;
	color: white;
	font-family: "Press Start 2P", system-ui;
}

.settings-menu-header {
    font-size: 1.2vh;
    margin-top: 1.8vh;
}

.tissue-menu-header {
    font-size: 1.1vh;
    margin-top: 1.8vh;
    letter-spacing: 0px !important;
}

.tissue-menu-highlight-label {
    font-size: 1.1vh;
    position: fixed;
    margin-top: 2.2vh;
    margin-left: -19.6vh;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
    width: 6vh;
    text-align: right;
}

.tree-wrapper {
    height: 84vh;
    width: 43vh;
    position: absolute;
    margin-top: 11vh;
    margin-left: -21.8vh;
}
.molecule {
max-width: 45.3vh;
min-height: 66.5vh;
}

.degrode-description {
    margin-top: 1vh;
    margin-left: -15.5vh;
    font-size: 1vh;
    position: fixed;
    line-height: 2vh;
    white-space: pre-line;
    /* margin-top: -82vh; */
    /* margin-left: 1vh; */
    color: white;
    font-family: "Press Start 2P", system-ui;
}

.puzzle-1-info-1 {
margin-top: -64vh;
    margin-left: 3.5vh;
    font-size: 1vh;
    position: fixed;
    line-height: 2vh;
    white-space: pre-line;
    /* margin-top: -82vh; */
    /* margin-left: 1vh; */
    color: white;
    font-family: "Press Start 2P", system-ui;
}
.puzzle1-label3 {
    color: #aeb46f !important;
}

.puzzle-1-info-2 {
margin-top: -9.8vh;
    margin-left: 3.5vh;
    font-size: 1.4vh;
    position: fixed;
    line-height: 2vh;
    white-space: pre-line;
    /* margin-top: -82vh; */
    /* margin-left: 1vh; */
    color: white;
    font-family: "Press Start 2P", system-ui;
}


.screen-dna .btns {
    margin-top: 61vh;
    margin-left: 10vh;
    position: fixed;
    display: flex;
    max-width: 45.3vh;
}

.degrode-btn {
        transition: border 3s 
ease, color 3s 
ease, background-color 3s 
ease;
}

.degrode-btn-block{
    margin-top: 56vh !important;
    margin-left: -10vh !important;
}

.screen-dna .btns div {
display: inline-block;
    /* background: hsla(180, 100%, 51%, 0.39); */
    /* color: #fff; */
    /* max-width: 45.3vh; */
    /* min-height: 66.5vh; */
    /* height: 2vh; */
    padding: 0.8vh 1.5vh;
    /* border-radius: 1000%; */
    margin: 1vh;
    /* margin-top: 3%; */
    font-weight: bolder;

    pointer-events: all !important;
    transition: border 3s 
ease, color 3s 
ease, background-color 3s 
ease;
    font-family: "Press Start 2P", system-ui;
    /* letter-spacing: 0.3vh; */
    font-weight: 600;
    /* z-index: 998; */
    /* position: fixed; */
    /* text-align: center; */
    margin-top: -0.7vh;
    /* height: 1.2vh; */
    /* width: 2.9vh; */
    font-size: 1.1vh;
    background-color: gray;
    border: 2px solid darkgray;
    display: grid;
}

.screen-dna .btns div:hover {background: hsla(0, 100%, 51%, 0.99);}
.screen-dna {
    margin-top: 14vh;
}

/* .puzzle-panel2 {
        height: 66.8vh;
    width: 45vh;
    position: absolute;
    margin-top: 12vh;
    margin-left: -22.7vh;
} */

.puzzle-panel {
height: 78.7vh;
    width: 43.8vh;
    position: absolute;
    margin-top: -2.2vh;
    margin-left: -22.2vh;
}

.tree-container {
    height: 100%;
    width: 99%;
    position: absolute;
    overflow-x: auto;
}

.hormone-symbol{
    font-size: 1.4vh;
    margin-top: 1.5vh;
    margin-left: -13vh;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
    position: fixed;
}

.tissue-symbol{
    font-size: 1.4vh;
    margin-top: 1.5vh;
    margin-left: -13vh;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
    position: fixed;
}

.puzzle-stat-iq {
    width: 2vh;
    margin-top: 1.7vh;
    margin-left: -13.8vh;
    position: fixed;
}

.map-filter-info {
    margin-top: -3.7vh;
    margin-left: 29.8vh;
        font-size: 1.3vh !important;
    padding: 0.8vh 0.3vh 0.6vh 0.7vh !important;
}

.map-filter-capture {
    margin-top: -3.7vh;
    font-size: 2vh !important;
    margin-left: 34.4vh;
    font-weight: 400 !important;
        padding: 0vh 0.7vh 1.5vh 0.4vh !important;
}

.map-filter-hazard {
    margin-top: -3.7vh;
    font-size: 1.8vh !important;
    margin-left: 38.7vh;
    padding: 0vh 0.6vh 1.5vh 0.5vh !important;
}

.map-filter {
transition: border 3s 
ease, color 3s 
ease, background-color 3s 
ease;
    font-family: "Press Start 2P", system-ui;
    letter-spacing: 0.3vh;
    font-weight: 600;
    position: fixed;
    /* position: fixed; */
    text-align: center;

    height: 1.2vh;
    /* width: 2.9vh; */
    font-size: 1.1vh;
    background-color: gray;
    border: 2px solid darkgray;
    border-radius: 1.4vh;
    /* display: grid; */
    width: 1.6vh;
    grid-template-rows: auto 1fr auto;
    padding: 0.8vh 0.4vh 0.5vh 0.7vh;
    color: #000000;
    text-shadow: 0 0 0.5rem;
}

.map-panel-container{
    margin-top: -vh;
}

.stat-lvl-symbol{
    margin-left: -12.6vh !important;
}
.stat-highlight-label{
    margin-left: -18.6vh !important;
}

.map-highlight-label {
    margin-left: -18.6vh !important;
}

.lvl-symbol {
    font-size: 2.4vh;
    margin-top: 0.8vh;
    margin-left: -13.6vh;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
    position: fixed;
}

.evolution-symbol{
    font-size: 1.4vh;
    margin-top: 1.4vh;
    margin-left: -13.6vh;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
    position: fixed;
}

.colony-highlight-label{
    font-size: 0.8vh;
    position: fixed;
    margin-top: 2.2vh;
    margin-left: -19.6vh;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
    width: 6vh;
    text-align: right;
}

.preloader-offset {
    position: fixed;
    height: 100vh;
    margin-left: -4vh;
}

.menu-highlight-label{
    font-size: 0.8vh;
    position: fixed;
    margin-top: 2.2vh;
    margin-left: -19.6vh;
    font-family: "Press Start 2P", system-ui;
    color: #aeb46f;
    width: 6vh;
    text-align: right;
}


.belok-highlight-label{
    font-size: clamp(6px, 0.6vh, 18px);
    /* font-size: 0.6vh; */
    position: fixed;
    margin-top: -5.2vh;
    margin-left: 103.8vh;
    font-family: "Press Start 2P", system-ui;
    color: #8FAFA8;
    width: 6vh;
    text-align: right;
}

.belok-icon-highlight-label {
    font-size: 0.8vh;
    position: fixed;
    margin-top: -5.4vh;
    margin-left: 105vh;
    font-family: "Press Start 2P", system-ui;
    color: #8FAFA8;
    width: 6vh;
    text-align: right;
}

.tissue-stats-label{
font-size: 0.85vh;

    position: absolute;
    line-height: 1.2vh;
    margin-top: 18.8vh;
    margin-left: -16.6vh;
    font-family: "Press Start 2P", system-ui;
    color: white;
    width: 20vh;
    height: 9vh;
    text-align: left;
    white-space: pre-line;
    /* font-size: 0.85vh;
    position: absolute;
    line-height: 1.2vh;
    margin-top: 20.2vh;
    margin-left: -16.6vh;
    font-family: "Press Start 2P", system-ui;
    color: white;
    width: 20vh;
    height: 7vh;
    text-align: left; */
}

.tree-menu-header{
    font-size: 0.9vh;
    margin-top: 2vh;
    margin-left: 0.5vh;
}

.map-menu-header{
    margin-top: 2vh !important;
    font-size: 1.1vh !important;
    letter-spacing: 0.8px;
    margin-left: 0.5vh;
}

.request-panel-input{
font-size: 1vh;
width: 27vh;
    position: fixed;
    margin-top: 5vh;
    font-family: "Press Start 2P", system-ui;
    text-align: left;
    margin-left: 17vh;
    color: #aeb46f;
    border: 0px;
    background-color: rgba(0, 0, 0, .5);
}


.change-alias-input{

    font-size: 1.1vh;
    position: fixed;
    margin-top: -76.3vh;
    font-family: "Press Start 2P", system-ui;
    text-align: left;
    margin-left: -10vh;
    color: #aeb46f;
    border: 0px;
    background-color: rgba(0, 0, 0, .5);
}

.colony-description-label,
.request-panel-input:focus,
.change-alias-input:focus{
  outline: none;

}

.copy-to-clipboard{
    font-size: 1.5vh;
    position: fixed;
    margin-top: -29.5vh;
    color: #aeb46f;
    margin-left: 35vh;
    font-family: "Press Start 2P", system-ui;
}

.music-trigger-button{
    font-size: 1.5vh;
    position: fixed;
    margin-top: -56vh;
    color: #aeb46f;
    margin-left: 27vh;
    font-family: "Press Start 2P", system-ui;
}

.music-on-status{
    font-size: 1.5vh;
    position: fixed;
    margin-top: -56vh;
    color: white;
    margin-left: 31vh;
    font-family: "Press Start 2P", system-ui;
}

.music-off-status{
    font-size: 1.5vh;
    position: fixed;
    margin-top: -56vh;
    color: #ff5c00;
    margin-left: 31vh;
    font-family: "Press Start 2P", system-ui;
}

.sound-on-status{
    font-size: 1.5vh;
    position: fixed;
    margin-top: -51.6vh;
    color: white;
    margin-left: 31vh;
    font-family: "Press Start 2P", system-ui;
}

.sound-off-status{
    font-size: 1.5vh;
    position: fixed;
    margin-top: -51.6vh;
    color: #ff5c00;
    margin-left: 31vh;
    font-family: "Press Start 2P", system-ui;
}

    
.request-panel-button {
    font-size: 1.5vh;
    position: fixed;
    margin-top: 4.5vh;
    color: #aeb46f;
    margin-left: 45vh;
    font-family: "Press Start 2P", system-ui;
}

.sound-trigger-button{
    font-size: 1.5vh;
    position: fixed;
    margin-top: -51.6vh;
    color: #aeb46f;
    margin-left: 27vh;
    font-family: "Press Start 2P", system-ui;
}

.change-alias-button {
    font-size: 1.5vh;
    position: fixed;
    margin-top: -76.7vh;
    color: #aeb46f;
    margin-left: 34vh;
    font-family: "Press Start 2P", system-ui;

}
.referral-link{
    font-size: 1vh;
    position: absolute;
    margin-top: -29.7vh;
    letter-spacing: 0.1vh;
    color: #aeb46f;
    width: 50vh;
    margin-left: 17vh;
    font-family: 'PT Sans', 'sans-serif';
}

.music-delimiter-container {
margin-top: -53.7vh;
    margin-left: -1vh;
    position: fixed;
    pointer-events: none;
}

.music-delimiter {

border: 0;
  height: 2px;               /* thickness of the line */
  width: 34vh;


  background: linear-gradient(
    to right,
    rgba(174,180,111,0),   /* fully transparent at the left edge */
    rgba(174,180,111,1) 50%, /* strongest in the center */
    rgba(174,180,111,0)    /* fully transparent at the right edge */
  );
}

.sound-label{
font-size: 1.1vh;
    position: absolute;
    margin-top: -51.5vh;
    color: #aeb46f;
    margin-left: -18vh;
    width: 15vh;
    font-family: "Press Start 2P", system-ui;
}

.hormone-title{
animation: scroll 20s 0s 1;
font-size: 1vh;
    position: absolute;
    margin-top: -10.2vh;
    text-align: left;
    line-height: 1.5vh;
    color: #aeb46f;
    margin-left: 14vh;
    width: 19vh;
    font-family: "Press Start 2P", system-ui;
}
.hormone-icon{
mask-size:auto !important;font-size: 1.4vh;
}
.music-label{
    font-size: 1.1vh;
    width: 15vh;
    position: absolute;
    margin-top: -55.7vh;
	text-align: left;
    color: #aeb46f;
    margin-left: -18vh;
    font-family: "Press Start 2P", system-ui;
}

.power-icon {
    width: 1.4vh;
    margin-top: 0.1vh;
    fill: #aeb46f;
}

.content-offset {
margin-top: 4vh;
}


.body-offset {
    transform: scale(0.92);
      overflow: hidden;          /* disables scrolling */
}


.margin-0{
margin:0;
}

.referral-description {
    font-size: 0.8vh; 
    line-height: 1.2vh;
    width: 36vh;
letter-spacing: 0.2vh;
    position: fixed;
    margin-top: -22.7vh;
    text-align: left;
color: #ff5c00;
    margin-left: -1vh;
    font-family: "Press Start 2P", system-ui;
}

.hormone-description{

    width: 36vh;

    position: absolute;
    margin-top: -5.8vh;
    text-align: left;
color: #ff5c00;
font-size:0.9vh;
    margin-left: 36.2vh;
    font-family: "Press Start 2P", system-ui;
}

.greyed-out {
    color: grey !important;
}

.colony-list-about-offset {
    margin-top: -65.6vh;
}

.request-description-offset {
    margin-top: 6.5vh !important;
}

.request-panel-description{
font-size: 0.8vh;
    margin-top: 6.8vh;
    line-height: 22px;
    width: 36vh;
    position: fixed;
    text-align: left;
    color: #ff5c00;
    margin-left: 24vh;
    font-family: "Press Start 2P", system-ui;
}

.change-alias-description {

    font-size: 0.85vh;
    line-height: 22px;
    width: 36vh;

    position: fixed;
    margin-top: -70.2vh;
    text-align: left;
    color: #ff5c00;
    margin-left: 16.8vh;
    font-family: "Press Start 2P", system-ui;
}

.reflink-label {
    color: #aeb46f;
	font-size: 1.1vh;
    position: fixed;
    margin-top: -35.8vh;
	color: white;
	font-family: "Press Start 2P", system-ui;
}