@font-face {
    font-family: Roboto;
    src: url(/assets/logo/Roboto-Black.ttf);
}

:root {
    --logo-size: min(25vw, 25vh);
    --text-height: calc(var(--logo-size) * (2 / 3));
}

#logo-anim-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 9999;
    cursor: hover;
}
#logo-anim-container p {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    margin: 0;
    font-size: 2rem;
    font-family: Roboto;
    color: #ddd;
}

#xjme,
#logo-wrapper {
    position: fixed;
    left: 50vw;
    top: 50vh;
    box-sizing: border-box;
    opacity: 0;
}

#xjme {
    transform: translate(0%, -50%);
    height: var(--text-height);
    padding: 1rem;
}

#logo-wrapper {
    transform: translate(-100%, -50%);
}

.logo-canvas {
    border-radius: 12.5%;
    box-shadow: 5px 5px 5px lightgray;
    width: var(--logo-size);
    height: var(--logo-size);
}

.logo-text {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 9999;
}