styles.css

/* set defaults */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}

/* button reset, thanks to: http://code.stephenmorley.org/html-and-css/styling-buttons-with-css3/ */
button{
  margin      : 0;
  padding     : 0;
  border      : 0;
  background  : transparent;
  font-family : inherit;
  font-size   : 1em;
  cursor      : pointer;
}

button::-moz-focus-inner{
  padding : 0;
  border  : 0;
}

/* main */

body {
    background-color: rgb(0%, 0%, 0%);
    font-family: 'Lato';
}

.main {
    box-shadow: 0px 0px 4px 10px aliceblue;
    background-color: aliceblue;
    margin: 50px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 310px;
}

#screen {
    width: 308px;
    height: 90px;
    padding: 20px 4px;
    font-size: 39px;
    text-align: right;
    background-color:rgb(100%, 100%, 100%);
    caret-color: rgb(100%, 100%, 100%);
}

#screen, .button {
    margin: 1px;
}

#screen:focus {
    outline: none;
}

textarea:focus, input:focus{
    outline: none;
}

.buttons {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.button {
    width: calc(302px/4);
    height: calc(306px/4);
    font-size: 38px;
    text-align: center;
    background-color: rgb(96.1%, 96.1%, 96.1%);
    box-shadow: inset 0px 0px 11px 0px lightgrey;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.danger {
    background-color: rgb(92.1%, 90.6%, 90.6%);
}

.expand-width {
    width: calc(calc(306px/4)*2);
}

.expand-height {
    height: calc(calc(310px/4)*2);
}

.move-up {
    position: absolute;
    bottom: 0;
}

.ios-position-bugfix {
    left:0;
}

.move-left {
    right: calc(310px/4);
}

.js-color {
    width: 100px;
    height: 66px;
}

.color-picker-button {
    width: calc(302px/4);
    height: calc(306px/2);
    font-size: 19px;
}

#color-picker > p {
    padding: 10px;
    width: 100%;
    text-align: center;
}