.template-wrap * {
    border: 0;
    margin: 0;
    padding: 0
}

.template-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.template-wrap .logo,
.progressbar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.template-wrap .logo {
    width: 100%;
    max-width: 640px;
    padding: 0 32px;
    box-sizing: border-box;
}

.template-wrap .logo::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 39%;
    background-image: url('mainlogo.png');
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.template-wrap .progressbar {
    height: 20px;
    width: 100%;
    max-width: 432px;
    padding-left: 32px;
    padding-right: 32px;
    margin-top: 90px;
    box-sizing: border-box;
    z-index: 0;
    border-radius: 10px;
}

.template-wrap .progressbar::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: #6835A5;
    box-shadow: inset 0 0 0 4px #431977, 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.template-wrap .progressfull {
    transition: width .2s ease;
    border-radius: inherit;
}

.template-wrap .progressfull {
    float: left;
    width: 0%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
}

.template-wrap .progressfull::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: #FFFACC;
    box-shadow: inset 0 0 0 4px #FFEF63, 0 0 12px 0 #FFEF63;
}

.game-content {
    width: 100%;
    height: 100%;
    background-color: #3C1D6E !important;
    background-image: url('border-bg.png'), radial-gradient(closest-side, rgba(174, 92, 255, .5) 0, rgba(174, 92, 255, 0) 100%) !important;
    background-position: 50% 50% !important;
    background-size: cover, 1024px 1024px !important;
    background-repeat: no-repeat !important;
}

.game-content>canvas {
    width: 100% !important;
    height: 100% !important;
}

.template-wrap .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    display: flex;
    background-color: #301355;
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 16px;
}

.template-wrap .footer .webgl-logo,
.title,
.fullscreen {
    height: 100%;
    display: inline-block;
    background: transparent center no-repeat;
}

.template-wrap .footer .foot-logo,
.template-wrap .footer .fullscreen {
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 100%;
    transition: opacity .2s ease;
}

.template-wrap .footer .foot-logo:hover,
.template-wrap .footer .fullscreen:hover {
    opacity: .8;
}

.template-wrap .footer .foot-logo {
    background-image: url('logofoot.png');
    width: 188px;
}

.template-wrap .footer .fullscreen {
    background-image: url('fullscreen.png');
    width: 48px;
    margin-left: auto;
    cursor: pointer;
}