html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#languageMenu {
    position: absolute;
    top: 0;
}

html[dir="LTR"] #languageMenu {
    right: 1em;
}

html[dir="RTL"] #languageMenu {
    left: 1em;
}

#header {
    position: absolute;
    top: 1em;
    left: 20%;
    right: 20%;
    width: 60%;
    text-align: center;
}

#banner {
    padding: 1em;
}

#subtitle {
    font-style: italic;
    color: rgb(190, 190, 190);
}

a {
    text-decoration: none;
}

#clearDataPara {
    position: absolute;
    bottom: 0;
    margin: 1em;
}

#clearData {
    padding: 0 4px;
    margin: 5px 10px;
    font-size: medium;
}

#path {
    stroke: #563d7c;
    stroke-width: 1;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: dash .7s linear forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.iconBack {
    fill: #fff;
}

.iconBorder {
    stroke: rgb(227, 76, 38);
    stroke-width: 5;
    fill: rgba(0, 0, 0, 0.1);
}

a:hover>.iconBorder {
    fill: rgba(255, 255, 255, 0.1);
}

text {
    fill: rgb(79, 140, 201);
}

a:hover>text {
    fill: rgb(204, 187, 68);
}

.icon {
    animation: pop .5s cubic-bezier(.5, .5, .5, 1.5) forwards;
    visibility: hidden;
}

.icon text {
    text-anchor: middle;
    font-size: 18pt;
}

#icon-puzzle {
    animation-delay: 0.0s;
}

#icon-maze {
    animation-delay: 0.1s;
}

#icon-bird {
    animation-delay: 0.2s;
}

#icon-turtle {
    animation-delay: 0.3s;
}

#icon-movie {
    animation-delay: 0.4s;
}

#icon-music {
    animation-delay: 0.5s;
}

#icon-pond-tutor {
    animation-delay: 0.6s;
}

#icon-pond-duck {
    animation-delay: 0.7s;
}

#back-puzzle {
    animation-delay: 0.3s;
}

#back-maze {
    animation-delay: 0.4s;
}

#back-bird {
    animation-delay: 0.5s;
}

#back-turtle {
    animation-delay: 0.6s;
}

#back-movie {
    animation-delay: 0.7s;
}

#back-music {
    animation-delay: 0.8s;
}

#back-pond-tutor {
    animation-delay: 0.9s;
}

#back-pond-duck {
    animation-delay: 1.0s;
}

@keyframes pop {
    from {
        transform: translate(80px, 50px) scale(0);
        visibility: visible;
    }

    to {
        transform: translate(0, 0) scale(1);
        visibility: visible;
    }
}

.gaugeBack {
    stroke: rgb(241, 224, 90);
    stroke-width: 6;
    fill: none;
    animation: pop 0.1s linear forwards;
    visibility: hidden;
}

.gaugeFront {
    stroke: #0b0;
    stroke-width: 8;
    fill: none;
}