/* Font Faces */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Assistant:wght@200..800&family=Baskervville:ital,wght@0,400..700;1,400..700&family=Bitcount+Single:wght@100..900&family=Finlandica+Text:ital,wght@0,100..900;1,100..900&family=Lexend:wght@100..900&family=Marcellus&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mozilla+Headline:wght@200..700&family=New+Tegomin&family=Outfit:wght@100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&family=Urbanist:ital,wght@0,100..900;1,100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap");

/* Fonts:
1. Montserrat
2. Afacad
3. New Tegomin
4. Outfit (NavBar anchor)
5. Bitcount Single
6. Space Grotesk
7. Mozilla Headline
8. Assistant
9. Red Hat Display (Arul Nova Title)
10. Lexend (h2)
11. Urbanist (Hero Buttons)
12. Finlandica Text (h1)
13. Marcellus
14. Zilla Slab
15. Baskervville 
16. Shippori Antique B1

*/

/* Element Selectors */

html {
  scroll-behavior: smooth;
  scrollbar-width: none; /* Options: auto, thin, none */
}

body {
  background-color: #030707;
  color: #fafaff;
  display: flex;
  flex-direction: column;
}

h2 {
  font-family: "Lexend", sans-serif;
  font-style: normal;
}

a {
  text-decoration: none;
  color: #fafaff;
}

hr {
  margin: 1rem;
  opacity: 25%;
  border: none;
  border-top: 1px solid #b0e4cc94;
}

/* MORE Selectors */

@view-transition {
  navigation: auto;
}

::selection {
  background-color: #b0e4cc94; /* the blue box color */
  color: #ffffff;
}

/* Class Selectors */

/* Navigation Bar CSS */

.NavBar {
  border-radius: 3rem;
  position: relative;
  top: 1rem;
  background-color: #b0e4cc94;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;

  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;

  width: fit-content;
  margin-left: 1rem;
}

.NavBar a {
  font-family: "Outfit", sans-serif;
  font-style: normal;
  color: #030707;
  position: relative;
  text-decoration: none;
}

.NavBar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #fafaff;
  transition: width 150ms linear;
}

.NavBar a:hover {
  color: #fafaff;
  transition: 150ms linear;
}

.NavBar a:hover::after {
  width: 100%;
}

.Nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Body CSS */

.BlogHead {
  padding-top: 2rem;
  padding-left: 6rem;
}

.BlogHead h1 {
  font-family: "Lexend";
}

.BlogHead p {
  font-family: "Red Hat Display";
  font-size: 14px;
}

.BlogSpace {
  display: grid;
  grid-auto-columns: 200px;
  grid-auto-rows: 200px;
  gap: 1em;
  grid-template-areas:
    "box-1 box-1 box-1 box-1 box-1"
    "box-2 box-2 box-2 box-2 box-3"
    "box-4 box-5 box-5 box-5 box-5";

  padding-top: 2rem;
  padding-left: 9rem;
  padding-right: 9rem;
  padding-bottom: 5rem;
}

.BlogPost {
  padding: 2em;
  background-color: #1631285b;
  border-radius: 15px;
}