:root{

    --rixel-blue: rgb(0, 24, 80);
    --rixel-blue-dark: rgb(0, 12, 40);
    --rixel-blue-light: rgb(0, 48, 160);
    --rixel-blue-king: rgb(64, 160, 224);
    --rixel-yellow-light: rgb(255, 224, 0);
    --rixel-yellow-dark: rgb(255, 160, 0);
    --rixel-gray-ultra-light: rgb(224, 224, 224);
    --rixel-gray-light: rgb(208, 208, 208);
    --rixel-gray-dark: rgb(192, 192, 192);

    --primary: #692dbd;
    --secondary: #3a86ff;
    --tertiary: #FF006E;
    --quaternary: #FB5607;
    --quinary: #FFBE0B;
    --senary: #00F5D4;
    --septenary: #7CB518;
    --octonary: #FBB02D;
    --nonary: #70E000;

    --denary: #AA0000;
    --undecimary: #AA00AA;
    --duodecimary: #AA5500;
    --tertiusdecimary: #0000AA;

    --app-black: #000000;
    --app-blue: #0d6efd;
    --app-indigo: #6610f2;
    --app-purple: #6f42c1;
    --app-pink: #d63384;
    --app-red: #dc3545;
    --app-orange: #fd7e14;
    --app-yellow: #ffc107;
    --app-green: #198754;
    --app-teal: #20c997;
    --app-cyan: #0dcaf0;
    --app-white: #ffffff;
    --app-gray: #6c757d;
    --app-gray-dark: #343a40;
    --app-gray-light: #adb5bd;
    --app-light: #f8f9fa;
    --app-dark: #212529;
	--app-transparent: #00000000;
  
    --primary-50:  #ede6f7;
    --primary-100: #d2c0eb;
    --primary-200: #b496de;
    --primary-300: #966cd1;
    --primary-400: #804dc7;
    --primary-500: #692dbd;
    --primary-600: #6128b7;
    --primary-700: #5622ae;
    --primary-800: #4c1ca6;
    --primary-900: #3b1198;
    --primary-A100: #d8c9ff;
    --primary-A200: #b396ff;
    --primary-A400: #8e63ff;
    --primary-A700: #7b4aff;
    
    --secondary-50: #e7f0ff;
    --secondary-100: #c4dbff;
    --secondary-200: #9dc3ff;
    --secondary-300: #75aaff;
    --secondary-400: #5898ff;
    --secondary-500: #3a86ff;
    --secondary-600: #347eff;
    --secondary-700: #2c73ff;
    --secondary-800: #2569ff;
    --secondary-900: #1856ff;
    --secondary-A100: #ffffff;
    --secondary-A200: #fdfeff;
    --secondary-A400: #cad7ff;
    --secondary-A700: #b1c3ff;
    
    --tertiary-50: #ffe0ee;
    --tertiary-100: #ffb3d4;
    --tertiary-200: #ff80b7;
    --tertiary-300: #ff4d9a;
    --tertiary-400: #ff2684;
    --tertiary-500: #ff006e;
    --tertiary-600: #ff0066;
    --tertiary-700: #ff005b;
    --tertiary-800: #ff0051;
    --tertiary-900: #ff003f;
    --tertiary-A100: #ffffff;
    --tertiary-A200: #fff2f5;
    --tertiary-A400: #ffbfcb;
    --tertiary-A700: #ffa6b6;

    --quaternary-50: #ffebe1;
    --quaternary-100: #feccb5;
    --quaternary-200: #fdab83;
    --quaternary-300: #fc8951;
    --quaternary-400: #fc6f2c;
    --quaternary-500: #fb5607;
    --quaternary-600: #fa4f06;
    --quaternary-700: #fa4505;
    --quaternary-800: #f93c04;
    --quaternary-900: #f82b02;
    --quaternary-A100: #ffffff;
    --quaternary-A200: #ffeeeb;
    --quaternary-A400: #ffc1b8;
    --quaternary-A700: #ffaa9f;
    
    --font-default-size: 1vw;
    --font-normal: 1.2rem;
  
    --default-transition-duration: 0.25s;
    --default-transition-method: linear;
    --default-transition-target: all;
    --default-transition: var(--default-transition-target) var(--default-transition-duration) var(--default-transition-method);

    /*
     * AVATAR
     */

    --black: rgb(0, 0, 0);
    --eye: rgb(255, 255, 255);
    --monster: rgb(131, 56, 236);
    --patch: rgb(58, 134, 255);
    --pupil: rgb(0, 0, 0);
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-hard: rgba(0, 0, 0, 1);
    --tongue: rgb(255, 175, 204);
    --white: rgb(255, 255, 255);

    --color1: rgb(255, 0, 110);
    --color2: rgb(251, 86, 7);
    --color3: rgb(255, 190, 11);
    --color4: rgb(0, 245, 212);
    --color5: rgb(124, 181, 24);
    --color6: rgb(251, 176, 45);
    --color7: rgb(112, 224, 0);

    --body-width: 1rem;
    --body-ratio: 1.5;
    --body-height: calc(var(--body-width) * var(--body-ratio));

    /*
     * END AVATAR
     */

}

