@import url("../../assets/css/font-awesome.min.css");

html {
  background: url("background-sf.jpg") center top;
  background-size:cover;
  font-family:'helvetica neue';
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  flex:1;
  min-height: calc(100vh - 50px);
  align-items: center;
}

.icon {
  text-decoration: none;
  color: black;
  font-size: 25px;
}

  .icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
  }

.gohome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: black;
}

.clock {
  width: 30rem;
  height: 30rem;
  border:20px solid #5C5C5C;
  border-radius:50%;
  margin:50px auto;
  position: relative;
  padding:2rem;
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.1),
    inset 0 0 0 3px #EFEFEF,
    inset 0 0 10px black,
    0 0 10px rgba(0,0,0,0.2);
  top: calc(25vh - 60px);
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); /* account for the height of the clock hands */
  background: url("clock-face.jpg");
  background-size:cover;
}

.hand {
  width:50%;
  height: 2px;
  background:black;
  position: absolute;
  top:50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  /* transition: all 0.05s; */
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hand.hour-hand {
  width: 25%;
  right: 50%;
  height: 5px;
}

.hand.min-hand {
  width: 35%;
  right: 50%;
  height: 3px;
}

.hand.second-hand {
  width: 40%;
  right: 50%;
  background: #820000;
}