.webgl-content * {border: 0; margin: 0; padding: 0;}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
/*.webgl-content .logo {/*background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;

  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f03355;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  animation: l1 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l1 {
  33% {border-radius: 0;background: #514b82 ;clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
  66% {border-radius: 0;background: #ffa516 ;clip-path: polygon(50% 0,50% 0,100% 100%,0 100%)}

}*/

.webgl-content .logo {
  --w:10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color: #ffffff;
  background: none !important;
  letter-spacing: var(--w);
  width:var(--w);
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0, 
    calc(-3*var(--w)) 0, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0, 
    calc(-9*var(--w)) 0;
  animation: l16 2s infinite;
}
.webgl-content .logo:before {
  content:"Loading...";
}
@keyframes l16 {
  20% {text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0 red, 
    calc(-3*var(--w)) 0, 
    calc(-4*var(--w)) 0 #ffa516,
    calc(-5*var(--w)) 0 #63fff4, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0 green, 
    calc(-9*var(--w)) 0;}
  40% {text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0 red, 
    calc(-3*var(--w)) 0 #e945e9, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0 green, 
    calc(-6*var(--w)) 0 orange, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0 green, 
    calc(-9*var(--w)) 0;}
  60% {text-shadow: 
    calc(-1*var(--w)) 0 lightblue, 
    calc(-2*var(--w)) 0, 
    calc(-3*var(--w)) 0 #e945e9, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0 green, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0 yellow, 
    calc(-8*var(--w)) 0 #ffa516, 
    calc(-9*var(--w)) 0 red;}
  80% {text-shadow: 
    calc(-1*var(--w)) 0 lightblue, 
    calc(-2*var(--w)) 0 yellow, 
    calc(-3*var(--w)) 0 #63fff4, 
    calc(-4*var(--w)) 0 #ffa516,
    calc(-5*var(--w)) 0 red, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0 grey, 
    calc(-8*var(--w)) 0 #63fff4, 
    calc(-9*var(--w)) 0 ;}
}



/* .webgl-content .progress {height: 20px; width: 250px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;} */

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
/*.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}*/
.webgl-content .footer .title {margin-right: 10px; float: left; font-family: 'Itim';font-size: 18px;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

#canvas{
    border-style: solid;
}

.webgl-content .footer .btnForm{
    color: rgb(0, 0, 0);
    margin-top: 5px; 
    width: 120px;
    height: 40px; 
    line-height: 38px; 
    font-family: "Itim", cursive;
    font-weight: 500;
    font-style: normal;
  }

  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .webgl-content{
        width: 500px;
        height: auto;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .webgl-content{
        width: 660px;
        height: auto;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .webgl-content{
        width: 960px;
        height: auto;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .webgl-content{
        width: 960px;
        height: auto;
        
    }
}

.btn{
    padding: 4px 15px;
    border: 1px solid #3498db;
    background: none;
    font-size: 16px;
    font-family: "Itim", cursive;
    cursor: pointer;
    transition: 0.5s;  
}
.btn a{
    text-align: center;
    text-decoration: none;
    font-family: "Itim", cursive;
}
.btn a:hover{
    color: #ffffff;
}
.btn:hover{
    color: #ffffff;
    background-color: #3498db;
}