@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

:root {
  --clr-white: #fff;

  --site-bkg-clr: #121316;

  --s-card-bkg-clr: #181A1B;
  --s-card-bdr-clr: rgba(151, 151, 151, 0.15);
}

/**
 * Reference colors from google material. 000 to 999 format.
 *
 * https: //material.io/archive/guidelines/style/color.html#color-color-palette
 */

:root {

  --clr-white: #fff;

  /* google material 'Grey' */
  --clr-mono-050: #FAFAFA;
  --clr-mono-100: #F5F5F5;
  --clr-mono-200: #EEEEEE;
  --clr-mono-300: #E0E0E0;
  --clr-mono-400: #BDBDBD;
  --clr-mono-500: #9E9E9E;
  --clr-mono-600: #757575;
  --clr-mono-700: #616161;
  --clr-mono-750: #565656;
  --clr-mono-800: #424242;
  --clr-mono-850: #303030;
  --clr-mono-900: #212121;
  --clr-mono-950: #171717;
  --clr-mono-990: #0D0D0D;
  --clr-mono-999: #000;

  /* google material 'Blue' */
  --clr-prime-050: #E3F2FD;
  --clr-prime-100: #BBDEFB;
  --clr-prime-200: #90CAF9;
  --clr-prime-300: #64B5F6;
  --clr-prime-400: #42A5F5;
  --clr-prime-500: #2196F3;
  --clr-prime-600: #1E88E5;
  --clr-prime-700: #1976D2;
  --clr-prime-800: #1565C0;
  --clr-prime-900: #0D47A1;

  --clr-prime-A100: hsl(217, 100%, 75%);
  --clr-prime-A200: #448AFF;
  --clr-prime-A400: #2979FF;
  --clr-prime-A700: #2962FF;

  --clr-red: #F83A3A;
  --clr-green: #0EEC0C;

  --clr-yellow: #FFFF00;
  --clr-blue: #90CAF9;
}

/**
 * Application colors
 * Based on 10..90 emphasis levels. 
 * 50 is the default, and not suffixed.
 */

:root {

  /* #region    Text Colors */
  --txt-30: var(--clr-mono-500);
  --txt-40: var(--clr-mono-400);
  --txt-50: var(--clr-mono-300);
  --txt-60: var(--clr-mono-200);
  --txt-70: var(--clr-mono-100);
  --txt-80: var(--clr-mono-050);

  --txt: var(--txt-60);

  --txt-red: rgb(255, 92, 92);

  --txt-title: var(--clr-mono-00);
  --txt-prime: var(--clr-prime-400);

  --txt-link: var(--clr-prime-300);
  --txt-term: #61FF7E;
  --txt-brand: var(--clr-prime-050);
  --txt-code: rgb(253, 247, 190);
  /* #endregion Text Colors */

  /* #region    Ico Colors */
  --ico-30: var(--clr-mono-900);
  --ico-40: var(--clr-mono-750);
  --ico-50: var(--clr-mono-700);
  --ico-60: var(--clr-mono-500);
  --ico-70: var(--clr-mono-500);
  --ico: var(--ico-50);

  --ico-prime: var(--clr-prime-400);
  /* #endregion Ico Colors */

  /* #region    Border Colors */
  --bdr-30: var(--clr-mono-950);
  --bdr-40: var(--clr-mono-900);
  --bdr-50: var(--clr-mono-850);
  --bdr-60: var(--clr-mono-800);
  --bdr-70: var(--clr-mono-700);
  --bdr: var(--bdr-50);

  --bdr-note: var(--clr-mono-700);

  --bdr-sel: var(--clr-prime-500);
  /* #endregion Border Colors */

  /* #region    Backbround Colors */
  --bkg-10: var(--clr-mono-999);
  --bkg-20: var(--clr-mono-990);
  --bkg-30: var(--clr-mono-950);
  --bkg-40: var(--clr-mono-900);
  --bkg: var(--clr-mono-850);
  --bkg-50: var(--clr-mono-850);
  --bkg-60: var(--clr-mono-800);
  --bkg-70: var(--clr-mono-700);

  --bkg-prime: #121316;
  --bkg-second: #1A1B1E;

  --bkg-hover: var(--clr-mono-700);

  --bkg-sel: var(--bkg-60);
  --bkg-pressed: var(--clr-mono-600);

  --bkg-app: var(--bkg-20);
  /* #endregion Backbround Colors */
}

:root {
  --grid-page: .5rem 1fr .5rem;
}

:root {
  font-size: 16px;
}

body {
  margin: 0;
  background: #1A1B1C;
  font-family: 'Open Sans';
  font-size: 1rem;
  color: var(--txt);
}

a {
  color: rgb(112, 176, 255);
}