a {
    text-decoration: none;
}

body {
    font-family: 'Roboto', sans-serif;
    height: 100%;
    margin: 0;
    max-height: 100%;
    min-height: 100%;
    overscroll-behavior: none;
    padding: 0;
    overflow-x: hidden;
}

html {
    font-size: calc(3 * var(--font-default-size));
    height: 100%;
    margin: 0;
    max-height: 100%;
    min-height: 100%;
    padding: 0;
}

.content-alert {
    border: 0.1vmin solid var(--tertiary);
    color: var(--tertiary);
    padding-bottom: 1vmin;
    margin-top: 5vmin;
    padding-top: 1vmin;
    text-align: center;
}

.content-avatar {
    left: 50%;
    margin: calc(-0.5 * var(--body-height)) calc(-0.5 * var(--body-width));
    position: fixed;
    top: 50%;
    z-index: 200;
}

.content-box-body {
    padding: 5vmin 2vmin 5vmin 2vmin;
}

.content-box-body span {
    font-weight: 600;
}

.content-box-body-hive a {
    color: var(--primary);
}

.content-box-body-launch a {
    color: var(--tertiary);
}

.content-box-body-triangle a {
    color: var(--secondary);
}

.content-box-card {
    background-color: var(--app-light);
    color: var(--app-gray-dark);
    overflow: hidden;
    border-radius: 2vmin;
}

.content-box-card-resource {
    background-color: var(--nonary);
    color: var(--app-light);
}

.content-box-header {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.2vmin;
    padding-bottom: 1.5vmin;
    padding-top: 1.5vmin;
    text-align: center;
}

.content-box-header span {
    font-weight: 600;
}

.content-box-header-hive {
    background-color: var(--primary);
    color: var(--app-light);
}

.content-box-header-launch {
    background-color: var(--tertiary);
    color: var(--app-light);
}

.content-box-header-radio {
    background-color: var(--quaternary);
    color: var(--app-light);
}

.content-box-header-triangle {
    background-color: var(--secondary);
    color: var(--app-light);
}

.content-box-nest {
    background-color: #00000000;
    height: 100%;
    left: 0;
    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0;
    position: fixed;
    visibility: hidden;
    width: 100%;
    z-index: 300;
}

.content-box-resource-image-row {
    padding-top: 5vmin;
    padding-bottom: 5vmin;
}

.content-box-resource-label-row {
    padding-top: 5vmin;
}

.content-box-resource-label {
    font-size: 1.5rem;
    text-align: center;
}

.content-box-resource-label span {
    font-weight: 600;
}

.content-btn {
    margin-bottom: 1vmin;
    margin-top: 1vmin;
    padding: 1vmin;
    transition: var(--default-transition);
}

.content-btn-hive {
    background-color: var(--primary);
    color: var(--app-light);
}

.content-btn-hive:hover {
    background-color: var(--primary-300);
    color: var(--app-light);
}

.content-btn-launch {
    background-color: var(--tertiary);
    color: var(--app-light);
}

.content-btn-launch:hover {
    background-color: var(--tertiary-300);
    color: var(--app-light);
}

.content-btn-radio {
    background-color: var(--quaternary);
    color: var(--app-light);
}

.content-btn-radio:hover {
    background-color: var(--quaternary-300);
    color: var(--app-light);
}

.content-btn-triangle {
    background-color: var(--secondary);
    color: var(--app-light);
}

.content-btn-triangle:hover {
    background-color: var(--secondary-300);
    color: var(--app-light);
}

.content-label {
    text-align: right;
}

.content-main-content {
    background-color: var(--app-black);
    color: var(--app-light);
    margin: 0;
    min-height: 100%;
    padding: 0;
    z-index: 100;
}

.content-map {
    overflow: hidden;
}

.content-map-disabled {
    filter: blur(6px) brightness(50%) grayscale(1);
    -webkit-filter: blur(6px) brightness(50%) grayscale(1);
    transition: var(--default-transition);
}

.content-page-controls-nest {
    z-index: 400;
}

