:root {
    --gleeby-gradient: linear-gradient(to right, #00ff40 0%, #73ff96 65%);
}

@font-face {
    font-family: 'GLEEBYFONT';
    src: url('../assets/fonts/STARSEEDSPERSONALUSE-Regular.eot');
    src: url('../assets/fonts/STARSEEDSPERSONALUSE-Regular.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/STARSEEDSPERSONALUSE-Regular.woff2') format('woff2'),
        url('../assets/fonts/STARSEEDSPERSONALUSE-Regular.woff') format('woff'),
        url('../assets/fonts/STARSEEDSPERSONALUSE-Regular.ttf') format('truetype'),
        url('../assets/fonts/STARSEEDSPERSONALUSE-Regular.svg#STARSEEDSPERSONALUSE-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alien Moon';
    src: url('../assets/fonts/AlienMoon.woff2') format('woff2'),
        url('../assets/fonts/AlienMoon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #242424;
    font-family: 'GLEEBYFONT';
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}

gleeby-player {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #242424;
    visibility: hidden;
}

gleeby-player.player-visible {
    visibility: visible;
}

.gleeby-gradient {
    background: var(--gleeby-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

.gleeby-gradient:hover {
    cursor: pointer;
}

body>h1,
h1 {
    font-size: 10em !important;
    color: green;
    font-weight: 100;
    margin: 0;
}

body>h1>a {
    font-size: inherit;
}

body>div>div>h1 {
    text-align: center;
}

.gleeby-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.gleeby-div>div {
    width: 100dvw;
}

.gleeb-gif {
    width: 20% !important;
}

.gleeby-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    font-family: Alien Moon;
    font-size: 2.5em;
    text-align: center;
    background: var(--gleeby-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gleeby-list p,
.gleeby-list a {
    margin: 10px;
    padding: 0;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    width: min-content;
}

#gleeby-list {
    list-style: none;
    padding: 0;
}

#gleeby-list li {
    padding: 10px;
    cursor: pointer;
}


#gleeby-list li::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--gleeby-gradient);
    transition: width 0.25s;
}

#gleeby-list li:hover::after {
    width: 100%;
}

#profile-popup {
    font: 1em sans-serif;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #272727;
    border-radius: 15px;
    color: #00ff40;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.356);
    width: 300px;
    padding: 20px;
    z-index: 1000;
}


.hidden {
    display: none;
}

.popup-content {
    position: relative;
}

.ships {
    position: fixed;
    width: 100%;
    pointer-events: none;
}

.ships img {
    height: 60px;
    user-select: none;
    pointer-events: none;
}

.ship-move {
    animation: moveRight 1.7s ease-in-out;
}

@keyframes moveRight {
    from {
        transform: translateX(-5%);
    }

    to {
        transform: translateX(100%);
    }
}

.gleeby-people {
    font: 1em sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.div-left {
    width: 35%;
    transition: 0.4s ease-in-out;
    user-select: none;
}

.div-right {
    align-self: stretch;
    font-size: 1.5em;
    color: #4beb73;
    position: relative;
    width: 0;
    transition: 0.4s ease-in-out;
    will-change: width;
    overflow: hidden;
    line-break: loose;
    unicode-bidi: isolate;
    align-self: stretch;
    background-color: #1b1b1b;
    border-radius: 10px;
    /*border: 1px solid #60db7f;*/
}

.gleeb-profile{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.div-right[data-show="true"] {
    width: 30%;
}

.div-right .banner{
    height: 140px;
    object-fit:fill;
}

.div-right .content{
    padding: 10px;
}