/* STYLES */
html,  body {
  align-items: center;
  background-color: hsl(217, 54%, 11%);
  display: flex;
  height: 100%;
  width: 100%;
  font-family: 'Outfit', sans-serif;
  font-size: 1.08rem;
  justify-content: center;
  margin: 0;
  padding: 0;
}

h1 {
  color: hsl(0, 0%, 100%);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 1.2rem;
  text-align: left;
}

h1:active {
  color: hsl(178, 100%, 50%);
}

p {
  color: hsl(215, 51%, 70%);
  font-weight: 100;
}

footer {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  width: 19.2rem;
}

span {
  color: hsl(0, 0%, 100%);
  cursor: pointer;
  font-weight: 400;
}

span:active {
  color: hsl(178, 100%, 50%);
}

hr {
  width: 100%;
  border: none;
  height: 1px;
  background-color: hsl(215, 32%, 27%);
  margin: 1.8rem auto .9rem auto;
}

/* CARD */
.container {
  align-items: center;
  background-color: hsl(216, 50%, 16%);
  border-radius: 1rem;
  box-shadow: -.24rem .9rem .9rem 1.32rem hsl(217, 54%, 11%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.8rem;
  margin: 1.2rem;
  max-width: 21rem;
}

/* IMAGE - EQUILIBRIUM */
.image {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.equilibrium {
  border: 1rem;
  cursor: pointer;
  display: block;
  max-width: 19.2rem;
  position: relative;
  border-radius: 1rem;
  z-index: 4;
}

.equilibrium:active {
  z-index: 1;
}

.overlay {
  position: absolute;
  height: 19.2rem;
  width: 19.2rem;
  top: 0;
  border-radius: 1rem;
  background-color: hsl(178, 100%, 50%);
  z-index: 2;
  opacity: 50%;
}

.icon-view {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.88rem;
  height: 2.88rem;
  margin-top: -5rem;
  margin-left: -1.44rem;
  z-index: 3;
}

/*MAIN CONTENT */
.content {
  max-width: 19.2rem;
}

.stats {
  display: flex;
  justify-content: space-between;
  width: 19.2rem;
}

.stats-eth {
  display: inline;
  text-align: left;
  margin-right: 6.2rem;
}

.stats-time {
  display: inline;
  text-align: right;
}

.eth {
  color: hsl(178, 100%, 50%);
}

.eth-image, .clock-image, .eth, .clock {
  display: inline;
}

/*FOOTER*/
.photo {
  max-width: 2.4rem;
  max-height: 2.4rem;
  border: solid hsl(0, 0%, 100%);
  border-radius: 10rem;
}

.creation {
  margin-left: 1.2rem;
}