body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #232323;
}

a {
    text-decoration: none;
    color: blue;
}

#table{
    width: 80%;
    margin:10% auto;
    text-align: center;
}

.colorCell{
    width:50%;
}

.formCell{
    vertical-align: top;
    line-height:1.5;
}


#header {
    padding:1px;
    background-color: #dddddd;
    text-align: center;
    font-weight: lighter;
    line-height:1.1;

}

.instructions{
    margin: 0;
    padding: 0;
}

#alphaEraserTitle{
    font-size: 1.5em; 
}

.colorSquare {
    width: 45%;
    padding-bottom: 45%;
    border-radius: 15%;
    display: inline-block;
    vertical-align: top;
    margin: 5% auto;
    position: relative;
    color:white;
    border: 1px solid #dddddd;
}

.image{
    position: relative;
    background-image: url(checker_pattern.png);
    background-size: 28%;
    background-position: -2% -2%;
}

#transparentColor,
#opaqueColor{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    border-radius: 15%;
}

.rgbField{
    width: 50px;
}

.alphaHexField{
    width:164px;
}

.outputTitleDisabled,
.outputLabelDisabled{
    color:#dddddd;
}

#errorHandling{
    color: red;
    font-style: italic;
}

input::placeholder{
    color:#dddddd;
    font-style: italic;
    font-weight: 100;
}

#footer{
    text-align: center;
}