.content-player-info {
    align-content: center;
    align-items: center;
    color: var(--primary);
    display: inline-flex;
    position: fixed;
    right: 5vmin;
    top: 2vmin;
    z-index: 500;
}

.content-player-info span {
    margin-left: 2vmin;
}

.content-player-info-value {
    color: var(--nonary);
    margin-left: 0;
    min-width: 6vmin;
    width: 6vmin;
}

.content-toast {
    font-size: 1rem;
    padding-left: 2vmin;
    padding-right: 2vmin;
}

.content-toast-error {
    background-color: var(--tertiary) !important;
    color: var(--app-white) !important;
}

.content-toast-info {
    background-color: var(--primary) !important;
    color: var(--app-white) !important;
}

.content-toast-success {
    background-color: var(--septenary) !important;
    color: var(--app-white) !important;
}

.content-value {
    text-align: left;
}

.rixel-cover {
    background-color: #00000080;
    height: 100%;
    left: 0;
    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0;
    position: fixed;
    visibility: hidden;
    width: 100%;
    z-index: 1000;
}

.rixel-cursor-default {
    cursor: default;
}

.rixel-disable-select {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.rixel-flip-horizontally {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.rixel-flip-vertically {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.rixel-full-height {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
}

.rixel-full-width {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.rixel-image-nest img {
    max-height: 100%;
    max-width: 100%;
}

.rixel-justify-text {
    text-align: justify;
}

.rixel-no-margin-and-padding {
    margin: 0;
    padding: 0;
}

.rixel-overflow-hidden {
    overflow: hidden;
}

.rixel-toast {
    background-color: #ffffff;
    border-radius: 0.5vmin;
    bottom: 5%;
    color: #000000;
    cursor: default;
    font-size: 0.5vmin;
    left: 50%;
    max-width: 33vw;
    min-width: 33vw;
    position: absolute;
    transform: translate(-50%, 0px);
    width: 33vw;
    z-index: 2000;
}

.rixel-toast-body {
    font-size: 1vw;
    font-weight: 600;
    padding: 1vmin;
}

/*
 * AVATAR
 */

.avatar-nest {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    padding: 0;
    width: 100%;
}

.avatar {
    position:absolute;
}

.monster {
    background-color: var(--monster);
    border-radius: calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) 0rem 0rem / calc(var(--body-width)* 0.55) calc(var(--body-width)* 0.55) 0rem 0rem;
    height: calc(var(--body-height) * 1);
    width: calc(var(--body-width) * 1);
    animation: dancing alternate infinite 600ms 80ms ease-in-out;
}

.monster:after {
    position: absolute;
    width: calc(var(--body-width) * 1.2);
    height: calc(var(--body-height) * 0.1);
    border-radius: 50%;
    left: calc(var(--body-height) * -0.05);
    z-index: -1;
    bottom: 0%;
    content: "";
    box-shadow: 0 55px 15px var(--shadow-hard);
}

.head {
    border-radius: calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) 0rem 0rem / calc(var(--body-width)* 0.55) calc(var(--body-width)* 0.55) 0rem 0rem;
    overflow: hidden;
    position: sticky;
    height: 100%;
    width: 100%;
}

.bottom {
    background-color: var(--monster);
    border-radius: calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) 0rem 0rem / calc(var(--body-width)* 0.55) calc(var(--body-width)* 0.55) 0rem 0rem;
    height: calc(var(--body-height) * 0.05);
    width: calc(var(--body-width) * 1);
    transform: scaleY(-1);
}

.leg-left {
    position: absolute;
    background-color: var(--monster);
    height: calc(var(--body-height) * 0.5);
    width: calc(var(--body-width) * 0.25);
    right: calc(var(--body-width) * 0.08);
}

.leg-left:before {
    content: '';
    display: block;
    width: calc(var(--body-width) * 0.6);
    height: calc(var(--body-width) * 0.4);
    position: absolute;
    z-index: 2;
    left: calc(var(--body-width) * -0.15);
    top: calc(var(--body-height) * 0.3);
    border-radius: 75% 25% 48% 52% / 93% 92% 8% 7%;
    background-color: var(--monster);
    box-shadow: inset calc(var(--body-width) * -0.1) calc(var(--body-width) * -0.07) var(--shadow);
    transform: scaleX(-1);
}

.leg-right {
    position: absolute;
    background-color: var(--monster);
    height: calc(var(--body-height) * 0.5);
    width: calc(var(--body-width) * 0.25);
    left: calc(var(--body-width) * 0.08);
}

.leg-right:before {
    content: '';
    display: block;
    width: calc(var(--body-width) * 0.6);
    height: calc(var(--body-width) * 0.4);
    position: absolute;
    z-index: 2;
    left: calc(var(--body-width) * -0.2);
    top: calc(var(--body-height) * 0.3);
    border-radius: 75% 25% 48% 52% / 93% 92% 8% 7%;
    background-color: var(--monster);
    box-shadow: inset calc(var(--body-width) * -0.1) calc(var(--body-width) * -0.07) var(--shadow);
}

.patch {
    position: absolute;
    background-color: var(--patch);
    /*animation: change-patch-color 3s infinite;*/
  }

.patch:nth-child(1) {
    border-radius: 29% 55% 61% 23% / 15% 34% 79% 43%;
    height: calc(var(--body-width) * 0.2);
    left: calc(var(--body-width) * 0.2);
    transform: rotate(15deg);
    width: calc(var(--body-width) * 0.3);
}

.patch:nth-child(2) {
    border-radius: 81% 19% 42% 59% / 28% 69% 31% 64%;
    height: calc(var(--body-width) * 0.4);
    left: calc(var(--body-width) * 0.7);
    width: calc(var(--body-width) * 0.6);
    transform: rotate(-35deg);
    top: calc(var(--body-width) * 0.75);
}

.patch:nth-child(3) {
    border-radius: 19% 70% 48% 64% / 50% 61% 39% 52%;
    height: calc(var(--body-width) * 0.45);
    left: calc(var(--body-width) * -0.4);
    width: calc(var(--body-width) * 0.6);
    transform: rotate(-35deg);
    top: calc(var(--body-width) * 0.95);
}

.funiculus {
    background-color: var(--monster);
    position: absolute;
    top: calc(var(--body-width) * -0.6);
    transform-origin: bottom center;
    width: calc(var(--body-width) * 0.15);
    height: calc(var(--body-width) * 0.8);
    left: calc(var(--body-width) * 0.22);
    transform: rotate(-10deg);
    font-size: calc(var(--body-width));
    animation: funiculus-right 7s infinite;
}

.funiculus + .funiculus {
    left: auto;
    right: calc(var(--body-width) * 0.22);
    transform: rotate(10deg);
    animation: funiculus-left 7s infinite;
}

.funiculus:before {
    content: '';
    display: block;
    width: calc(var(--body-width) * 0.4);
    height: calc(var(--body-width) * 0.4);
    position: absolute;
    z-index: 2;
    left: calc(var(--body-width) * -0.12);
    top: calc(var(--body-width) * -0.3);
    border-radius: 50%;
    background-color: var(--monster);
    box-shadow: inset calc(var(--body-width) * -0.1) calc(var(--body-width) * -0.07) var(--shadow);
}
  
.funiculus:after {
    content: '';
    display: block;
    width: calc(var(--body-width) * 0.15);
    height: 100%;
    position: absolute;
    top: calc(var(--body-width) * 0.01);
    left: calc(var(--body-width) * 0.01);
    background-color: var(--monster);
}

.eyes {
    font-size: calc(var(--body-width));
    width: calc(var(--body-width) * 0.7);
    height: calc(var(--body-width) * 0.7);
    position: absolute;
    /* left: 0.15rem; */
    left: calc((var(--body-width) - 0.7rem) / 2);
    top: calc(var(--body-width) * 0.25);
    animation: blinking forwards infinite 10s ease-in-out;
}

.eye-mono-egg-nest{
    display: none;
}

.eye-mono-egg:nth-child(1) {
    background-color: var(--eye);
    border-radius: 50%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: absolute;
    display: flex;
    border-radius: calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) / calc(var(--body-width) * 0.65) calc(var(--body-width) * 0.65)  calc(var(--body-width) * 0.35)  calc(var(--body-width) * 0.35);
    box-shadow: calc(var(--body-width) * 0) calc(var(--body-width) * 0.05) var(--shadow);
  }

