html {
  scroll-behavior: smooth;
}

.full-container--introduction {
  overflow: hidden;
}
.full-container--projects {
  padding-block: 40px 80px;
}

.bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.bg--introduction {
  background-color: #222;
}
.bg--warpzone {
  background-color: #000;
  background-image: url("/img/brick-tile.png");
  background-size: 32px;
  background-position: bottom;
  background-repeat: repeat;
  image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges; /* Firefox                        */
  image-rendering: -o-crisp-edges; /* Opera                          */ /* Chrome (and eventually Safari) */
  image-rendering: pixelated; /* Chrome */
  image-rendering: optimize-contrast; /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor; /* IE8+                           */
}
.bg--skills {
  background-color: #43613B;
  background-image: url("/img/chalkboard.jpg");
  background-size: 100% 100%;
}
.bg--history {
  background-color: #F8E2B1;
}
.bg--awards {
  background-color: #000;
  background-image: url("/svg/endless-constellation.svg");
  background-size: auto;
  background-position: center;
  background-repeat: repeat;
}
.bg--projects {
  background-color: #027DEE;
  background-image: url("/svg/blueprint.svg");
  background-size: auto;
  background-position: center;
  background-repeat: repeat;
}

/* Full Container */
#quote {
  background-color: #ff3bde;
  position: relative;
  height: 40vw;
  overflow: hidden;
}

#awards {
  color: white;
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: 80px;
}

/* END Full Container */
/* Container */
.container--introduction {
  padding: 20px;
  color: white;
}
.container--warpzone {
  background-color: #5E93FC;
  box-shadow: inset 0 0 10px #000000;
}
.container--skills {
  padding: 40px 0px 100px;
  font-family: chawp;
}
.container--history {
  padding: 40px 0px;
}
.container--projects {
  padding-inline: 20px;
}

.command-line {
  font-family: "jetbrainsmono";
  background-color: #333;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}

.code-name {
  font-family: "jetbrainsmono";
  font-weight: bold;
  line-height: 90%;
  color: aquamarine;
  text-align: left;
  margin-block: 0px;
  font-size: 18vw;
}
@media (min-width: 768px) {
  .code-name {
    font-size: min(16vw, 20em);
  }
}
@media (min-width: 1200px) {
  .code-name {
    font-size: min(12vw, 20em);
  }
}

.diamond-container {
  position: relative;
  width: 100%;
  height: min(1200px, 100vw);
  overflow: hidden;
}

.diamond {
  position: absolute;
  width: min(800px, 70vw);
  height: min(800px, 70vw);
  overflow: hidden;
  border-radius: min(50px, 10vw);
}

.diamond-1 {
  background-color: #FF6160;
  left: 50%;
  transform: translate(-75%, 20%) rotate(45deg);
  z-index: 2;
  box-shadow: 5px -5px 10px 0px #000000;
}

.lil-diamond {
  width: 90%;
  height: 90%;
  background-color: #222222;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: min(50px, 10vw) min(50px, 10vw) min(50px, 10vw) min(200px, 10vw);
  box-shadow: inset -5px -5px 20px 7px #000000;
}

.diamond-2 {
  background-color: #7FFFD4;
  left: 50%;
  transform: translate(-50%, 20%) rotate(45deg);
  z-index: 1;
}

.diamond-3 {
  left: 50%;
  transform: translate(-25%, 20%) rotate(45deg);
  z-index: 3;
  background-color: transparent;
}

.diamond-3 > img {
  display: block;
  z-index: -10;
  position: absolute;
  width: 150%;
  height: 150%;
  transform: rotate(-45deg) translateY(-25%);
}

.diamond-3 > .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset -5px -5px 20px 7px #000000;
  top: 0;
  left: 0;
  border-radius: min(50px, 10vw);
}

