body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: center;
}

h1 {
  color: rgb(0, 128, 255);
  text-align: center;
}

/* From Uiverse.io by BHARGAVPATEL1244 */
button {
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0.9rem 2rem;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  position: relative;
  display: inline-block;
  letter-spacing: 0.05rem;
  font-weight: 700;
  font-size: 17px;
  border-radius: 500px;
  overflow: hidden;
  background: rgb(0, 128, 255);
  color: ghostwhite;
  margin: 0 auto;
  display: block;
}

button span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
}

button:hover span {
  color: aliceblue;
}

button::before,
button::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

button::before {
  content: "";
  background: rgb(93, 161, 220);
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

button:hover::before {
  transform: translate3d(100%, 0, 0);
}

a {
  text-decoration: none;
  color: white;
}

hr {
  width: 100vh;
}

h2 {
  color: rgb(0, 128, 255);
}

.projects-1 {
  color: rgb(0, 179, 255);
}

.projects-2 {
  color: rgb(0, 179, 255);
}

img {
  width: 40vh;
  border-radius: 30px;
}