@font-face { font-family: w98font;  font-style: normal; src: url('../font/w98fonts.ttf'); }

*{
    margin: 0;
}
#loadingback{
z-index: 100;
position: fixed;
height: 100%;
width: 100%;
top: 0;
transition: opacity 0.5s ease-out;
}
#OurCanvas{
width: auto;
height: auto;
position: fixed;
transition: all 1s;
}
.loadingbar{
width: 100%;
height: 30px;
background: linear-gradient(to left,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2,#88d8f0,#5acdf0,#88d8f0,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2,#d2d2d2);
transition: all 1s ease-in-out;
animation-name: loadingbar;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 2.5s;
animation-play-state: running;
background-size: 500%;
bottom: 0;
position: absolute;
}
#title2 h4{
font-size: 2em;
right: 5px;
text-align: right;
font-style: italic;
font-weight: bold;
top: 0;
position: absolute;
}
.titleletter{
    font-family: Calibri;
}
.pathloading{
    font-family: w98font;
}
.titleletter{
font-size: 8em;
text-align: left;
}
.strlower{
font-size: 5.5em;
font-style: italic;
}
.titlezone{
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 300px;
margin-left: 100px;
}
@keyframes loadingbar{
0% {background-position: 0% ;}
50% {background-position: 50% ;}
100% {background-position: 100% ;}
}
.squares{
width: 85px;
height: 85px;
background-color: black;
margin: 5px 5px;
position: relative;
display: inline-block;
border: solid 1px;
}

.squares.cyan{
background-color: #07e8ff;
}
.squares.orange{
background-color: orange;
}
.squares.blue{
background-color: blue;
}
.squares.green{
background-color: green;
}
.logo{
    position: relative;
    right: 100px;
    min-width: 110px;
}
.pathloading{
text-align: left;
font-size: 20px;
width: auto;
background-color: grey;
position: relative;
top: 50px;
left: 20px;
padding: 5px 2px;
}
@media (max-width: 1366px){
.titleletter{
font-size: 5em;
}
.strlower{
font-size: 3em;
}
}
@media (max-width: 768px){
.logo{
right: 40px;
}
#title2 h4{
font-size: 1.3em;
right: 8px;
}
.pathloading{
    font-size: 15px;
}
.titleletter{
font-size: 2.5em;
}
.strlower{
font-size: 1.8em;
}
.squares{
width: 45px;
height: 45px;
margin: 2px 2px;
border: solid 1px;
}
}
@media (max-width: 500px){
.titleletter{
    font-size: 2em;
}
.strlower{
    font-size: 1.4em;
}
}