:root {
    --font-width: 100;
    --image-set: url(/images/gamma/Avatar_Set_Ringo.png);
    --image-set-opacity: 1;
    --expression-set-opacity: 1;
    --expression-set: url(/images/gamma/Avatar_Emotes.png)
}
  html, body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none; /* Disable text selection */
    -webkit-user-select: none; /* Safari */
  }
body {
    color: #fff;
    text-shadow: 2px 2px hsl(201, 94%, 30%);
    max-width: 100%;
}
#image-hold {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
}
#triangleCanvas {
    display: block;
    position: fixed;
    left: -10vw;
    top: -10vh;
    z-index: -1;
    scale: 1;
}
#container {
    margin: 0;
    /* padding: 12.5vw; */
    padding-top: calc(20px + .4em);
    padding-bottom: calc(20px + 4em);
    position: absolute;
    left: 0;
    top: 0;
    width: 90vw;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    font-family: "Noto Sans", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" var(--font-width);
    box-sizing: border-box;
    max-width: 1280px;
    scrollbar-width: none;
}
@property --shine-position{
    syntax: '<percentage>';
    inherits: false;
    initial-value: -10%;
  }
.glass {
    background: #fff1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-color: #fff5;
    border-width: 4px;
    border-style: solid;
    border-radius: 25px;
    --shine-position: -10%;
    --shine-speed: .7s;
    --shine-width: 10%;
    background: linear-gradient(135deg, rgba(255,255,255,0.066) 0%, rgba(255,255,255,0.066) var(--shine-position), rgba(255,255,255,0.4) calc(var(--shine-position) + 1px), rgba(255,255,255,0.4) calc(var(--shine-position) + var(--shine-width)), rgba(255,255,255,0.066) calc(var(--shine-position) + 3% + 1px), rgba(255,255,255,0.066) 100%);
}
.glass.shine {
    transition:--shine-position var(--shine-speed) ease-out;
    --shine-position: 100%;
}
.panel {
    margin-left: auto;
    margin-right: auto;
    padding: calc(10px + .2em);
    position: relative;
    font-size: 26px;
    box-sizing: border-box;
}
.glass.panel {
    box-shadow: 0 2px 30px rgba(0, 0, 0, .2);
}
.center-panel {
    width: 100%;
    margin-top: 32px;
    min-height: 100px;
}
.double-panel {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    width: 100%;
    justify-content: space-between;
    --shine-speed: .5s;
}
.double-panel>div {
    flex: 1;
    box-sizing: border-box;
    min-height: 100%;
}
.side-by-side {
    overflow-x: scroll;
    scrollbar-width: none;
}
@media (max-width: 900px) {
    .slider-right {
        transform: translateX(calc((100vw - 900px)));
    }
}
@media (max-width: calc(835px + 10vw)) {
    .slider-right-over {
        transform: translateX(calc((90vw - 835px)));
    }
    .slider-right-under {
        transform: translateX(calc((90vw - 835px)));
    }
}
@media (max-width: calc(770px + 10vw)) {
    .slider-right-under {
        transform: translateX(-65px);
    }
}
#headder {
    font-weight: 700;
    padding: .45em;
    font-size: 72px;
    max-width: fit-content;

}
@media (max-width: 700px) {
    #headder {
        font-size: calc(0.102857142857 * 100vw);
    }
}
#headder-logo {
    --logo-size: 1.45em;
    background-image: url(/images/logo.png);
    width: calc(var(--logo-size) * 1.3);
    height: calc(var(--logo-size) * 2);
    position: absolute;
    background-size:contain;
    background-repeat: no-repeat;
    transform: rotate(15deg);
    top: -0.3em;
    right: -.75em;
    transition: scale 1s, filter 1s;
    filter: drop-shadow(4px 4px 0px hsl(201, 94%, 30%));
}
#headder-logo:before {
    content : none !important;
}
#headder:hover #headder-logo {
    filter: drop-shadow(8px 8px 4px hsl(201, 94%, 30%));
    scale: 1.1;
}
.social-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: space-evenly;
    position: relative;
}
.social-icon {
    width: 72px;
    min-width: 0px;
    aspect-ratio: 1 / 1;
    display: block;
    fill: white;
    stroke: #1DABF8;
    stroke-width: 1px;
    stroke-linejoin: round;
    transform: rotate(0deg) translateY(0px);
}
.social-icon>* {
    transition: transform 500ms, filter 500ms;
}
.social-icon:hover>* {
    transform: rotate(10deg) translateY(-10px);
}
.social-icon svg {
    filter: drop-shadow(4px 4px 0px hsl(201, 94%, 30%));
}
.social-icon:hover svg {
    filter: drop-shadow(8px 8px 4px hsl(201, 94%, 30%));
}
.profile {
    background-image: var(--image-set);
    background-position: 60% 8%;
    background-size: 710%;
    background-repeat: no-repeat;
    width: 250px;
    height: 250px;
    position: absolute;
    pointer-events: none;
    opacity: var(--image-set-opacity);
    transition: opacity 1s ease-in-out;
    bottom: -45px;
    /* top: -100px; */
}
.profile-right {
    right: -50px;
}
.profile-left {
    left: -50px;
    transform: scaleX(-1);
}
.profile-left+* {
    margin-left: 175px;
    display: block;
}
.profile-right+* {
    margin-right: 175px;
    display: block;
}
@media (max-width: 700px) {
    .profile-right {
        transform: translateX(calc((100vw - 700px) * -1));
    }
    .profile-left {
        transform: scaleX(-1) translateX(calc((100vw - 700px) * -1));
    }
    .profile-left+* {
        margin-left: calc(175px - ((100vw - 700px) * -1));
    }
    .profile-right+* {
        margin-right: calc(175px - ((100vw - 700px) * -1));
    } 
}
@media (max-width: 525px) {
    .profile-left+* {
        margin-left: 0px;
    }
    .profile-right+* {
        margin-right: 0px;
    }
}
.portrait-main {
    background-image: var(--image-set);
    background-position: 103% 100%;
    background-size: 320%;
    background-repeat: no-repeat;
    opacity: var(--image-set-opacity);
    transition: opacity 1s ease-in-out;
    height: 120%;
    width: 530px;
    height:600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -10%;
}
.portrait-full {
    background-image: var(--image-set);
    background-position: 34.5% 75%;
    background-size: 510%;
    background-repeat: no-repeat;
    opacity: var(--image-set-opacity);
    transition: opacity 1s ease-in-out;
    height: 120%;
    width: 430px;
    height:800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -5%;
}
.portrait-back, .portrait-side {
    background-image: var(--image-set);
    background-size: 900%;
    background-repeat: no-repeat;
    opacity: var(--image-set-opacity);
    transition: opacity 1s ease-in-out;
    width: 300px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    aspect-ratio: 30 / 55;
}
.portrait-back {
    background-position: 53% 90%;
}
.portrait-side {
    background-position: 66% 90%;
}
button {
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.style-button {
    width: 100px;
    height: 100px;
}
.style-button.selected {
    background-color: #0f05;
    border-color: #0f05;
}
.style-button::before {
    content: '';
    display: block;
    background-image: var(--image-set);
    background-position: -1% 90%;
    background-size: 350%;
    background-repeat: no-repeat;
    width: 90px;
    height: 90px;
    margin: auto;
    border-radius: 0px 0px 20px 20px;
}
.button-carousel-container {
    display: flex;
    width: 100%;
    fill: white;
}
.button-carousel {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    display: block;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.button-carousel button {
    scroll-snap-align: start;
}
.button-carousel-container>button {
    transition: transform 500ms;
}
.button-carousel-container>button:hover {
    transform: translate(-5px, 0px);
}
.button-carousel-container>button:last-of-type:hover {
    transform: translate(5px, 0px);
}
#expressions {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    display: block;
    scrollbar-width: none;
}
.expression {
    background-image: var(--expression-set);
    background-position: 8% 10%;
    background-size: 373%;
    background-repeat: no-repeat;
    width: 112px;
    height: 112px;
    opacity: var(--expression-set-opacity);
    transition: opacity 1s ease-in-out, transform 500ms;
}
.expression:active {
    transform: scale(2);
}
[tootip] {
    z-index: -1;

}
[tootip]:hover {
    z-index: 99999999;

}
[tooltip]:after {
    position        : absolute;
    color           : #FFF;
    background-color: #232F34BB;
    border-radius   : 0.25rem;
    padding         : .5rem;
    white-space     : nowrap;
    display         : none;
    font-size       : 1.5rem;
    text-align: center;
    z-index: 999999999;

    content  : attr(tooltip);
    right    : initial;
    left     : 50%;
    top      : 100%;
    transform: translate(-50%, 0px);

    font-family: "Noto Sans", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" var(--font-width);
    text-shadow: 2px 2px hsl(201, 94%, 30%);
    background: #fff1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-color: #fff5;
    border-width: 4px;
    border-style: solid;
    border-radius: 15px;
    transition: transform 500ms, opacity 500ms;
    opacity: 0;
    display : block;
    position: absolute;
    transform: translate(-50%, 0px);
    pointer-events: none;
}
[tooltip]:hover:after {
    opacity: 1;
    transform: translate(-50%, -10px);
}

#style-random-button {
    fill: #1DABF8;
    stroke: #fff;
    stroke-width: .075em;
    stroke-linejoin: round;
    line-height: 0;
    height: 1.5em;
    width: 1.5em;
    opacity: .5;
    transform: translateY(.5em);
    transition: fill 1s, stroke 1s, opacity 1s;
}
#style-random-button svg {
    width: 100%;
    height: 100%;
    transition: transform .5s, filter .5s;
    filter: drop-shadow(2px 2px 0px hsl(201, 94%, 30%));
}
#style-random-button.active {
    fill: #fff;
    stroke: #1DABF8;
    stroke-width: .05em;
    opacity: 1;
}
#style-random-button:hover svg {
    transform: scale(110%);
    filter: drop-shadow(4px 4px 2px hsl(201, 94%, 30%));
}