.background-image {
  background-image: url('../images/background-img.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

.header {
  height: clamp(5vh, 65vh, 70vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-title {
  font-weight: 200;
  font-family: 'Bitter', sans-serif;
  font-size: clamp(2rem, 7vw, 12rem);
  margin-bottom: 2rem;
  line-height: 1;
  text-shadow: 0 0 50px rgba(176, 166, 185, 0.301),
    0 0 20px rgba(141, 173, 253, 0.719);
}

.main-intro {
  font-size: clamp(1rem, 2vw, 2rem);
  line-height: 1.4;
  font-weight: 300;
}

#name {
  font-weight: 600;
}

#name-dot {
  color: var(--colour-pink);
  text-shadow: none;
  font-weight: 400;
}

.blog-btn {
  background: var(--colour-pink);
  border: none;
  border-radius: 40px;
  padding-block: clamp(0.5rem, 0.8vh,2rem);
  padding-left: clamp(1rem, 1.8vh, 3rem);
  padding-right: clamp(1rem, 1.8vh, 3rem);
  margin-top: clamp(1rem, 2vh, 3rem);
  font-size: clamp(1rem, 2vh, 2rem);
  cursor:pointer;
  color: var(--colour-primary-white);
  transition: all .3s;
}

.blog-btn:hover{
  background: var(--colour-pink);
  transform: scale(1.1);
}

.footer {
  position: absolute;
  bottom: 0;
  height: 8rem;
  width: calc(100% - 60px);
  padding: 25px 0px;
}

.footer-link {
  color: var(--colour-pink)
}