body{background: #334d50;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #273d3f, #334d50);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #273d3f, #334d50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    margin: 0;
    font-family:'Montserrat', Verdana, Geneva, Tahoma, sans-serif;
}

h1{font-size: 2em;
    color: #fff; 
    text-align: center; 
    letter-spacing: 0.1em;
    margin: 1.5% 0 0 0;
    line-height: 1.4em;
    font-weight: normal;
    cursor: default;}

#colorDisplay{font-size: 1.5em; font-weight: 700;}

#message{display: inline-block;
         color:rgb(255, 98, 125);
         font-size: 0.8em;
         font-weight: 700;
         width: 20%;
        cursor: default;}

.container{
    max-width: 600px;
    margin: 0 auto;
}

.square{
    float: left;
    width: 30%;
    height: 0;
    padding-bottom: 30%;
    background-color: darksalmon;
    margin: 1.5%;
    border-radius: 30px;
    transition: background 0.5s;
}

.square:hover{
   box-shadow: 2px 2px 5px #203335;
}

#stripe{
    height: 30px;
    text-align: center;
    margin: 1% 0;
    background-color: #fff;
}

.selected{
    background-color: rgb(255, 98, 125);
    color: #fff;
}

button{
    border:none;
    color: #000;
    background-color: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
    cursor: pointer;
    line-height: 30px;
    padding: 0 2%;
}

button:focus{
    outline: none;
}

button:hover{
    background-color: rgb(255, 98, 125);
    color: #fff;
}

footer{
    clear: left;
    color: #fff;
    font-size: 0.7em;
    text-align: center;
    padding: 1% 0 0 0;
    cursor: default;
}