/* Font Copperplate */
@font-face {
  font-family: "Copperplate";
  font-display: swap;
  font-fallback: sans-serif;
  font-weight: 400;
  src: url(../fonts/Copperplate.ttf) format("TrueType");
}

@font-face {
  font-family: "Copperplate";
  font-display: swap;
  font-fallback: sans-serif;
  font-weight: 700;
  src: url(../fonts/font.woff2) format("woff2"),
    url(../fonts/font-2.woff) format("woff"),
    url(../fonts/CopperplateBold.ttf) format("TrueType");
}

@font-face {
  font-family: "Copperplate";
  font-display: swap;
  font-fallback: sans-serif;
  font-weight: 300;
  src: url(../fonts/font-1.woff2) format("woff2"),
    url(../fonts/font-3.woff) format("woff");
}

@font-face {
  font-family: "Copperplate";
  font-display: swap;
  font-fallback: sans-serif;
  font-weight: 500;
  src: url(../fonts/font-2.woff2) format("woff2"),
    url(../fonts/font-4.woff) format("woff");
}

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

* {
  font-family: "Copperplate", sans-serif;
  color: var(--white-clr);
}

:root {
  --white-clr: #ffffff;
  --black-clr: #000000;
  --blue-clr: #423fff;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--white-clr);
}

.container {
  max-width: 120rem;
  margin: 0 auto;
}

::selection {
  color: var(--white-clr);
  background: var(--blue-clr);
}