:root {
  --cell-bkgnd: rgb(16, 16, 20);
  --home-bkgnd: rgb(24, 25, 31);
  --home-bkgnd-light: rgb(45, 48, 62);
  --yellow: rgb(255, 222, 140);
  --orange: rgb(255, 192, 136);
  --blue: rgb(118, 205, 255);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Rubik", sans-serif;
  background-color: var(--home-bkgnd);
  scrollbar-gutter: both-edges;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 0.75rem;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-top-width: 0.375rem;
  border-bottom-width: 0.375rem;
  border-radius: 100vw;
  background-color: var(--home-bkgnd-light);
  border: 0.25rem solid var(--home-bkgnd);
}

.main-grid {
  /* Primary grid definitions */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-template-areas: "head head statement statement statement statement" "head head statement statement statement statement" "head head statement statement statement statement" "head head statement statement statement statement" "linkedin linkedin history history education education" "linkedin linkedin history history education education" "css arts history history education education" "other fitness history history education education";
  gap: 1.5rem;
  height: 100%;
  padding: 2rem;
}
@media (width < 1200px) {
  .main-grid {
    grid-template-rows: auto;
    grid-template-areas: "head head statement statement statement statement" "linkedin linkedin history history education education" "css arts history history education education" "other fitness history history education education" ". . history history education education";
    height: auto;
  }
}
@media (width < 1000px) {
  .main-grid {
    grid-template-areas: "head head head head head head" "statement statement statement statement statement statement " "history history history education education education" "linkedin linkedin css arts other fitness";
    gap: 1rem;
    padding: 1rem 1rem !important;
    padding-right: 0;
  }
  .main-grid .two {
    padding: 2rem !important;
  }
  .main-grid > div {
    padding: 0 1rem;
  }
}
@media (width < 800px) {
  .main-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head head" "statement statement" "history education" "linkedin linkedin" "css arts" "other fitness";
  }
}
@media (width < 700px) {
  .main-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head head" "statement statement" "history history" "education education" "linkedin linkedin" "css arts" "other fitness";
  }
}
.main-grid .one {
  grid-area: head;
}
.main-grid .two {
  grid-area: statement;
}
.main-grid .three {
  grid-area: history;
}
.main-grid .four {
  grid-area: education;
}
.main-grid .five {
  grid-area: linkedin;
}
.main-grid .six {
  grid-area: css;
}
.main-grid .seven {
  grid-area: arts;
}
.main-grid .eight {
  grid-area: other;
}
.main-grid .nine {
  grid-area: fitness;
}
.main-grid > div {
  padding: 0 2rem;
  color: white;
  background-color: var(--cell-bkgnd);
  border-radius: 0.5rem;
}

.main-grid h1, .main-grid p {
  margin: 0;
}
.main-grid h1 {
  font-size: 2.5rem;
  font-size: clamp(2rem, 2vw, 2.75rem);
  line-height: 1;
}
.main-grid p {
  line-height: 1.5;
  max-width: 25ch;
}
.main-grid h2 {
  position: sticky;
  top: 0;
  padding: 0.5rem 0;
  color: var(--yellow);
  background-color: var(--cell-bkgnd);
}
.main-grid ul {
  padding: 0;
  list-style: none;
}
.main-grid ul li {
  margin-bottom: 2.5rem;
}
.main-grid ul li h3 {
  margin: 0;
  margin-bottom: 0.25rem;
  text-wrap: pretty;
}
.main-grid ul li p {
  margin: 0;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.main-grid a {
  color: white;
}
.main-grid i {
  font-size: 2rem;
}

/* Primary styles for individual cells */
.five, .six, .seven, .eight, .nine {
  padding: 2rem 1rem !important;
}
.five i, .six i, .seven i, .eight i, .nine i {
  color: var(--orange);
}

.one {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem !important;
  overflow: hidden;
}
.one > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 0;
}
.one .thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--cell-bkgnd);
  -webkit-box-shadow: 0 0 0 0.75rem var(--blue), 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 0 0 var(--cell-bkgnd), 0 0 0 0 var(--home-bkgnd);
          box-shadow: 0 0 0 0.75rem var(--blue), 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 0 0 var(--cell-bkgnd), 0 0 0 0 var(--home-bkgnd);
  margin: 2rem auto;
  overflow: hidden;
  z-index: -1;
  -webkit-animation-name: thumb-burst;
          animation-name: thumb-burst;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
.one .thumb img {
  max-width: 100%;
  -webkit-transform: translate(-0.25rem, -0.5rem);
          transform: translate(-0.25rem, -0.5rem);
}
@-webkit-keyframes thumb-burst {
  0% {
    -webkit-box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 0 0 var(--cell-bkgnd), 0 0 5rem 0 var(--home-bkgnd);
            box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 0 0 var(--cell-bkgnd), 0 0 5rem 0 var(--home-bkgnd);
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 0 4rem 3rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
            box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 0 4rem 3rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 5rem 25rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
            box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 5rem 25rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
  }
}
@keyframes thumb-burst {
  0% {
    -webkit-box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 0 0 var(--cell-bkgnd), 0 0 5rem 0 var(--home-bkgnd);
            box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 0 0 var(--cell-bkgnd), 0 0 5rem 0 var(--home-bkgnd);
  }
  50% {
    -webkit-box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 0 4rem 3rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
            box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 0 4rem 3rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 5rem 25rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
            box-shadow: 0 0 0 0.75rem white, 0 0 0 1rem var(--cell-bkgnd), 0 0 0 1.5rem var(--home-bkgnd-light), 0 -10rem 5rem 25rem var(--cell-bkgnd), 0 0 5rem 25rem var(--home-bkgnd);
  }
}

.two {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.two blockquote {
  position: relative;
  margin: 0;
  max-width: 60ch;
  line-height: 1.5;
  font-size: 1.25rem;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  z-index: 0;
}
.two blockquote::before {
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--home-bkgnd);
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  rotate: -10deg;
  z-index: -1;
}
.two blockquote::after {
  content: "\f10e";
  font-family: "Font Awesome 5 Free";
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--home-bkgnd);
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(50%, 25%);
          transform: translate(50%, 25%);
  rotate: 10deg;
  z-index: -1;
}

.three {
  overflow-y: scroll;
  padding-right: 0.5rem;
  padding-bottom: 4rem;
  scrollbar-gutter: both-edges;
}
.three::-webkit-scrollbar-thumb {
  background-color: var(--home-bkgnd-light);
  border: 0.25rem solid var(--cell-bkgnd);
}

.four {
  overflow-y: scroll;
  padding-right: 0.5rem;
  padding-bottom: 4rem;
  scrollbar-gutter: both-edges;
}
.four::-webkit-scrollbar-thumb {
  background-color: var(--home-bkgnd-light);
  border: 0.25rem solid var(--cell-bkgnd);
}

.five {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.five a {
  display: block;
  padding: 2rem 3rem;
}
.five i {
  color: var(--blue);
}

.six {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.seven {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.eight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.nine {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}/*# sourceMappingURL=home.css.map */