/* Importing Fonts */
@font-face {
  font-family: "Great Vibes";
  src: "/assets/fonts/GreatVibes-Wmr4.ttf";
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  --color-white: hsl(0, 0%, 100%);
  --color-light-grey: hsl(0, 0%, 75%);
  --color-grey: hsl(0, 0%, 50%);
  --color-dark-grey: hsl(0, 0%, 25%);
  --color-black: hsl(0, 0%, 10%);
  --color-accent: hsl(60, 80%, 90%);
  --ff: "Times New Roman", serif;
  --ff2: "Helvetica";
  --ff3: "Great Vibes";
  --p: 1.25rem/1.5em var(--ff);
  --span: 800 1rem/1em var(--ff2);
  --h1: 600 4rem/1.2em var(--ff3);
  --h2: 600 2rem/1.2em var(--ff2);
  --h3: 600 1.75rem/1.2em var(--ff2);
  --nav-text: 400 1.25rem/1em var(--ff2);
  --button-text: 1.5rem/1em var(--ff2);
  --card-link: 800 1rem/1em var(--ff2);
  --spacing1: 4px;
  --spacing2: 8px;
  --spacing3: 16px;
  --spacing4: 20px;
  --spacing5: 40px;
  --spacing6: 80px;
  --spacing7: 160px;
}

/* Global Styling */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-black);
}

h1 {
  font: var(--h1);
  color: var(--color-white);
}

h2 {
  font: var(--h2);
  color: var(--color-white);
}

h3 {
  font: var(--h3);
  color: var(--color-white);
}

p {
  font: var(--p);
  color: var(--color-white);
}

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

span {
  font: var(--span);
  color: var(--color-light-grey);
}

button {
  border: none;
  background: none;
  color: var(--color-white);
  font: var(--button-text);
}

hr {
  color: var(--color-white);
}

article {
  border-color: var(--color-white);
  border-width: 0.125rem;
}

select {
  border: none;
  background: none;
  color: var(--color-white);
  font: var(--p);
  appearance: none;
}

ol {
  margin-left: 3rem;
  font: var(--p);
  color: var(--color-white);
}

section {
  margin: 0 auto;
  width: 70rem;
}

/* Utility Classes */
.center {
  text-align: center;
}

.fill-width {
  width: 100%;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: flex;
  gap: var(--spacing4);
  flex-wrap: wrap;
}

.flex>* {
  flex: 1;
}

.flex-right {
  flex: 0;
  margin-left: auto;
  margin-right: 1rem;
}

.flex-spaced {
  justify-content: space-between;
}

.padding1 {
  padding: var(--spacing1) 0;
}

.padding2 {
  padding: var(--spacing2) 0;
}

.padding3 {
  padding: var(--spacing3) 0;
}

.padding4 {
  padding: var(--spacing4) 0;
}

.padding5 {
  padding: var(--spacing5) 0;
}

.padding6 {
  padding: var(--spacing6) 0;
}

.padding7 {
  padding: var(--spacing7) 0;
}

.margin1 {
  margin: var(--spacing1) auto;
}

.margin2 {
  margin: var(--spacing2) auto;
}

.margin3 {
  margin: var(--spacing3) auto;
}

.margin4 {
  margin: var(--spacing4) auto;
}

.margin5 {
  margin: var(--spacing5) auto;
}

.margin6 {
  margin: var(--spacing6) auto;
}

.margin7 {
  margin: var(--spacing7) auto;
}

/* Custom Styling */
.nav-text {
  font: var(--nav-text);
  border-radius: 2rem;
}

.nav-text:hover {
  background-color: var(--color-dark-grey);
}

.active {
  background-color: var(--color-white);
  color: var(--color-black);
  pointer-events: none;
}

.card-image {
  height: 12rem;
  width: 100%;
  background-color: yellow;
}

.card-title {
  margin-bottom: var(--spacing1);
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing5);
}

.card {
  flex: 1 1 calc(calc(100% - calc(2*var(--spacing5)))/3);
  max-width: calc(calc(100% - calc(2*var(--spacing5)))/3);
}

.card-flags {
  display: flex;
  justify-content: flex-end;
}

.card-desc {
  margin-bottom: var(--spacing2);
}

.card-link {
  font: var(--card-link);
}