:root{--blue: #87ceeb}canvas{position:fixed;top:0;left:0}#progress-bar-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:var(--blue);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:4}#progress-bar{width:50%;margin-top:.5%;height:2%}label{color:#fff;font-size:1rem}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}.point{position:absolute;top:50%;left:50%;z-index:2}.point:hover .text{opacity:1}.point.visible .label{transform:scale(1)}.point .label{position:absolute;width:40px;height:40px;border-radius:50%;background:#00000077;color:#fff;text-align:center;line-height:40px;font-size:14px;cursor:pointer;display:inline-block;transform:scale(0);transition:transform .3s}.point .text{position:absolute;left:50px;padding:20px;width:200px;border-radius:4px;background:#0000008a;color:#fff;text-align:center;line-height:1.3em;font-size:14px;display:inline-block;opacity:0;transition:opacity .3s;pointer-events:none}@media screen and (max-width: 700px){.point .text{top:50px;left:-110px}}