@import url('https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap');

html {
    width:100%;
    height:100%;
}

body {
    font-family: sans-serif;
    color:black;
    overflow:hidden;
    touch-action: none;
    background: #EFF74D;
    background: linear-gradient(180deg,#EFF74D 0%, #FFB217 100%);
    text-align:center;
}

@keyframes rotateY {
    to { transform: rotateY(360deg); }
}

@keyframes rotate {
    to { transform: rotate(360deg); }
}

@keyframes tilt {
    0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); }
    50% { transform: translate(-50%, -50%) rotate(5deg); }
}

h1 {
    font-family: "Rubik Bubbles", sans-serif;
    font-size:50px;
}

div.start {
    width:100%;
    height:100%;
}

div.start > button {
    width:128px;
    height:128px;
    font-size:30px;
}

div.tracking {
    display:none;
    width:100%;
    height:100%;
}

div.tracking > div.guide {
    font-family: "Rubik Bubbles", sans-serif;
    width:100%;
    text-align:center;
    font-size:50px;
    padding-top:20px;
}

div.tracking > div.count {
    font-family: "Rubik Bubbles", sans-serif;
    width:100%;
    text-align:center;
    position:absolute;
    left:0;
    bottom:0;
    font-size:25px;
    padding-bottom:20px;
}

div.tracking > div.debug {
    position:absolute;
    left:0;
    bottom:40px;
    width:100%;
    text-align:center;
    padding:20px;
    opacity:0.25;
}

div.tracking > img.arrow {
    width:160px;
    height:160px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-80px;
    margin-top:-80px;
}

div.post {
    display:none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

div.post > button {
    animation: rotateY 1s infinite linear;
    width:128px;
    height:128px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-64px;
    margin-top:-64px;
}

div.post > img.glow {
    width:150vmax;
    height:150vmax;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-75vmax;
    margin-top:-75vmax;
    animation:rotate 20s linear infinite;
    opacity:0.5;
}

div.post > img.image {
    max-width:70vw;
    max-height:70vh;
    position:absolute;
    left:50%;
    top:50%;
    border-radius:20px;
    animation:tilt 5s ease-in-out infinite;
}

div.complete {
    width:100%;
    height:100%;
    display:none;
}

div.complete > button {
    width:128px;
    height:128px;
    font-size:30px;
}