@font-face {
  font-family: thicboi;
  src: url(font/THICCCBOI-Regular.ttf);
}
@font-face {
  font-family: thicboi-bold;
  src: url(font/THICCCBOI-Bold.ttf);
}
@font-face {
  font-family: thicboi-light;
  src: url(font/THICCCBOI-Light.ttf);
}
body {
  font-family: thicboi;
}

h1,
h2,
a {
  font-family: thicboi-bold;
}

h5,
h6,
p,
small,
span {
  font-family: thicboi-light;
}

:root {
  --background: #0789f4;
  --btn: #0088ff;
  --btn_hover: #005bdb;
}

.bg-purple {
  background: rgb(27, 27, 27);
  background: linear-gradient(
    37deg,
    rgba(27, 27, 27, 0.469625350140056) 0%,
    rgba(23, 23, 23, 0.46682422969187676) 100%
  );
}
.text-purple {
  background: rgb(0, 121, 185);
  background: linear-gradient(
    37deg,
    rgb(40, 180, 255) 0%,
    rgb(108, 79, 255) 100%
  );
  background-clip: text;
  color: transparent;
}

.btn-purple {
  background-color: var(--btn);
  color: white;
}
.btn-purple:hover {
  background-color: var(--btn_hover);
  color: white;
}

.shadow-p {
  /*box-shadow: 0px 0px 40px var(--background);*/
  transition: ease-out 0.2s;
}

.shadow-p:hover {
  color: var(--btn_hover);
  transition: ease-in 0.2s;
}

.border-purple {
  border: 1px solid var(--text);
}

.background1 {
  background-position: center;
  background-size: contain;
}

.background2 {
  background-position: center;
  background-size: contain;
}

@media only screen and (min-width: 768px) {
  .background1 {
    background-repeat: no-repeat;
    background-image: url(img/background1.png);
  }
  .background2 {
    background-repeat: no-repeat;
    background-image: url(img/background2.jpg);
  }
}

@media only screen and (max-width: 767px) {
  .background1 {
    background-repeat: no-repeat;
    background-image: url(img/background1-mobile.png);
  }
  .background2 {
    background-repeat: no-repeat;
    background-image: url(img/background2-mobile.png);
  }
}