:root {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #131315;
    color: #ffffff;
    box-sizing:border-box;
    line-height: 2em;
    font-weight: 200;
    scroll-behavior: smooth;
}

* , *:before, *:after{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

#canvas {
    width: 100%;
    height: auto;
    padding: 1em;
    padding-bottom: 0;
}

#result-section {
    margin-left: 1em;
    margin-top: 3em;
}

#result-title {
    margin-left: -0.1em;
    scroll-behavior: smooth;
}

#already-span {
    text-align: center;
}

#result-text {
    font-size: 1.1em;
}

h2 {
    font-weight: 300;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

#pointer {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    transform: translateY(2em);
    animation: houp 2.1s infinite;
    color: white;
    width: 6.8em;
}

@keyframes houp {
    0% {transform: rotate(0) translateY(2em)}
    33% {transform: rotate(20deg) translateY(2em)}
    66% {transform: rotate(-20deg) translateY(2em)}
    100% {transform: rotate(0) translateY(2em)}
}

#header {
    height: 100vh;
    margin-bottom: 2em;
}

@keyframes swim {
    0% {transform: translateY(0);}
    50% {transform: translateY(15px);}
    100% {transform: translateY(0);}
}

#smiley {
    position: absolute;
    left: 1em;
    top: 1em;
    width: 9em;
    animation: float 5s infinite;
}

@keyframes float {
    0% {transform: translateY(0); transform: rotate(0)}
    20% {transform: rotate(360deg);}
    50% {transform: translateY(25px);}
    100% {transform: translateY(0);}
}

.arrow {
    position: relative;
    bottom: -85%;
    left: 50%;
    margin-left:-20px;
    width: 40px;
    height: 40px;

    /*Dark Arrow Down*/
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojZmZmY2ZjO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
    background-size: contain;
}

a.button {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    display:inline-block;
    padding:0.5em 3em;
    border:0.16em solid #FFFFFF;
    margin:0 0.3em 0.3em 0;
    box-sizing: border-box;
    text-decoration:none;
    text-transform:uppercase;
    font-family:'Roboto',sans-serif;
    font-weight:400;
    color:#FFFFFF;
    text-align:center;
    transition: all 0.15s;
    border-radius: 2em;
    margin-left: 1em;
    /*animation: spin-button 3s infinite;*/
}

@keyframes spin-button {
    0% {transform: rotate(0)}
    20% {transform: rotate(4deg)}
    40% {transform: rotate(-4deg)}
    60% {transform: rotate(0)}
    100% {transform: rotate(0)}
}
a.button:hover {
    color:#DDDDDD;
    border-color:#DDDDDD;
}
a.button:active {
    color:#BBBBBB;
    border-color:#BBBBBB;
}
@media all and (max-width:30em) {
    a.button {
        display:block;
        margin:0.4em auto;
    }
}

@keyframes slideleft {
    100% {transform: translateX(-90%)}
}

#disclaimer {
    font-size: 8px;
}

.bounce {animation: bounce 2s infinite;}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

@media only screen and (max-height: 650px) {
    h1 {
        font-size: 1.85em !important;
    }

    #smiley {
        width: 7.8em !important;
    }
}


h1 {
    line-height: 1.4em;
    font-weight: 400;

    margin: 4.4em 0.5em 0em 0.5em;
    font-size: 2.3em;
    animation: flow 4s ease-in-out infinite, swim 6s infinite;
    background: linear-gradient(-60deg, #ffffff, #577eff);
    background: -webkit-linear-gradient(-60deg, #ffffff, #577eff);
    background-size: 300%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes flow {
    /* It would normally be 0%, 100%, 0%, but we substract a few percent because otherwise the start and stop is too long */
    0%   {background-position: 5% 50%}
    50%  {background-position: 95% 50%}
    100% {background-position: 5% 50%}
}








/* width */
::-webkit-scrollbar {width: 8px;}

/* Track */
::-webkit-scrollbar-track {background: #131315;}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #424248;
    border-radius: 2em;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #4c4c56;
}




/* unvisited link */
a:link {
    color: #7ecdff;
}

/* visited link */
a:visited {
    color: #7ecdff;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: hotpink;
}





footer {
    margin-top: 8em;
    text-align: center;
    width: 100%;
    color: #898992;
    display: flex;
    flex-direction: column;
}
footer #bottom .bottom-icon ion-icon {
    padding: 0.11em 0.41em 0em 0.41em;
    color: #a5a5a5;
    transform: scale(1);
}
footer #bottom .bottom-icon:hover ion-icon {
    color: #e8e9f5;
}
footer #bottom #copyright {
    color: #777780;
    font-size: 0.9em;
    margin-bottom: 6px;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: rgba(40, 43, 49, 0.1);
    color: #d3d5de;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -5.7em;
    opacity: 0;
    transition: opacity 0.4s;
    padding: 3px 11px;
    width: 10em;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 0.8;
}