@media (min-width: 1000px) {
    html {
        font-size: 1em;
    }

    .content {
        width: 60%;
        max-width: 600px;
    }

    .main {
        padding: 1em 5em 3em;
    }

    .buttons,
    .buttons select,
    .buttons button,
    .buttons input {
        font-size: 1em;
    }

    .buttons label {
        display: inline-block;
        min-width: 2.5em;
    }

    .drawing-element {
        width: 450px;
        min-height: 450px;
    }

    .control {
        margin: 0 0 0.5em;
        border-left: 2px solid #000;
        padding: 0 0 0 1em;
    }

    .drawing-element {
        padding: 0 1em 1em;
    }
    .mesmerized .buttons {
        width:39%;
    }
    .mesmerized canvas {
        width: 60%;
    }
}

@media (max-width: 999px) {
    html {
        font-size:1.5em;
    }
    .content {
        width:95%;
    }
    .main {
        padding: 1em 1em 3em;
    }
    .buttons,
    .buttons select,
    .buttons button,
    .buttons input  {
        font-size: 1.2em;
    }
    select {
        width: 100%;
        display: block;
        margin: 0 0 0.5em;
    }
    .buttons label {
        display: inline-block;
        min-width: 2.5em;
    }
    .drawing-element {
        padding: 0 0.5em 0.5em;
    }
    .buttons {
        width:100%;
    }
    canvas {
        width: 100%;
    }

    .full input {
        display:block;
        width: 95%;
        font-size: 2em;
        height: 2em;
        margin-bottom: 2em;
    }
}