@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@400;700&display=swap');

:root {
  font-size: 16px;
}

*  {
  font-family: 'Karla', sans-serif;
}


/* Fonts */
.heading-font {
  font-family: 'DM Serif Display', serif;
}

/* Colors */
.primary-color-violet {
  color:hsl(270, 9%, 17%);
}

.primary-color-grey-blue {
  color: hsl(216, 30%, 68%);
}

.neutral-color-dark-violet {
  color: hsl(270, 9%, 17%);
}

.neutral-color-grey-violet {
  color: hsl(273, 4%, 51%);
}

.neutral-color-light-grey {
  color: hsl(0, 0%, 98%);
}

/* Background Colors */
.primary-bg-color-violet {
  background-color: hsl(270, 9%, 17%);
}

.neutral-bg-color-light-grey {
  background-color: hsl(0, 0%, 98%);
}

/* Background Gradients */
.primary-bg-gradient-violet {
  background: linear-gradient(hsl(270, 9%, 17%) 80%, hsla(0, 0%, 100%, 0) 20%);
}

@media screen and (min-width: 1024px){
  .primary-bg-lg-gradient-violet {
    background: linear-gradient(180deg, hsl(270, 9%, 17%) 80%, hsla(0, 0%, 100%, 0) 20%);
  }
}

/* Buttons */
.custom-button-white {
  background: none;
  border: 2px solid #fff;
  color: #fff;
  padding: 5px 20px;
}

.custom-button-white:hover{
  background: #fff;
  color:hsl(270, 9%, 17%);
}

.custom-button-violet {
  background: none;
  border: 2px solid hsl(270, 9%, 17%);
  color: hsl(270, 9%, 17%);
  padding: 5px 20px;
}

.custom-button-violet:hover {
  background: hsl(270, 9%, 17%);
  color: white;
}