body{
    overflow:  hidden;
    padding:  0;
    margin:  0;
}
table {
   border-collapse: collapse;
   position:  absolute;
   left:  0px;
   top: 0px;
}
table td {
   padding: 0; 
   margin: 0;
}
canvas{
    display:  block;  
}
#table{
    transition: transform -5.555s linear;
}
#download_draw {
    position: absolute;
    top: -200000px;
    left: -200000px;
    width: 16;
    height: 16;
    border: 8px solid rgb(28, 85, 117);
    background-color: rgb(40, 54, 30);
}
.printbutton_class {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30;
    height: 20;
    background-color: rgb(6, 58, 88);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 26px;
    font-family: "Arial", cursive;
    font-weight: bold;
    z-index: 1550;
    display: none;
    cursor: pointer;
}
.printbutton_class:hover{
    background-color: black;
}


#mobile,
#mobile-xtraheight,
#desktop,
#desktop-xtrawidth,
#tablet,
#square {
    display: none;
}

/* DESKTOP */
/* Landscape */
@media (min-aspect-ratio: 7/5) {
    #desktop {
        display: block;
    }
}


/* DESKTOP */
/* Landscape XTRALength */
@media (min-aspect-ratio: 10/5) {
    #desktop-xtrawidth {
        display: block;
    }
}

/* 
MOBILE, PORTRAIT
*/
@media (max-aspect-ratio: 5/8) {
    #mobile {
        display: block;
    }
}

/* 
MOBILE, PORTRAIT XTRAhIgH
*/
@media (max-aspect-ratio: 6 / 11) {
    #mobile-xtraheight {
        display: block;
    }
}

/*
TABLET
*/
@media (min-aspect-ratio: 5/8) and (max-aspect-ratio: 1/1) {
    #tablet {
        display: block;
    }
}

/*  SQUARE */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 7/5) {
    #square {
        display: block;
    }
}