@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Orienta&display=swap');

:root {
   --font-main: 'Luckiest Guy', sans-serif;
   --font-secondary: 'MontserratAlternates', sans-serif;
   --font-tertiary: 'Orienta', monospace;
}
 
html, body {
   background: #27272B;
   width: 100%;
   height: 100%;
   overflow: visible;
   padding: 0;
   margin: 0;
}

h1, h2, h3 {
   font-family: var(--font-secondary);
   color: white;
}
a, p {
   font-family: var(--font-tertiary);
   color: white;
}

div.main-container {
   background: transparent !important;
   position: absolute;
}

div.main-container canvas {
   position: absolute;
}

.logo{
   width: auto;
   max-width: 80%;
   margin: 30px auto;
   max-height: 150px;
}

.container{
   width: 80%;
   max-width: 800px;
   margin:0 auto;
   text-align: center;
   padding-top: 20px;
}

#loader-card{
   display: flex;
   justify-content: center; /* horizontal */
   align-items: center;     /* vertical */
}

#loader{
   width: 80%;
   height: 80%;
   margin: 0;
   display: block;
   text-align: center;
}

.progressbar{
   padding: 2px;
   left: 0;
   border: 1px solid #333;
   border-radius: 10px;
}

.fill{
   background-color:white;
   min-height:4px;
}

.scrollable {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none;  /* IE and Edge */
}

.scrollable::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }

.fullscreenON .imgbutton{
   background-image: url("fullscreenON.png") ;
}
.fullscreenOFF .imgbutton{
   background-image: url("fullscreenOFF.png") ;
}

.floatbottomLeft {
   display: block;
   position: fixed;
   left: 0;
   bottom: 0;
}

.button{
   width:50px;
   height: 50px;
   text-align: center;
   cursor: pointer;
}

span.imgbutton{
   width: 100%;
   height: 100%;
   display: block;
   position: relative;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
}