@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

/*
  Black -- 900
  Extrabold -- 800
  Bold -- 700
  Semibold -- 600
  Medium -- 500
  Regular -- 400
  Light -- 300
*/

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Fira Code", monospace;
  scroll-behavior: smooth;
}

:root {
  --light-blue: #214859;
  --medium-blue: #14303f;
  --dark-blue: #042530;
  --blue-green-light: #5891a0;
  --blue-green-heavy: #31697c;
  --off-white: #ebecf0;
  --back-grain: url(assets/back__grain.png);
}

/* 
- 0-600 : Mobile view
- 600-768 : Tablet view
- 640-1440 : Small desktop
- 1440-1800: Medium desktop / laptop
- 1800-2160: Large desktop
- 2160 + : Xl desktop
*/

html {
  font-size: calc(100vw / 144);
}

@media (max-device-width: 600px) {
  html {
    font-size: calc(100vw / 39.3);
  }
}

@media (min-device-width: 1500px) {
  html {
    font-size: calc(100vw / 180);
  }
}

@media (min-device-width: 1800px) {
  html {
    font-size: calc(100vw / 216);
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}