style.css

/* --- BODY --- */
body{
  font-family: 'Roboto', sans-serif;

}


/* --- CONTAINER BACKGROUND COLOR --- */
#display-color {
  background-color: black;
  color: white;
  font-weight: 600;
  border-radius: 40px 0px 40px 0px;
  display: inline-block;
  padding: 2em;
  font-size: 2em;
  right: 50%;
  bottom: 60%;
  transform: translate(50%, 50%);
  position: absolute;
  text-align: center;
  box-shadow: 3px 3px 13px 4px rgba(0,0,0,0.51);

}
/* --- BUTTON --- */
#button-container {
  display: inline-block;
  padding: 2em;
  font-size: 2em;
  right: 50%;
  bottom: 34%;
  transform: translate(50%, 50%);
  position: absolute;
}
input[type=button]{
  margin: 0.3em 0;
  width:17em;
  height:4em;
  border: none;
  color:#ffffff;
  border-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #f29c93;
  text-shadow:inset 0px 1px 0px #b23e35;
  background: linear-gradient(#740101, #ff0000);
  font-weight: bolder;
}
input:hover{
    background:linear-gradient(#040000, #740101);
}
/* --- FOOTER --- */
#container-credits{
  padding: 0.4em;
}
#credits{
  font-weight: bold;
  color: #cc0707;
  }
  #credits:hover{
    color:rgb(151, 21, 21);
  
  }

footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0, 0, 0);
    color: white;
    text-align: center;
    height: 1.5em;
}