styles.css

/* Common rules */

.abstra-body
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: antiquewhite;
    width: 90%;
    height: 100%;
}

.abstra-body__image__canvas
{
    border:1px solid #d3d3d3;    
}

.abstra-body__header,
.abstra-body__textbox,
.abstra-body__button,
.abstra-body__image,
.abstra-body__download,
.abstra-body__footer
{
    text-align: center;
}

.abstra-body__textbox__textarea
{
    width: 80%;
    height: 15%;
}


/* Desktop rules */
@media (orientation: landscape) {
    .abstra-body__header
    {
        font-size: 6vh;
    }

    .abstra-body__manual,
    .abstra-body__download
    {
        font-size: 3vh;
    }

    .abstra-body__manual
    {
        padding-left: 7.5vw;
    }

    .abstra-body__image__canvas
    {
        height: 42vh;
        width: 42vh;
    }

    .abstra-body__header,
    .abstra-body__textbox,
    .abstra-body__button,
    .abstra-body__image,
    .abstra-body__download,
    .abstra-body__footer
    {
        margin: 1%;
    }  
    
    .abstra-body__button__button
    {
        width: 30vw;
        height: 5vh;
    }
}


/* Desktop rules */
@media (orientation: portrait) {
    .abstra-body 
    {
        width: 95%;
    }

    .abstra-body__header
    {
        font-size: 6vw;
    }

    .abstra-body__manual,
    .abstra-body__download
    {
        font-size: 3vw;
    }

    .abstra-body__manual
    {
        padding-left: 7.5vw;
    }

    .abstra-body__image__canvas
    {
        height: 60vw;
        width: 60vw;
    }

    .abstra-body__header,
    .abstra-body__textbox,
    .abstra-body__button,
    .abstra-body__image,
    .abstra-body__download,
    .abstra-body__footer
    {
        margin: 2%;
    }

    .abstra-body__button__button
    {
        width: 30vw;
        height: 5vw;
    }
}