.grid-role {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  gap: 50px;
  align-items: center;
  margin-block: 60px 100px;
}
.grid-role__point {
  grid-row: 1;
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-color: #eee;
  border-radius: 100%;
}
.grid-role__point--1 {
  grid-column: 1;
}
.grid-role__point--2 {
  grid-column: 2;
}
.grid-role__point--3 {
  grid-column: 3;
}
.grid-role__point--4 {
  grid-column: 4;
}
.grid-role__point--1, .grid-role__point--4 {
  display: none;
}
.grid-role__point--2__base-tag {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #FF6160;
  z-index: 101;
}
.grid-role__point--2__tag {
  position: absolute;
  padding: 10px;
  top: 50%;
  left: 50%;
  transform: translate(0%, -50%) rotate(25deg) translateX(10px);
  transform-origin: center left;
  z-index: 100;
  background-color: #FF6160;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.6);
}
.grid-role__point--2__tag__text {
  padding: 0px;
  margin: 0px;
  color: #000;
  font-family: "jetbrainsmono";
  font-weight: bold;
}
.grid-role__point--3__base-tag {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #7FFFD4;
  z-index: 101;
}
.grid-role__point--3__tag {
  position: absolute;
  padding: 10px;
  top: 50%;
  left: 50%;
  transform: translate(0%, -50%) rotate(15deg) translateX(10px);
  transform-origin: center left;
  z-index: 100;
  background-color: #7FFFD4;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.6);
}
.grid-role__point--3__tag__text {
  padding: 0px;
  margin: 0px;
  color: #000;
  font-family: "jetbrainsmono";
  font-weight: bold;
}
.grid-role__line {
  grid-column: 1/5;
  grid-row: 1;
  height: 10px;
  background-image: linear-gradient(90deg, transparent 0%, #eee 10%, #eee 90%, transparent 100%);
  border-radius: 100px;
}
@media (max-width: 768px) {
  .grid-role {
    margin: 40px 0px 90px -100px;
  }
  .grid-role__point {
    width: 80%;
    padding-top: 80%;
  }
  .grid-role__point--2__tag__text, .grid-role__point--3__tag__text {
    padding: 0px;
    margin: 0px;
    color: #000;
    font-family: "jetbrainsmono";
    font-weight: bold;
    font-size: min(3.5vw, 1em);
  }
  .grid-role__line {
    height: 8px;
  }
}
@media (min-width: 768px) {
  .grid-role {
    margin-left: -60px;
  }
}

.developer-summary {
  font-weight: 400;
  font-size: 1.2em;
  color: #999;
  max-width: 768px;
}

.quote-text {
  position: absolute;
  padding: 0.5vw 0px;
  width: 90vw;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FF3BDE;
}
.quote-text--main {
  z-index: 100;
}
.quote-text--top-0 {
  z-index: 10;
  -webkit-animation: qot0-anim 1s linear infinite;
          animation: qot0-anim 1s linear infinite;
}
.quote-text--bot-0 {
  z-index: 10;
  -webkit-animation: qob0-anim 1s linear infinite;
          animation: qob0-anim 1s linear infinite;
}
.quote-text--top-1 {
  z-index: 9;
  -webkit-animation: qot1-anim 1s linear infinite;
          animation: qot1-anim 1s linear infinite;
}
.quote-text--bot-1 {
  z-index: 9;
  -webkit-animation: qob1-anim 1s linear infinite;
          animation: qob1-anim 1s linear infinite;
}
.quote-text--top-2 {
  z-index: 8;
  -webkit-animation: qot2-anim 1s linear infinite;
          animation: qot2-anim 1s linear infinite;
}
.quote-text--bot-2 {
  z-index: 8;
  -webkit-animation: qob2-anim 1s linear infinite;
          animation: qob2-anim 1s linear infinite;
}
.quote-text--top-3 {
  z-index: 7;
  -webkit-animation: qot3-anim 1s linear infinite;
          animation: qot3-anim 1s linear infinite;
}
.quote-text--bot-3 {
  z-index: 7;
  -webkit-animation: qob3-anim 1s linear infinite;
          animation: qob3-anim 1s linear infinite;
}
.quote-text--top-4 {
  z-index: 6;
  -webkit-animation: qot4-anim 1s linear infinite;
          animation: qot4-anim 1s linear infinite;
}
.quote-text--bot-4 {
  z-index: 6;
  -webkit-animation: qob4-anim 1s linear infinite;
          animation: qob4-anim 1s linear infinite;
}
.quote-text--top-5 {
  z-index: 5;
  -webkit-animation: qot5-anim 1s linear infinite;
          animation: qot5-anim 1s linear infinite;
}
.quote-text--bot-5 {
  z-index: 5;
  -webkit-animation: qob5-anim 1s linear infinite;
          animation: qob5-anim 1s linear infinite;
}

@-webkit-keyframes qot0-anim {
  from {
    transform: translateY(0vw);
  }
  to {
    transform: translateY(-5vw);
  }
}

@keyframes qot0-anim {
  from {
    transform: translateY(0vw);
  }
  to {
    transform: translateY(-5vw);
  }
}
@-webkit-keyframes qob0-anim {
  from {
    transform: translateY(0vw);
  }
  to {
    transform: translateY(5vw);
  }
}
@keyframes qob0-anim {
  from {
    transform: translateY(0vw);
  }
  to {
    transform: translateY(5vw);
  }
}
@-webkit-keyframes qot1-anim {
  from {
    transform: translateY(-5vw);
  }
  to {
    transform: translateY(-9vw);
  }
}
@keyframes qot1-anim {
  from {
    transform: translateY(-5vw);
  }
  to {
    transform: translateY(-9vw);
  }
}
@-webkit-keyframes qob1-anim {
  from {
    transform: translateY(5vw);
  }
  to {
    transform: translateY(9vw);
  }
}
@keyframes qob1-anim {
  from {
    transform: translateY(5vw);
  }
  to {
    transform: translateY(9vw);
  }
}
@-webkit-keyframes qot2-anim {
  from {
    transform: translateY(-9vw);
  }
  to {
    transform: translateY(-12vw);
  }
}
@keyframes qot2-anim {
  from {
    transform: translateY(-9vw);
  }
  to {
    transform: translateY(-12vw);
  }
}
@-webkit-keyframes qob2-anim {
  from {
    transform: translateY(9vw);
  }
  to {
    transform: translateY(12vw);
  }
}
@keyframes qob2-anim {
  from {
    transform: translateY(9vw);
  }
  to {
    transform: translateY(12vw);
  }
}
@-webkit-keyframes qot3-anim {
  from {
    transform: translateY(-12vw);
  }
  to {
    transform: translateY(-14vw);
  }
}
@keyframes qot3-anim {
  from {
    transform: translateY(-12vw);
  }
  to {
    transform: translateY(-14vw);
  }
}
@-webkit-keyframes qob3-anim {
  from {
    transform: translateY(12vw);
  }
  to {
    transform: translateY(14vw);
  }
}
@keyframes qob3-anim {
  from {
    transform: translateY(12vw);
  }
  to {
    transform: translateY(14vw);
  }
}
@-webkit-keyframes qot4-anim {
  from {
    transform: translateY(-14vw);
  }
  to {
    transform: translateY(-15vw);
  }
}
@keyframes qot4-anim {
  from {
    transform: translateY(-14vw);
  }
  to {
    transform: translateY(-15vw);
  }
}
@-webkit-keyframes qob4-anim {
  from {
    transform: translateY(14vw);
  }
  to {
    transform: translateY(15vw);
  }
}
@keyframes qob4-anim {
  from {
    transform: translateY(14vw);
  }
  to {
    transform: translateY(15vw);
  }
}
@-webkit-keyframes qot5-anim {
  from {
    transform: translateY(-15vw);
  }
  to {
    transform: translateY(-15vw);
  }
}
@keyframes qot5-anim {
  from {
    transform: translateY(-15vw);
  }
  to {
    transform: translateY(-15vw);
  }
}
@-webkit-keyframes qob5-anim {
  from {
    transform: translateY(15vw);
  }
  to {
    transform: translateY(15vw);
  }
}
@keyframes qob5-anim {
  from {
    transform: translateY(15vw);
  }
  to {
    transform: translateY(15vw);
  }
}
.warpzone-header {
  font-family: upheaval;
  font-size: 4em;
  text-align: center;
  color: #fff;
  text-shadow: 4px 4px #000;
  -webkit-text-stroke: 2px black;
  margin-bottom: 0px;
}

.warpzone-description {
  margin: 20px 0px 120px;
  padding: 0px 20px;
  text-align: center;
  font-family: upheaval;
  font-size: 1.2em;
  color: #fff;
  text-shadow: 1px 1px #333;
  -webkit-text-stroke: 0.5px black;
}

.warpzone-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 100px));
  grid-template-rows: auto;
  -moz-column-gap: 10px;
       column-gap: 10px;
  justify-content: space-around;
}
.warpzone-grid > .item {
  display: block;
  text-decoration: none;
  padding-bottom: 100%;
  margin: 0px;
  transition: 0.2s;
  background-image: url("/img/pipe.png");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges; /* Firefox                        */
  image-rendering: -o-crisp-edges; /* Opera                          */ /* Chrome (and eventually Safari) */
  image-rendering: pixelated; /* Chrome */
  image-rendering: optimize-contrast; /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor; /* IE8+                           */
}
.warpzone-grid > .item:hover {
  filter: hue-rotate(-50deg) brightness(130%);
}
.warpzone-grid > .item:hover > .pipe-text {
  color: gold;
}

