*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #000000;
}

a:focus,
button:focus,
button:focus-visible {
  outline: 2px solid black;
}

/* =========== Fonts =========== */
@font-face {
  font-family: 'MersadBlack';
  src: url('/fonts/Mersad-Black.woff2') format('woff2'),
    url('/fonts/Mersad-Black.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MersadExtBd';
  src: url('/fonts/Mersad-ExtraBold.woff2') format('woff2'),
    url('/fonts/Mersad-ExtraBold.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MersadBold';
  src: url('/fonts/Mersad-Bold.woff2') format('woff2'),
    url('/fonts/Mersad-Bold.otf') format('opentype');
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MersadMed';
  src: url('/fonts/Mersad-Medium.woff2') format('woff2'),
    url('/fonts/Mersad-Medium.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Mersad';
  src: url('/fonts/Mersad-Regular.woff2') format('woff2'),
    url('/fonts/Mersad-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MersadLight';
  src: url('/fonts/Mersad-Light.woff2') format('woff2'),
    url('/fonts/Mersad-Light.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}


/* =========== Fonts =========== */


/* =========== Resets =========== */
ul {
  list-style: none;
  list-style-type: none;
}

ul>li {
  padding-left: 2rem;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: inherit;
  background-color: rgba(255, 255, 255, 0.69);
  transition: .5s ease-in-out;
}

button:hover {
  transform: scale(1.03);
}

::selection {
  background-color: #FF1D25;
  color: var(--bg);
}

/* =========== Resets =========== */

html {
  background-color: var(--bg);
  font-size: 1vw;
  font-family: 'Mersad';
}