* {
  /* best practice for application */
  box-sizing: border-box;
  /* To allow flex/grid box to shrink smaller than content. 
    see: https://stackoverflow.com/a/36247448/686724 */
  min-width: 0;
  min-height: 0;
  /* layout normalization */
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

p {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  margin: 1.5rem 0 1.5rem 0;
}

strong {
  font-weight: 600;
  letter-spacing: 0.05rem;
}

.page-content {
  padding: 1rem 0 1rem 0;
  grid-column: 2 / 3;

}

section.outer {
  display: grid;
  grid-template-columns: minmax(30rem, 80rem);
  justify-content: center;
}

section.inner {
  padding: 2rem;
}

section.page-footer {
  grid-column: 2 / 3;
  margin-top: 2rem;
  margin-bottom: 3rem;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content;
  grid-gap: 2rem;

  /* or max-content */
  justify-content: center;

}

/* horizontal center */

section.page-footer a {
    border-radius: 5px;
    background: #2e2e2e;
    padding: 2rem 2rem;
    color: #fff;
    text-decoration: none;
    display: grid;
    justify-content: center;
    grid-gap: .5rem;
  }

section.page-footer a span {
      font-size: 1.25rem;
      letter-spacing: .05em;
      text-align: center;
      font-weight: 600;
    }

section.page-footer a small {
      font-size: 0.75rem;

    }

a-resources {
  z-index: 100;
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 1rem;
}

a-resources img {
    width: 4rem;
  }

@media only screen and (max-width: 700px) {
    a-resources img {
      width: 2.5rem;
      flex-direction: column;
      align-items: flex-start;
      /* Optional: to align items to the left */
    }
}

@media only screen and (max-width: 1300px) {
    header a.profile {
      width: 5.5rem;
      bottom: -3.25rem;
    }
}

@media only screen and (max-width: 1200px) {
  :root {
    font-size: 12px;
  }
}

@media only screen and (max-width: 600px) {
  section.inner {
    padding: 1.5rem;
  }

  p {
    font-size: 1.5rem;
  }
}

header {
  position: relative;
  grid-column: 1 / 4;

  height: 35rem;
  background-color: #000414;

  display: grid;
  grid-template-columns: var(--grid-page);
  grid-template-rows: 3rem;
  align-items: center;
  justify-items: center;
  align-content: center;
  gap: 2rem;
  border-bottom: solid 2px #fff;

  height: auto;
  min-height: auto;
  aspect-ratio: 4 / 1;

}

header .cover {
    position: absolute;
    width: 100%;
    height: 100%;
  }

header .cover img {
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
      height: 100%;
    }

header a.profile {
    display: block;
    position: absolute;
    border-radius: 7rem;
    z-index: 10;
    width: 7rem;
    bottom: -4rem;


  }

header a.profile img {
      width: 100%;
      height: 100%;
    }

section.intro {
  position: relative;
  grid-column: 1 / 4;

  height: auto;
  padding: 7rem 0 10rem 0;
  background-color: #000414;

  display: grid;
  grid-template-columns: var(--grid-page);
  grid-template-rows: 3rem;
  align-items: center;
  justify-items: center;
  align-content: center;
  gap: 2rem;
}

section.intro h3 {
    grid-column: 2 / 3;
    font-size: 3rem;
    font-weight: 300;
    text-align: center;
  }

section.intro h1 {
    grid-column: 2 / 3;
    color: #FFF;
    font-size: 4rem;
    font-weight: 500;
    z-index: 1;
    text-align: center;
  }

section.intro div.abc {
    display: none;
    font-size: 3rem;
    font-weight: 200;
    letter-spacing: .1em;
    font-family: 'Roboto Mono';

    grid-column: 2 / 3;
    z-index: 1;
  }

section.intro div.abc span.a {
      color: #9AFF28;
    }

section.intro div.abc span.b {
      color: #DCDD9D;
      font-size: 2.75rem;
    }

section.intro div.abc span.c {
      color: #43d1fc;
    }

section.intro .prime {
    padding: 1rem 0 1rem 0;
    grid-column: 2 / 3;
    font-size: 2rem;
  }

section.intro .prime a {
      color: rgb(221, 236, 255);
    }

section.intro nav {
    grid-column: 2 / 3;

    display: grid;
    align-items: center;
    justify-items: center;
    grid-auto-flow: column;
    grid-gap: 1rem;
  }

/* will align the content items on top, can be center */

section.intro nav a {
      font-size: 1.5rem;
    }

section.intro nav a small {
        color: rgba(255, 255, 255, .5);
      }

section.intro nav .sep {
      width: 3px;
      height: 1.5rem;
      background: #e0e0e0;
    }

@media only screen and (max-width: 1500px) {
    header a.profile {
      width: 6rem;
      bottom: -3.5rem;
    }
}

@media only screen and (max-width: 1300px) {
    header a.profile {
      width: 5.5rem;
      bottom: -3.25rem;
    }
}

@media only screen and (max-width: 1100px) {
    header a.profile {
      width: 5rem;
      bottom: -3rem;
    }
}

@media only screen and (max-width: 800px) {
    section.intro span.right-arrow {
      display: none;
    }

    section.intro nav {
      grid-auto-flow: row;
      justify-content: center;
    }

      section.intro nav .sep {
        display: none;
      }
    header a.profile {
      width: 4rem;
      bottom: -2.5rem;
    }
}

@media only screen and (max-width: 600px) {

  header {
    aspect-ratio: 4 / 1.5;
  }

  section.intro {
    padding: 4.5rem 0 2rem 0;
    grid-gap: 1rem;

  }

    section.intro span.left-arrow {
      display: none;
    }


    section.intro h1 {
      font-size: 3rem;
    }

    section.intro h3 {
      font-size: 2.5rem;
    }

    section.intro .prime {
      padding: 1rem 0 1rem 0;
      grid-column: 2 / 3;
      font-size: 2rem;
      text-align: center;
    }

      section.intro .prime a {
        color: rgb(136, 199, 255);
      }

    section.intro nav {
      grid-gap: .75rem;
    }
}

y-section {
  margin-top: 2rem;
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6rem 1fr;
}

y-section h2 {
    align-self: center;
    font-weight: 500;
    font-size: 2rem;
  }

y-section section {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    justify-content: start;
    -moz-column-gap: 5rem;
         column-gap: 5rem;
    row-gap: 3rem;
  }

y-section section y-card {


      padding: 1rem;
      display: grid;
      grid-template-rows: auto 1fr;
      row-gap: 2rem;
      align-items: start;
    }

y-section section y-card a {
        display: contents;
      }

y-section section y-card img {
        display: block;
        width: 100%;
        border-radius: .5rem;
      }

y-section section y-card h3 {
        font-size: 1.5rem;
        color: var(--clr-white);
        font-weight: 500;
      }

y-section section y-card:hover {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        background: rgba(0, 0, 0, 0.564);
        border-radius: 5px;
      }

.body-index {
	margin-top: 1rem;
}

/* Hacky for now - Allows to have text and kind of the right visual */

.body-index .logo-h1 {
		display: grid;
		grid-template-columns: auto 3.25rem auto;
		justify-content: center;
		/* Centers the whole grid horizontally */
		align-items: center;
		/* Aligns items vertically */
		font-size: 5.5rem;
		font-family: 'Lato';
	}

.body-index .logo-h1 span:nth-child(1) {
			/* Styles for the first span (e.g., "devai") */
			text-align: right;
			/* Optional: align right for balance */
		}

/* dot */

.body-index .logo-h1 span:nth-child(2) {
			background-color: var(--txt-30);
			/* Black color for the dot */
			border-radius: 50%;
			/* Makes it a perfect circle */
			width: 1.5rem;
			/* Width of the circle */
			height: 1.5rem;
			justify-self: center;
			margin-top: 1.5rem;
		}

.body-index .logo-h1 span:nth-child(3) {
			/* Styles for the third span (e.g., "run") */
			text-align: left;
			/* Optional: align left for balance */
		}

.body-index .tag-line {
		text-align: center;
		font-size: 2.5rem;
		font-weight: 300;
		margin-top: .5rem;
	}

.body-index .tag-line .red {
			font-size: 2.5rem;
			color: var(--txt-40);
			color: var(--txt-red);
		}

.body-index .tag-line .yellow,
		.body-index .tag-line .green,
		.body-index .tag-line .blue {
			font-weight: 500;
		}

.body-index .tag-line .yellow {
			color: var(--clr-yellow);
		}

.body-index .tag-line .green {
			color: var(--clr-green);
		}

.body-index .tag-line .blue {
			color: var(--clr-blue);
		}

/* for now inline this page */

.body-index y-video {
		display: grid;
		place-items: center;
		/* This centers both horizontally and vertically */
		margin: 3rem auto;
		position: relative;
	}

.body-index y-video a {
			position: relative;
			display: block;
		}

.body-index y-video a::before {
			content: "▶";
			/* Unicode play symbol */
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 4rem;
			color: white;
			background-color: rgba(0, 0, 0, 0.7);
			width: 6rem;
			height: 6rem;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: transform 0.2s ease, background-color 0.2s ease;
			z-index: 1;
		}

.body-index y-video a:hover::before {
			transform: translate(-50%, -50%) scale(1.1);
			background-color: rgba(0, 0, 0, 0.8);
		}

.body-index y-video img {
			border-radius: 16px;
			max-width: 100%;
			/* Makes sure image is responsive */
			height: auto;
			display: block;
			/* Removes any unwanted space below the image */
			margin: 0 auto;
			/* Additional centering */
		}

.body-index footer {
		text-align: center;
		margin-bottom: 3rem;
	}
/*# sourceMappingURL=all-bundle.css.map */