/* font */
:root {
  /* custom font */
  --bs-font-phr: "Playwrite HR", sans-serif;
  --bs-font-cs: "Cantarell", serif;
  --bs-font-ms: "Manjari", system-ui;

  /* custom color */
  --custom-primary-color: #ffb5c0;
  --custom-secondary-color: #fcab82;
  --custom-bg-color: #383749;
  --custom-white: #fdfdfd;
  --custom-tmb: #16161d;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bs-font-phr);
}

p {
  font-family: var(--bs-font-cs);
}

a {
  font-family: var(--bs-font-ms);
}

img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.primary {
  background-color: var(--custom-primary-color);
  color: var(--custom-white);
}

.secondary {
  background-color: var(--custom-secondary-color);
  color: var(--custom-white);
}

.judul-primary {
  color: var(--custom-primary-color);
}

.judul-secondary {
  color: var(--custom-secondary-color);
}

.bg {
  background-color: var(--custom-bg-color);
}

.bg-2 {
  background-color: var(--custom-tmb);
}

.wh {
  color: var(--custom-white);
}

.whImg {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

.tmb {
  color: var(--custom-white);
  background-color: var(--custom-tmb);
  border-color: var(--custom-tmb);
  font-family: var(--bs-font-phr);
}

.tmb:hover {
  color: var(--custom-tmb);
  background-color: var(--custom-white);
  border-color: var(--custom-white);
  /*glow*/
  background: linear-gradient(
    45deg,
    var(--custom-primary-color),
    var(--custom-secondary-color)
  );
}

.medsos {
  padding: 4vh;
  font-size: 8vh;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.medsos:hover {
  color: var(--custom-secondary-color);
}