body {
    --hampterRotation: 0.5turn;
}

body {
    --bg: #0c0d24;
    --bg2: #1a1b33cc;
    --fg: #d1d1cf;
}
body[data-theme="light"] {
    --bg: #d1d1cf;
    --bg2: #d1d1cfaa;
    --fg: #0c0d24;
}

body, html {
    width: 100%;
    background-color: var(--bg);
}

* {
    color: var(--fg);
}

.header {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    padding-top: 0px;
    margin-top: 20px;
}

.outlined {
    text-shadow: -2px -2px  0.5px var(--bg), 
                  2px -2px  0.5px var(--bg), 
                 -2px  2px  0.5px var(--bg), 
                  2px  2px  0.5px var(--bg),
                 -2px  0    0.5px var(--bg), 
                  2px  0    0.5px var(--bg), 
                  0    -2px 0.5px var(--bg), 
                  0    2px  0.5px var(--bg)
}

#egg {
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.eggspacer {
    width: 1px;
    transition: width ease-in-out 0.15s;
    display: inline-block;
}

.main {
    position: fixed;
    perspective: 1000px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.bar {
    display:block;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

#hampter {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    filter: blur(1px);

    translate: -50% -50%; /*calc(var(--hampterOffset)-50%);*/
    rotate: var(--hampterRotation);
    transform: translate3d(0px, 0px, -1500px);
}

.bouncing {
    animation-duration: 0.2s;
    animation-name: bounce;
    animation-iteration-count: infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translate3d(0px, 0px, -1500px);
  }
  10%, 90% {
    transform: translate3d(0px, 0px, -1464px);
  }
  20%, 80% {
    transform: translate3d(0px, 0px, -1436px);
  }
  30%, 70% {
    transform: translate3d(0px, 0px, -1416px);
  }
  40%, 60% {
    transform: translate3d(0px, 0px, -1404px);
  }
  50%{
    transform: translate3d(0px, 0px, -1400px);
  }
}

.stickToWheel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    border: 2px solid var(--fg);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    backface-visibility: hidden;
    background-color: var(--bg2);
}

.stickToWheel > img {
    width: 100%;
    pointer-events: none;
}

.stickToWheel > a {
    font-size: xx-large;
    font-weight: bold;
    -webkit-transform: translate3d(0,0,0);
}

.stickToWheel > span {
    text-align: center;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.stickToWheelBack {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    border: 2px solid var(--fg);
    border-radius: 5px;
    backface-visibility: hidden;
    background-color: var(--bg2);
    pointer-events: none;
}

#modeswitcher {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: xx-large;
    margin: 5px;

    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: right;
}