.eye-mono-egg:nth-child(2) {
    background-color: var(--eye);
    border-radius: 50%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: absolute;
    display: flex;
    border-radius: calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) calc(var(--body-width) * 0.5) / calc(var(--body-width) * 0.65) calc(var(--body-width) * 0.65)  calc(var(--body-width) * 0.35)  calc(var(--body-width) * 0.35);
    box-shadow: calc(var(--body-width) * 0) calc(var(--body-width) * -0.05) var(--shadow);
}

.eye-mono-ball-nest{
    /*display: none;*/
}

.eye-mono-ball:nth-child(1) {
    background-color: var(--eye);
    border-radius: 50%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: absolute;
    display: flex;
    box-shadow: calc(var(--body-width) * 0) calc(var(--body-width) * 0.05) var(--shadow);
}

.eye-mono-ball:nth-child(2) {
    background-color: var(--eye);
    border-radius: 50%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: absolute;
    display: flex;
    box-shadow: calc(var(--body-width) * 0) calc(var(--body-width) * -0.05) var(--shadow);
}

.pupil {
    background-color: var(--pupil);
    border-radius: 50%;
    height: 50%;
    width: 50%;
    /* position: relative; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25%;
    display: inline-block;
    /*transition: all 0.1s ease;*/
}

.mustache-nest {
    display: none;
}

