#cv_graph {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 333px;
    height: 333px;
    background-color: rgb(255, 229, 0);
};


#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;
    };
};