@import url(https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap);

html {
  height: 100%;
}

body {
    background: url(./sprites/bg/limbo_loading_screen.png) fixed;
    background-size: cover;
    height: 100%;
    background-position: center;
    margin: 0;
}

.dance-container {
    /*position: absolute;
    left: 0;
    top: 0;*/
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dance-inner {

}

.dance-item {
    position: absolute;
    transform: translate(-50%, -50%);
    --dance-spin-distance: 200px;/*260px;*/
    --dance-spin-speed: 6s;
}

#minos {
    transform: translate(-39%, -60%);
}

#cocco {
    animation: dance-spin var(--dance-spin-speed) linear 0s,
        dance-depth var(--dance-spin-speed) step-end 0s;
    animation-iteration-count: infinite;
    transform: translate(-50%, -50%) rotate(var(--dance-spin-angle)) translateX(var(--dance-spin-distance)) rotate(calc(var(--dance-spin-angle) * -1));
}

#scarmi {
    animation: dance-spin var(--dance-spin-speed) linear calc(var(--dance-spin-speed)/2 * -1),
        dance-depth var(--dance-spin-speed) step-end calc(var(--dance-spin-speed)/2 * -1);
    animation-iteration-count: infinite;
    transform: translate(-50%, -50%) rotate(var(--dance-spin-angle)) translateX(var(--dance-spin-distance)) rotate(calc(var(--dance-spin-angle) * -1));
}

@keyframes dance-spin {
  0% { --dance-spin-angle: 0deg; }
  100% { --dance-spin-angle: 360deg; }
}

@property --dance-spin-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes dance-depth {
    0% { z-index: 1; }
    50% { z-index: -1; }
}

#logo {
    max-width: 100%;
}

.main-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paper-frame {
    border: 35px solid black;
    border-image: url(/shrine/vg/hellmaiden/sprites/ui/Paperborder_horizontal.webp) 5% 7% round;
    background-image: url(/shrine/vg/hellmaiden/sprites/ui/Paperbackground2.webp);
    background-size: 100% 100%;
    background-clip: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
}

#quick-desc {
    margin: 32px;
    font-family: 'Alegreya',serif;
    color: #f5f5f5;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
}

a {
    color: #f5f5f5;
    font-weight: bold;
    text-shadow: 0px 0px 5px black, 0 0 10px #CD1376, 0 0 7px #CD1376;
}