.pipe-text {
  font-family: upheaval;
  font-size: min(4vw, 1.2em);
  color: #fff;
  text-shadow: 1px 1px #333;
  -webkit-text-stroke: 0.5px #000;
  transform: scaleY(200%);
  text-align: center;
  padding-bottom: 10px;
}

.warpzone-floor {
  height: 32px;
  width: 100%;
  background-color: #C84C0C;
  background-image: url("/img/brick-tile.png");
  background-size: 32px;
  background-position: center;
  background-repeat: repeat;
  image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges; /* Firefox                        */
  image-rendering: -o-crisp-edges; /* Opera                          */ /* Chrome (and eventually Safari) */
  image-rendering: pixelated; /* Chrome */
  image-rendering: optimize-contrast; /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor; /* IE8+                           */
}

#skills > .container > * {
  font-family: inherit;
  color: #fff;
}

.skills-header {
  font-family: "archistico" !important;
  font-size: min(22vw, 8em);
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px #fff;
  text-align: center;
}

.skills-title {
  font-size: 1.5em;
  color: #fff;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 10px;
  margin-left: 20px;
  border-color: white;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.skill-project-count {
  font: roboto;
}

.skill-set {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.skill-set--legend {
  justify-content: center;
  margin: 0px;
  padding: 0px;
}
@media (max-width: 768px) {
  .skill-set--legend {
    flex-direction: column;
    padding: 20px;
  }
}
.skill-set__item {
  font-family: "chawp";
  font-size: min(1em, 3vw);
  padding: min(20px, 2vw);
  margin: 0px min(10px, 1vw) min(20px, 2vw) 0px;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
.skill-set__item--advanced {
  border: 2px solid gold;
}
.skill-set__item--intermediate {
  border: 2px solid #fff;
}
.skill-set__item--average {
  border: 2px dashed #fff;
}

.history-header {
  font-size: 5em;
  font-weight: bold;
  text-align: center;
  margin: 20px;
}

.history-header-sep {
  width: min(80vw, 500px);
  border-top: 2px solid black;
  margin: 0px auto;
}

.history-list {
  padding: 0px 20px;
}

/* .history-list > .history-item{

} */
.history-list > .history-item > h3 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.4em;
}

.history-list > .history-item > ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

/* .history-list > .history-item > ul > li{

} */
.history-list > .history-item > ul > li > .job-header {
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0px 0px 10px;
}

.history-list > .history-item > ul > li > .job-header > h4 {
  margin: 0px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 500;
  font-size: 1em;
}

.history-list > .history-item > ul > li > .job-header > h5 {
  margin: 0px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 500;
  font-size: 1em;
  color: rgba(0, 0, 0, 0.2);
}

.history-list-job-desc {
  padding: 0px;
  padding-left: 20px;
}
.history-list > .history-item > ul > li > p {
  margin-top: 0px;
  color: #000;
}

.award-header {
  font-size: 5em;
  font-weight: bold;
  text-align: center;
}

.award-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  margin: 0px 20px;
}

.award-title-cell,
.award-status-cell {
  margin: 30px 0px;
}

.award-1-title-cell {
  grid-column: 1/2;
  grid-row: 1/2;
}

.award-1-status-cell {
  grid-column: 2/3;
  grid-row: 1/2;
}

.award-2-title-cell {
  grid-column: 1/2;
  grid-row: 2/3;
}

.award-2-status-cell {
  grid-column: 2/3;
  grid-row: 2/3;
}

.award-3-title-cell {
  grid-column: 1/2;
  grid-row: 3/4;
}

.award-3-status-cell {
  grid-column: 2/3;
  grid-row: 3/4;
}

.award-sep-1 {
  grid-column: 1/3;
  grid-row: 1/2;
  border-top: 2px solid white;
}

.award-sep-2 {
  grid-column: 1/3;
  grid-row: 2/3;
  border-top: 1px solid white;
}

.award-sep-3 {
  grid-column: 1/3;
  grid-row: 3/4;
  border-top: 2px solid white;
}

.award-sep-4 {
  grid-column: 1/3;
  grid-row: 4/5;
  border-top: 2px solid white;
}

.award-title {
  font-weight: bold;
}

.award-status {
  font-weight: bold;
}

.award-description {
  font-size: 0.75em;
  color: #ccc;
}

.projects-header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 40px auto 40px;
  padding: 0px 40px;
  text-align: center;
  font-weight: bold;
  font-size: 5em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 10px;
}
@media (max-width: 576px) {
  .projects-header {
    font-size: 12vw;
    margin-bottom: 5vw;
  }
}

.latest-project {
  margin: 40px auto 40px;
  padding: 10px 20px;
  font-size: 2em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border-left: 4px solid #fff;
}
@media (max-width: 576px) {
  .latest-project {
    font-size: 4vw;
    margin-top: 0px;
    margin-bottom: 5vw;
  }
}

.projects {
  margin-top: 20px;
  padding-inline: 20px;
  width: 100%;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(400px, 600px));
  gap: 40px;
  justify-content: center;
}
@media (max-width: 1320px) {
  .projects {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (max-width: 980px) {
  .projects {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .projects {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}
.projects__item:nth-child(4) {
  grid-column: 2/3;
}
@media (max-width: 980px) {
  .projects__item:nth-child(4) {
    grid-column: auto;
  }
}
.projects__item--hide {
  display: none;
}