@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
}

html{
  height: 100%;
}

body{
  background-color: #cccccc;
  position: relative;
  width: 100%;
  height: 100%;
}

.wrap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; 
  width: 100%;
  height: 500px;
  text-align: center;
}

button{
  width: 200px;
  height: 200px;
  margin: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dadada, #b8b8b8);
  box-shadow:  7px 7px 14px #a7a7a7, -7px -7px 14px #f1f1f1;
  border: none;
  outline: none;
}

button:hover{
  cursor: pointer;
}

button:active{
  box-shadow: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#colorcode{
  font-size: 60px;
  margin: 100px auto 0px;
}

#colorcodergb{
  font-size: 30px;
  margin: 100px auto 0px;
}