@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
  width: 90%;
  margin: 0 auto;
}

.heading-container {
  padding: 2.5em 0;
  text-align: center;
}

.heading-container h1 {
  font-family: "Zilla Slab", serif;
  font-weight: 900;
}

.list-container {
  width: 100%;
}

.list-container .list li {
  list-style: none;
  text-align: center;
}

.list li a {
  font-family: "Open Sans", sans-serif;
  color: #000;
  text-decoration: none;
  display: block;
  padding: 1em 0;
  font-weight: 700;
  border-bottom: 1px solid #000;
  position: relative;
  transition: all 150ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.list li a i {
  position: absolute;
  top: 36%;
  right: 10%;
}

.list li a:hover,
.list li a:focus {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(173, 216, 230, 1) 40%
  );
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  letter-spacing: 2px;
}

.profile-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  margin: 0 auto;
  padding: 2em 0;
}

.profile-container a i {
  transition: all 150ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.profile-container a i:hover,
.profile-container a i:focus {
  transform: scale(1.3);
}

@media (min-width: 600px) {
  .heading-container h1 {
    font-size: 3em;
  }
}

@media (min-width: 900px) {
  .heading-container h1 {
    font-size: 5em;
  }
}