html { 
    background-color: antiquewhite;
    margin:0;
    padding: 0;
}
body{
    margin:0;
    padding: 0;
}
canvas{
cursor: none;
display: block;
touch-action: none;
animation: ani 0.5s forwards;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none; 
-ms-user-select: none;
user-select: none;

}

#bg{
font-family: 'Balsamiq Sans';
    background: url('img/bgstart.jpg') left center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height: 100vh;
}
#animation_container {
    width:100%;
    height:100vh;
    display: block;
    overflow: hidden; 
}

@keyframes ani {
0% {opacity: 0;}
100% {opacity: 1;}
}

@media (min-width: 724px) and (max-height: 1080px) and (min-height: 960px){
canvas{ zoom:90%; }
}
@media (min-width: 724px) and (max-height: 960px) and (min-height: 865px){
    canvas{ zoom:80%; }
}
@media (min-width: 724px) and (max-height: 865px) and (min-height: 765px){
    canvas{ zoom:70%; }
}
@media (min-width: 724px) and (max-height: 765px) and (min-height: 700px){
    canvas{ zoom:65%; }
}
@media (min-width: 724px) and (max-height: 700px) and (min-height: 645px){
    canvas{ zoom:60%; }
}
@media (min-width: 724px) and (max-height: 645px) and (min-height: 590px){
    canvas{ zoom:55%; }
}
@media (min-width: 724px) and (max-height: 590px) and (min-height: 535px){
    canvas{ zoom:50%; }
}
@media (min-width: 724px) and (max-height: 535px) and (min-height: 490px){
    canvas{ zoom:45%; }
}
@media (min-width: 724px) and (max-height: 490px) and (min-height: 430px){
    canvas{ zoom:40%; }
}
@media (min-width: 724px) and (max-height: 430px) and (min-height: 380px){
    canvas{ zoom:35%; }
}
@media (min-width: 724px) and (max-height: 380px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width: 724px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width: 724px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width: 724px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width: 724px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width: 724px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* ----------724px---------- */
@media (min-width:650px) and (max-width: 724px) and (min-height: 960px){
    canvas{ zoom:90%; }
}
@media (min-width:650px) and (max-width: 724px) and (min-height: 865px) and (max-height: 960px){
    canvas{ zoom:80%; }
}
@media (min-width:650px) and (max-width: 724px) and (min-height: 765px) and (max-height: 865px){
    canvas{ zoom:70%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 765px) and (min-height: 700px){
    canvas{ zoom:65%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 700px) and (min-height: 645px){
    canvas{ zoom:60%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 645px) and (min-height: 590px){
    canvas{ zoom:55%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 590px) and (min-height: 535px){
    canvas{ zoom:50%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 535px) and (min-height: 490px){
    canvas{ zoom:45%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 490px) and (min-height: 430px){
    canvas{ zoom:40%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 430px) and (min-height: 380px){
    canvas{ zoom:35%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 380px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:650px) and (max-width: 724px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* -----------650px--------- */
@media (min-width:565px) and (max-width: 650px) and (min-height: 765px){
    canvas{ zoom:80%; }
}
@media (min-width:565px) and (max-width: 650px) and (min-height: 765px) and (max-height: 865px){
    canvas{ zoom:70%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 765px) and (min-height: 700px){
    canvas{ zoom:65%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 700px) and (min-height: 645px){
    canvas{ zoom:60%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 645px) and (min-height: 590px){
    canvas{ zoom:55%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 590px) and (min-height: 535px){
    canvas{ zoom:50%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 535px) and (min-height: 490px){
    canvas{ zoom:45%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 490px) and (min-height: 430px){
    canvas{ zoom:40%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 430px) and (min-height: 380px){
    canvas{ zoom:35%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 380px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:565px) and (max-width: 650px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}

/* -----------565px--------- */
@media (min-width:495px) and (max-width: 565px) and (min-height: 765px){
    canvas{ zoom:70%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 765px) and (min-height: 700px){
    canvas{ zoom:65%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 700px) and (min-height: 645px){
    canvas{ zoom:60%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 645px) and (min-height: 590px){
    canvas{ zoom:55%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 590px) and (min-height: 535px){
    canvas{ zoom:50%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 535px) and (min-height: 490px){
    canvas{ zoom:45%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 490px) and (min-height: 430px){
    canvas{ zoom:40%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 430px) and (min-height: 380px){
    canvas{ zoom:35%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 380px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:495px) and (max-width: 565px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}




/* -----------495px--------- */
@media (min-width:430px) and (max-width: 495px) and (min-height: 645px){
    canvas{ zoom:60%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 645px) and (min-height: 590px){
    canvas{ zoom:55%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 590px) and (min-height: 535px){
    canvas{ zoom:50%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 535px) and (min-height: 490px){
    canvas{ zoom:45%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 490px) and (min-height: 430px){
    canvas{ zoom:40%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 430px) and (min-height: 380px){
    canvas{ zoom:35%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 380px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:430px) and (max-width: 495px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* -----------430px--------- */
@media (min-width:335px) and (max-width: 430px) and (min-height: 535px){
    canvas{ zoom:50%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 535px) and (min-height: 490px){
    canvas{ zoom:45%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 490px) and (min-height: 430px){
    canvas{ zoom:40%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 430px) and (min-height: 380px){
    canvas{ zoom:35%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 380px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:335px) and (max-width: 430px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* ------------335px-------- */
@media (min-width:285px) and (max-width: 335px) and (min-height: 430px){
    canvas{ zoom:40%; }
}
@media (min-width:285px) and (max-width: 335px) and (max-height: 430px) and (min-height: 380px){
    canvas{ zoom:35%; }
}
@media (min-width:285px) and (max-width: 335px) and (max-height: 380px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width:285px) and (max-width: 335px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width:285px) and (max-width: 335px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:285px) and (max-width: 335px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:285px) and (max-width: 335px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:285px) and (max-width: 335px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* ----------285px---------- */
@media (min-width:220px) and (max-width: 285px) and (min-height: 325px){
    canvas{ zoom:30%; }
}
@media (min-width:220px) and (max-width: 285px) and (max-height: 325px) and (min-height: 270px){
    canvas{ zoom:25%; }
}
@media (min-width:220px) and (max-width: 285px) and (max-height: 270px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:220px) and (max-width: 285px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:220px) and (max-width: 285px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:220px) and (max-width: 285px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* -----------220px--------- */
@media (min-width:150px) and (max-width: 220px) and (min-height: 220px){
    canvas{ zoom:20%; }
}
@media (min-width:150px) and (max-width: 220px) and (max-height: 220px) and (min-height: 160px){
    canvas{ zoom:15%; }
}
@media (min-width:150px) and (max-width: 220px) and (max-height: 160px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:150px) and (max-width: 220px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* ------------150px-------- */
@media (min-width:100px) and (max-width: 150px) and (min-height: 100px){
    canvas{ zoom:10%; }
}
@media (min-width:100px) and (max-width: 150px) and (max-height: 100px) and (min-height: 0px){
    canvas{ zoom:5%; }
}
/* ---------100px----------- */
@media (min-width:0px) and (max-width: 100px) and (min-height: 960px){
    canvas{ zoom:1%; }
}
@media (min-width:0px) and (max-width: 100px) and (min-height: 0px) and (max-height: 960px){
    canvas{ zoom:1%; }
}