html, body {
    background-color: #07424a;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#outer {
    position: absolute;
    width: 0px;
    height: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid white;*/
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #2a8e7b;
    animation: back 0.5s;
}

@keyframes back {
    0% {transform: rotate(2deg) scale(0.95);}
}

#container.active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #2a8e7b;
    animation: fore 0.5s;
}

@keyframes fore {
    0% {transform: rotate(-2deg) scale(0.95);}
}

#checkbox {
    position: absolute;
    z-index: 100;
    width: 50px;
    height: 50px;
    border: 2px solid #e0d271;
    border-radius: 5px;
    color: transparent;
    font-size: 30px;
    user-select: none;
    text-align: center;
    font-family: monospace;
    user-select: none;
    animation: popin 0.25s;
}

@keyframes popin {
    0% {transform: rotate(-5deg) scale(0.95); color: #e0d271;}
    25% {transform: rotate(-2.5deg) scale(1.1); color: #07424a;}
    50% {transform: rotate(0deg) scale(0.99);}
}

#checkbox:hover {
    transform: scale(1.05);
    cursor: pointer;
}

#checked_checkbox {
    position: absolute;
    z-index: 100;
    width: 50px;
    height: 50px;
    border: 2px solid #e0d271;
    background-color: #07424a;
    border-radius: 10px;
    color: #e0d271;
    font-size: 30px;
    user-select: none;
    text-align: center;
    font-family: monospace;
    animation: popout 0.25s;
}

@keyframes popout {
    0% {transform: rotate(5deg) scale(0.95); color: transparent;}
    25% {transform: rotate(2.5deg) scale(1.1);}
    50% {transform: rotate(0deg) scale(0.99);}
}

#checked_checkbox:hover {
    transform: scale(1.05);
    cursor: pointer;
}

#circle.active {
    width: 0px;
    height: 0px;
    background-color: #07424a;
    position: absolute;
    border-radius: 1000px;
    animation: away 0.5s;
}

#circle.dive {
    width: 0px;
    height: 0px;
    background-color: #07424a;
    position: absolute;
    border-radius: 1000px;
    animation: towards 0.5s;
}

@keyframes away {
    0% {width: 0; height: 0; opacity: 1;}
    100% {width: 200px; height: 200px; opacity: 0;}
}

@keyframes towards {
    0% {width: 200px; height: 200px; opacity: 1;}
    100% {width: 0; height: 0; opacity: 0;}
}

h1 {
    position: absolute;
    pointer-events: none;
    margin-top: -200px;
    letter-spacing: 20px;
    color: white;
    font-family: monospace;
    animation: arrive 0.25s;
    user-select: none;
}

h1.active {
    position: absolute;
    pointer-events: none;
    margin-top: -150px;
    letter-spacing: 0px;
    color: white;
    font-family: monospace;
    animation: arriver 0.25s;
    user-select: none;
}

@keyframes arrive {
    0% {transform: translate(-100px); color: #07424a;}
    25% {transform: translate(20px); color: white;}
    50% {transform: translate(-10px); color: #07424a;}
    75% {transform: translate(5px); color: white;}
}

@keyframes arriver {
    0% {transform: translate(100px); color: #07424a;}
    25% {transform: translate(-20px); color: white;}
    50% {transform: translate(10px); color: #07424a;}
    75% {transform: translate(-5px); color: white;}
}

h2 {
    position: absolute;
    pointer-events: none;
    margin-top: 250px;
    color: white;
    font-family: monospace;
    font-size: 30px;
    animation: arrive 0.5s;
    user-select: none;
}

h2.active {
    position: absolute;
    pointer-events: none;
    margin-top: 250px;
    color: white;
    font-family: monospace;
    font-size: 30px;
    animation: arriver 0.5s;
    user-select: none;
}

h3 {
    position: absolute;
    pointer-events: none;
    margin-left: 200px;
    color: #ffb24f;
    font-family: monospace;
    font-size: 20px;
    animation: arrive_v 0.3s;
    user-select: none;
}

h3.active {
    position: absolute;
    pointer-events: none;
    margin-left: 200px;
    color: #ffb24f;
    font-family: monospace;
    font-size: 20px;
    animation: arriver_v 0.3s;
    user-select: none;
}

@keyframes arrive_v {
    0% {transform: translate(0,-50px); color: #07424a;}
    25% {transform: translate(0,10px); color: #ffb24f;}
    50% {transform: translate(0,-5px); color: #07424a;}
    75% {transform: translate(0,2.5px); color: #ffb24f;}
}

@keyframes arriver_v {
    0% {transform: translate(0,50px); color: #07424a;}
    25% {transform: translate(0,-10px); color: #ffb24f;}
    50% {transform: translate(0,5px); color: #07424a;}
    75% {transform: translate(0,-2.5px); color: #ffb24f;}
}