.mustache-left {
    background-color: var(--pupil);
    border-radius: 91% 9% 56% 44% / 48% 21% 79% 52%;
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.4);
    left: calc(var(--body-width) * 0.15);
    top: calc(var(--body-width) * 1.01);
    position: absolute;
    transform: scaleX(-1)
               rotate(-10deg);
}

.mustache-right {
    background-color: var(--pupil);
    border-radius: 91% 9% 56% 44% / 48% 21% 79% 52%;
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.4);
    left: calc(var(--body-width) * 0.45);
    top: calc(var(--body-width) * 1.01);
    position: absolute;
    transform: rotate(-10deg);
}

.mouth-nest {
    border-radius: calc(var(--body-width) * 0.7) calc(var(--body-width) * 0.7) calc(var(--body-width) * 1.2) calc(var(--body-width) * 1.2);
    height: calc(var(--body-width) * 0.3);
    width: calc(var(--body-width) * 0.5);
    left: calc(var(--body-width) * 0.25);
    top: calc(var(--body-width) * 1.15);    
    position: absolute;
    overflow: hidden;
}

.mouth {
    background-color: var(--black);
    border-radius: calc(var(--body-width) * 0.7) calc(var(--body-width) * 0.7) calc(var(--body-width) * 1.2) calc(var(--body-width) * 1.2);
    height: 100%;
    width: 100%;
    /*overflow: hidden;*/
    animation: yawning forwards infinite 3s ease-in-out;
}

.tongue {
    background-color: var(--tongue);
    border-radius: calc(var(--body-width) * 0.7) calc(var(--body-width) * 0.7) calc(var(--body-width) * 1.2) calc(var(--body-width) * 1.2);
    height: calc(var(--body-width) * 0.3);
    width: calc(var(--body-width) * 0.5);
    top: calc(var(--body-width) * 0.15);
    position: absolute;
    transform: scaleY(-1);
}

.teeth-normal-mono {
    display: none;
}

.teeth-normal-multi {
    display: none;
}

.teeth-normal-long {
    /*display: none;*/
}

.teeth-normal-l1 {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.25);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-l2 {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.35);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-l3 {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.45);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-r1 {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.15);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-r2 {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.05);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-r3 {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * -0.05);
    top: calc(var(--body-width) * 0);
    position:absolute;
}


.teeth-normal-l1-long {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.27);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-l2-long {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.4);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-r1-long {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0.13);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

.teeth-normal-r2-long {
    background-color: var(--white);
    border-radius: 0rem 0rem calc(var(--body-width) * 0.02) calc(var(--body-width) * 0.02);
    height: calc(var(--body-width) * 0.1);
    width: calc(var(--body-width) * 0.1);
    left: calc(var(--body-width) * 0);
    top: calc(var(--body-width) * 0);
    position:absolute;
}

@keyframes blinking {
    0%, 4%, 65%, 67%, 100% {transform: scaleX(1) scaleY(1);} 
    3%, 66% {transform: scaleX(1.2) scaleY(0.01);} 
}

@keyframes dancing {
    to {transform: scaleX(1.02) scaleY(0.98);}
}

@keyframes funiculus-left {
    50% {transform: rotate(20deg);}
}

@keyframes funiculus-right {
    50% {transform: rotate(-20deg);}
}

@keyframes yawning {
    0%, 15%, 100% {transform: scaleX(1) scaleY(1);} 
    10% {transform: scaleX(1.1) scaleY(0.01);} 
}

/*
 * END AVATAR
 */

/** -sm **/
@media (min-width: 576px) {

}

/** -md **/
@media (min-width: 768px) {

    html {
        font-size: calc(1 * var(--font-default-size));
        height: 100%;
        margin: 0;
        max-height: 100%;
        min-height: 100%;
        padding: 0;
    }
    
}

/** -lg **/
@media (min-width: 992px) {

}

/** -xl **/
@media (min-width: 1200px) {

}

/** -xxl **/
@media (min-width: 1440px) {

}