@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  src: local(""),
       url("../fonts/rubik-v14-latin-regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url("../fonts/rubik-v14-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap
}

:root {
  --color-primary-eerie: rgb(36, 36, 35);
  --color-primary-jet: rgb(51, 53, 51);
  --color-primary-maize: rgb(245, 203, 92);
  --color-primary-alabaster: rgb(232, 237, 223);
  --color-primary-timberwolf: rgb(207, 219, 213);
  --color-white: white;
  --color-gray-transparent: rgba(53, 53, 53, 0.5);
}

::-moz-selection {
  background: var(--color-gray-transparent);
}

::selection {
  background: var(--color-gray-transparent);
}

body {
  font-family: "Rubik";
  margin: 0;
  padding: 0;

  background-image: url("../images/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

img {
  aspect-ratio: attr(width) / attr(height);
}

.main-container {
  height: 100vh;
  width: 100vw;

  background-color: rgba(0, 0, 0, 0.6);

  display: flex;
  justify-content: center;
  align-items: center;
}

.title-container {
  font-size: x-large;
  color: var(--color-white);

  text-align: center;
}