body{
  background:lightblue;
}

main {
  display: grid;
  grid-template-columns: repeat(1fr, 1fr);
  border:solid 20px black;
  align-content: center; 
  height: 50vh; 
  margin:25vh 0 25vh 0;
  background:lightpink;
}


time {
  text-align: center;
}


.time {
  font-size: 5rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.date {
  font-size: 2rem;
}


.time data,
.date data {
  font-family: monospace;
  font-weight: bold;
}

.hours,
.minutes,
.seconds {
  color: #e74c3c; 
}

.amOrPM {
  text-transform: uppercase;
}

.month {
  text-transform: uppercase;
  color: #3498db; 
  font-size: 3rem;
}

.dayOfMonth {
  font-size: 4rem;
}

.year {
  font-size: 3rem;
  color: #27ae60; 
}

.dayOfWeek {
  font-size: 3rem;
}

.button {
  width: 239px;
  height: 60px;
  background: #ffffff;
  /*my margin was missing*/
  margin:52px auto 0 auto;
  border: 1px solid #707070;
  border-radius: 53px;
  transition:250ms;
  display:flex;
  justify-content: center;
  align-items:center;
  
}
.button h2 {
  line-height: 0px;
  border-radius: 53px;
}
.button:hover,
.button:hover h2 {
  transition:250ms;
  background-color: black;
  color: white;
}