/* reset */
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
/* reset ends */

/* theme base colors */
html {
  color-scheme: light dark;
}

:root {
  --clr-text: hsl(204, 100%, 1%);
  --clr-body: hsl(204, 20%, 15%);
  --clr-surface: hsl(0, 0%, 100%);
  --clr-primary: hsl(202, 100%, 32%);
  --clr-secondary: hsl(208, 100%, 97%);
  --clr-accent: hsl(28, 100%, 47%);

  --clr-alpha: hsla(188, 51%, 32%, 0.3);

  --clr-stilla: hsl(40, 81%, 60%);
  --clr-stillb: hsl(34, 81%, 40%);
  --clr-stillc: hsl(25, 72%, 37%);

  --clr-movea: hsl(105, 56%, 75%);
  --clr-moveb: hsl(105, 40%, 60%);
  --clr-movec: hsl(105, 31%, 40%);

  --ff-base: 'IBM Plex Sans', sans-serif;
  --ff-accent: 'IBM Plex Sans Condensed', sans-serif;

  --fs-300: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --fs-400: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
  --fs-500: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
  --fs-600: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
  --fs-700: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
  --fs-800: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-text: hsl(0, 0%, 100%);
    --clr-body: hsl(204, 20%, 85%);
    --clr-surface: hsl(204, 100%, 1%);
    --clr-primary: hsl(202, 100%, 32%);
    --clr-secondary: hsl(208, 83%, 17%);
    --clr-accent: hsl(28, 100%, 47%);

    --clr-alpha: hsla(184, 100%, 88%, 0.3);
  }
}

body {
  font-size: var(--fs-400);
  font-family: var(--ff-base);
  line-height: 1.4;
  color: var(--clr-body);
}

.wrapper {
  width: min(100% - 3rem, 65ch);
  /* width: min(50rem, 100% - 2rem); */
  margin-inline: auto;
  /* border: 3px solid pink; */
}

/*Header section*/
.primary-header {
  margin-bottom: 3rem;
  padding: 1rem;
}

.header-container {
  width: min(100% - 3rem, 78rem);
  margin-inline: auto;
}

.nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
/*Header section ends*/

.main-layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 
    rows 1fr rows;
}

.flow>*+* {
  margin-top: var(--flow-space, 0.4em);
}


.site-title {
  text-align: center;
  font-size: 2rem;
}

.site-title span {
  text-align: center;
  /* font-size: 1.6rem; */
  text-transform: uppercase;
  color: rgb(225, 95, 245);
}

h1 {
  /* --flow-space: 2em; */
  margin-top: 0.8em;
}

h2 {
  --flow-space: 0.8em;
}

h1, h2, h3 {
  font-family: var(--ff-accent);
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-700);
  color: var(--clr-primary);
}

h2 {
  font-size: var(--fs-600);
  color: var(--clr-primary);
}

h2 span {
  color: var(--clr-accent);
}

h3 {
  font-size: var(--fs-500);
  color: var(--clr-text);
}

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

a:hover, 
a:focus {
color: var(--clr-accent);
}

::marker {
  color: var(--clr-primary);
}

.text-center {
  text-align: center;
}

.card {
  /* margin: 0.3rem; */
  /* display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; */
}

.card-content {
  padding: 1rem;
  /* display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; */
}



/* Footer */

.main-footer {
  padding: 2em;
  text-align: center;
  font-size: medium;
  color: var(--clr-body);
  background-color: var(--clr-surface);

  /* border: 1px solid pink; */
}

/* https://www.youtube.com/watch?v=z2kuC7w9emE */
[class*="grid-"] {
  display: grid;
  gap: 0.1rem;
}

.grid-stack {
  display: grid;
  place-items: center;
}

.grid-stack>* {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* img can be your style like bg-img or whatever */
.grid-stack>img {
  aspect-ratio: 16/9;
  object-fit: cover;
  z-index: -1;
}


/* Media Queries */

@media (min-width: 62em) {
  .grid-even-columns {
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  }
}

@media (min-width: 58em) {
  .grid-auto-flow {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}


/* grid-styling resource - kevin powell */
/* https://www.youtube.com/watch?v=r1IitKbJRFE */