body {
  font-family: monospace;
  background: linear-gradient(to left, rgb(235, 202, 255), rgb(255, 213, 213));
}

h1,
h2 {
  margin: 0;
  width: 100%;
  color: whitesmoke;
}

h2 {
  background: rgba(65, 50, 123, 0.991);
}

a {
  color: rgb(161, 115, 231);
  font-weight: 700;
}

header {
  background: rgba(66, 50, 118, 0.717);
  align-items: center;
  padding: 15px;
  margin: 0;
}

.logo {
  max-width: 120px;
  border-radius: 50%;
  box-shadow: -3px -2px 2px rgb(255, 222, 251), 3px 2px 2px rgb(172, 197, 255);
}

header h1 {
  font-size: 34px;
}

.container {
  width: 250px;
  height: 250px;
  font-size: 28px;
  font-family: "Courier New", Courier, monospace;
  animation-name: pulse;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.container:after {
  content: "Breathe In";
  position: absolute;
  color: ghostwhite;
  top: calc(50% - 10px);
  left: -5px;
  width: 100%;
  /* vertical-align: middle;
  text-align: center; */
  animation-name: text;
  animation-duration: 10s;

  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.container:before {
  content: "";
  width: 16px;
  height: 50%;
  position: absolute;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.circle {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #d29ffe 0%, #181a78 100%);
  position: absolute;
  top: 10%;
  left: 5%;
}

@keyframes text {
  0% {
    content: "Breathe In";
  }
  100% {
    content: "Breathe Out";
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}

.btn-primary {
  /* background-color: rgb(78, 128, 246); */
  background: rgb(56, 56, 203);
  border: none;
}

.btn-danger {
  background-color: rgb(142, 73, 192);
  border: none;
}

.footer {
  bottom: 0;
  width: 100%;
  height: 60px;
  background: rgba(43, 37, 62, 0.792);
  color: whitesmoke;
}

.activity {
  line-height: 1.5;
  background: darkslategrey;
  color: whitesmoke;
  padding: 2% 3%;
}

.activity img {
  width: 60%;
}

@media (max-width: 768px) {
  header h1 {
    padding-top: 10px;
    text-align: center;
    font-size: 27px;
  }
}