/*-- global --*/
@font-face {
  font-family: etna;
  src: url(../font/etna.otf);
}

:root {
  --clr-0: #03180a;
  --clr-1: #2b1d0e;
  --clr-2: #ffffff;
  --clr-2-tr: #ffffff20;

  --clr-3: #FFD700;
  --clr-3-dark: rgb(190 190, 1);

  --clr-4: #fb3316;
  --clr-4-light: #fd7543;
}

h1,
h2,
h3,
h4,
h5,
button {
  font-family: "etna", sans-serif;
}

p,
a,
li {
  font-family: "Barlow Condensed", sans-serif;
}

h1 {
  font-size: 25rem;
  font-weight: 400;
  line-height: 0.6;
}
h2 {
  font-size: 5rem;
  font-weight: 400;
  line-height: 1;
}
h3 {
  font-size: 10rem;
  font-weight: 400;
  line-height: 1.2;
}
h4 {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.2;
}

h5 {
  font-size: 2rem;
  font-weight: 400;
}

p,
li,
a {
  font-size: 1.2rem;
  font-weight: 200;
}

button {
  font-size: 2rem;
}

a {
  color: var(--clr-2);
  transition: 0.3s;
}
a:hover {
  color: var(--clr-3);
}

span {
  color: var(--clr-3);
}

::-webkit-scrollbar {
  width: 0.5rem;
  background: var(--clr-1);
}
::-webkit-scrollbar-track {
  border-left: none;
}
::-webkit-scrollbar-thumb {
  background: var(--clr-3);
}

/* For webkit-based browsers (Chrome, Safari, newer versions of Edge) */
::selection {
  background-color: #FFD700; /* Change this to your desired highlight color */
  color: #333333; /* Change this to your desired text color when highlighted */
}

/* For Firefox */
::-moz-selection {
  background-color: #FFD700; /* Change this to your desired highlight color */
  color: #333333; /* Change this to your desired text color when highlighted */
}