:root {
  --pink: #f24bd6;
  --purple: #705cf2;
  --green: #05f240;
  --yellow: #fee550;
  --blue: #05dbf2;
  --pink-none: #f24bd6;
  --purple-none: #705cf2;
  --green-none: #05f240;
  --yellow-none: #fee550;
  --blue-none: #05dbf2;
  --main-bg: #fff;
  --white: #fff;
  --black: #000;
  --grid-bg: linear-gradient(#3a2dff21 2px, transparent 2px), linear-gradient(90deg, #3a2dff21 2px, transparent 2px);
  --blk-shadow: #000;
  --highlight: #fee550;
  --linkhover: #000;
  --nav-link: #f24bd6;
  --text-stroke: transparent;
  --fresh: #fee550;
  --social-hover: #705cf2;
  --focus: #fffecf;
}

.dark {
  --pink-none: none;
  --purple-none: none;
  --green-none: none;
  --yellow-none: none;
  --blue-none: none;
  --main-bg: #0e3807;
  --black: #05f240;
  --white: transparent;
  --grid-bg: linear-gradient(#04ec0021 2px, transparent 2px), linear-gradient(90deg, #04ec0021 2px, transparent 2px);
  --blk-shadow: transparent;
  --highlight: #05f240;
  --linkhover: #0e3807;
  --nav-link: #05f240;
  --text-stroke: #05f240;
  --fresh: #0e3807;
  --social-hover: #05f240;
  --focus: #1a4911;
  transition: 0.2s;
}

/*========PRELOADER=========*/

.loading-text {
  font-weight: 600;
  font-style: normal;
  color: var(--black);
  font-size: 2em;
  text-align: center;
  line-height: 1.3em;
}

@keyframes loadingAnim {
  0% {
    width: 20px;
    height: 20px;
    /* 20px */
  }

  20% {
    width: 40px;
    height: 40px;
    /* 40px */
  }

  40% {
    width: 30px;
    height: 30px;
    /* 30px */
  }

  60% {
    width: 20px;
    height: 20px;
    /* 20px */
  }

  80% {
    width: 60px;
    height: 60px;
    /* 60px */
  }

  100% {
    width: 20px;
    height: 20px;
    /* 20px */
  }
}

@keyframes dot1 {
  0% {
    width: 20px;
    height: 20px;
  }

  20% {
    width: 40px;
    height: 40px;
  }

  30% {
    width: 20px;
    height: 20px;
  }

  100% {
    width: 20px;
    height: 20px;
  }
}

@keyframes dot2 {
  0% {
    width: 20px;
    height: 20px;
  }

  20% {
    width: 20px;
    height: 20px;
  }

  30% {
    width: 20px;
    height: 20px;
  }

  50% {
    width: 40px;
    height: 40px;
  }

  60% {
    width: 20px;
    height: 20px;
  }

  100% {
    width: 20px;
    height: 20px;
  }
}

@keyframes dot3 {
  0% {
    height: 20px;
    width: 20px;
  }

  20% {
    height: 20px;
    width: 20px;
  }

  30% {
    height: 20px;
    width: 20px;
  }

  50% {
    height: 20px;
    width: 20px;
  }

  60% {
    height: 20px;
    width: 20px;
  }

  80% {
    height: 40px;
    width: 40px;
  }

  90% {
    height: 20px;
    width: 20px;
  }

  100% {
    height: 20px;
    width: 20px;
  }
}

div.loading {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: var(--main-bg);
  z-index: 99999;
  border-bottom: 1px solid var(--black);
  animation: slide-out-top 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}

.loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 150px;
  width: 150px;
}

.anim {
  /* flex circles and loading text */
  display: flex;
  height: 75px;
}

.loader .dot1 {
  /* apply dot1 animation */
  animation-name: dot1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background: var(--pink-none);
  border: 2px solid var(--black);
  box-shadow: 2px 2px var(--blk-shadow);
}

.loader .dot2 {
  /* apply dot2 animation */
  animation-name: dot2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background: var(--pink-none);
  border: 2px solid var(--black);
  box-shadow: 2px 2px var(--blk-shadow);
}

.loader .dot3 {
  /* apply dot3 animation */
  animation-name: dot3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background: var(--pink-none);
  border: 2px solid var(--black);
  box-shadow: 2px 2px var(--blk-shadow);
}

.loader span {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin: auto auto 0 auto;
}

.loader p {
  text-align: center;
}

/*------- Fill Classes ------*/
.green {
  fill: var(--green-none);
}

.yellow {
  fill: var(--yellow-none);
}

.pink {
  fill: var(--pink-none);
}

.purple {
  fill: var(--purple-none);
}

.blue {
  fill: var(--blue-none);
}

.white {
  fill: var(--white);
}

/*------- Stroke Styles -------*/
.svg-stroke {
  stroke: var(--black);
}

/*---- Background Classes ----*/
.green-bg {
  background: var(--green-none);
}

.yellow-bg {
  background: var(--yellow-none);
}

.pink-bg {
  background: var(--pink-none);
}

.purple-bg {
  background: var(--purple-none);
}

.blue-bg {
  background: var(--blue-none);
}

.white-bg {
  background: var(--white);
}

/*-- Color Classes --*/
.green-color {
  color: var(--green);
}

.yellow-color {
  color: var(--yellow);
}

.pink-color {
  color: var(--pink);
}

.purple-color {
  color: var(--purple);
}

.blue-color {
  color: var(--blue);
}

/*------FONT STYLES--------*/
p,
ul,
span,
input,
textarea,
label {
  font-family: aglet-mono, mono, monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  color: var(--black);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: bungee, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5em;
  margin: 0;
  color: var(--black);
}

h1 {
  font-size: clamp(40px, 4.8vw, 80px)
}

h2 {
  font-size: 65px;
}

body {
  background: var(--main-bg);
  font-family: aglet-mono, mono, monospace;
  margin: 0;
  transition: 0.3s;
}

@keyframes scan {
  from {
    transform: translate3d(0, 0%, 0);
  }

  to {
    transform: translate3d(0, 100vh, 0);
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.8;
  }
}

body::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 5px;
  content: "";
  animation: 3000ms linear 1300ms forwards infinite scan;
}

body::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.03);
  content: "";
  animation: 4000ms linear 0ms forwards infinite scan;
}

div.clickRipple {
  position: fixed;
  border-style: solid;
  border-radius: 50%;
  z-index: 9999;
  animation: ripple 0.25s ease-out;
}

@keyframes ripple {
  from {
    opacity: 1;
    width: 100px;
    height: 100px;
    border-width: 5px;
    margin-left: -50px;
    margin-top: -50px;

  }

  to {
    opacity: 0.35;
    width: 225px;
    height: 225px;
    border-width: 2px;
    margin-left: -112.5px;
    margin-top: -112.5px;
  }
}

/*=======BACKGROUND GRID==========*/
.grid-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -100;
}

.grid-bg::before {
  z-index: -100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  content: " ";
  background-image: var(--grid-bg);
  background-size: 80px 80px, 80px 80px;
  background-position: -2px -2px, -2px -2px;
  animation: gridWipe 2.5s ease-in;
}

@keyframes gridWipe {
  0% {
    width: 0px;
    height: 0px;
  }

  100% {
    width: 100%;
    height: 100%;
  }
}

/*=====PARALLAX EFFECT=======*/
.parallax {
  position: relative;
}

.back {
  z-index: -10;
}

.parallax__item {
  position: absolute;
  width: 100%;
}

.parallax__item_text {
  font-size: 24px;
  line-height: 46px;
  height: 46px;
  background: #fff;
  border: 2px #000 solid;
  width: 450px;
  text-align: center;
  box-shadow: 7px 4px var(--purple);
}

.triangle {
  display: block;
  margin: -1% 0 0 84%;
}

.triangle_shadow {
  display: block;
  margin: -1% 0 0 85%;
}

/*-----------NAVIGATION BAR--------------- */
header {
  width: 100vw;
  z-index: 999;
  position: fixed;
}

.top-bar {
  display: flex;
  padding: 40px;
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-start;
}

.byline {
  font-size: 1.5em;
}

nav.overlay.bounce-in-top {
  animation: bounce-in-top 1.1s both;
  animation-fill-mode: forwards;
  overflow-y: hidden;
}

/* Entrance animation for Nav Menu*/
@keyframes bounce-in-top {
  0% {
    transform: translateY(-100%);
    animation-timing-function: ease-in;
    opacity: 1;
  }

  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }

  55% {
    transform: translateY(-12%);
    animation-timing-function: ease-in;
  }

  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  81% {
    transform: translateY(-6%);
    animation-timing-function: ease-in;
  }

  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  95% {
    transform: translateY(-1%);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

/* Exit animation for Nav Menu*/
nav.overlay.slide-out-top {
  animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-fill-mode: forwards;
}

@keyframes slide-out-top {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-101%);
    opacity: 1;
  }
}

/*Nav Menu*/
nav.overlay {
  transform: translateY(-101%);
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  top: 0;
  left: 0;
  background: var(--main-bg);
  border-bottom: 3px #000 solid;
}

/* Position the content inside the overlay */
.overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.social-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 16px;
  text-decoration: none;
  font-size: clamp(2em, 3.5vw, 3.9em);
  color: var(--black);
  display: block;
  transition: 0.5s;
}

.linkhover {
  position: relative;
  margin: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.linkhover:before {
  content: "";
  background: var(--nav-link);
  box-shadow: 2px 4px var(--blk-shadow);
  transition-duration: 0.2s;
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
}

.linkhover:hover:before {
  background: var(--nav-link);
  width: 95%;
}

/* SOCIAL MEDIA ICON */
.insta {
  fill: var(--blue-none);
}

.linkedin {
  fill: var(--pink-none);
}

a:hover .linkedin,
a:hover .insta {
  fill: var(--social-hover);
}

a:hover #Path_223,
a:hover #Ellipse_1,
a:hover #Ellipse_2,
a:hover #Path_232,
a:hover #Path_235,
a:hover #Path_236 {
  stroke: var(--linkhover)
}

/* ============= HEADER ICONS===============*/
/*---- Moon Toggle ----*/
.moon-icon {
  transition: 0.2s all ease-out;
}

.moon-icon:hover {
  fill: var(--highlight);
  transition: 0.2s all ease-out;
  cursor: pointer;
}

/*---Menu Toggle-----*/
.menu-toggle svg {
  transition: 0.3s;
}

.menu-toggle svg:hover {
  cursor: pointer;
}

.menu-toggle .active svg {
  transition: 0.3s;
  transform: rotateZ(45deg);
}

a.menu-toggle {
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu-label {
  font-weight: 600;
  color: var(--black);
  text-shadow: 1px 1px var(--pink-none);
  z-index: 100;
}

a.menu-toggle svg {
  width: 70px;
  transition: all 0.5s ease;
}

a.menu-toggle.clicked svg {
  transform: rotate(45deg);
}

.toggle-shadow {
  stroke: var(--pink-none);
}

/*---Mail Icon-----*/
a:hover .mail-icon {
  fill: var(--highlight);
}

a .mail-icon {
  transition: 0.2s ease-in;
}

.icon-tooltip {
  position: absolute;
  display: table;
  background: var(--white);
  color: var(--black);
  border-radius: 10px;
  border: 2px var(--black) solid;
  box-shadow: 7px 4px var(--purple-none);
  padding: 3px 6px;
  opacity: 0;
  font-size: 12px;
  text-align: center;
  transition: 0.2s all ease-out;
}

.mail .icon-tooltip {
  top: 33%;
  right: 6.2%;
}

.moon .icon-tooltip {
  top: 35%;
  right: 53%;
}

.moon a:hover~*,
.mail a:hover~* {
  opacity: 1;
}

/*======================HOME========================*/
/*------- Section Structure ------*/
.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-evenly {
  justify-content: space-evenly;
}

.full-height {
  height: 100vh;
}

section {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  width: 100vw;
  align-items: center;
}

.wrap-reg {
  flex-wrap: wrap;
}

.wrap-reverse {
  flex-wrap: wrap-reverse;
}

.col1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.threeCol {
  display: grid;
  width: 100vw;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  margin: 70px;
  grid-gap: 70px;
}

/*------ BYJAYCIEMOTA LOGO --------*/
#lineDrawing {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px;
}

.logo-fill {
  fill: var(--white);
}

#mobile-logo {
  display: none;
}

#desktop-logo {
  display: block;
  width: 100%;
}

.my-path {
  stroke: var(--black);
  stroke-width: 2px;
}

.pink-fill {
  fill: transparent;
  animation: pinkFill 2s ease-in 1.5s forwards;
}

@keyframes pinkFill {
  0% {
    fill: transparent;
  }

  75% {
    fill: transparent;
  }

  100% {
    fill: var(--nav-link);
  }
}

/* --------Tagline-------- */
.tagline {
  font-size: 1.7em;
  padding: 10px 0;
  display: flex;
  right: 20%;
  top: 58%;
  position: absolute;
  animation: text-focus-in 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  color: var(--black);
}

@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/*-----Scroll Indicator-------*/
.indicator-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.indicator-container {
  width: 6.4em;
  height: 6.4em;
  background: var(--white);
  border: 3px solid var(--black);
  box-shadow: 8px 8px var(--purple-none);
  border-radius: 6.4em;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  top: 18%;
  opacity: 0;
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  ;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.indicator-arrow {
  margin-top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.base {
  margin: 0 auto;
  width: 8px;
  background: var(--black);
  height: 2.1em;
  border-radius: 6px;
}

.arrowpoint {
  width: 0;
  height: 0;
  border-style: solid;
  border-width:
    18px 18px 0 18px;
  border-color:
    var(--black) transparent transparent transparent;
  margin-top: -10%;
}

.top {
  margin-top: -100%;
  animation: arrowAnimation1 infinite 1.1s ease-in-out;
}

.bottom {
  margin-top: 100%;
}

@keyframes arrowAnimation1 {
  from {
    margin-top: -100%;
  }

  to {
    margin-top: 40%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* ------Page Heading Accents--------*/
.accent {
  height: 30px;
  width: 370px;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  grid-template-columns: repeat(10, 1fr);
  margin-top: 5px;
}

.accent-left {
  margin-left: 275px;
}

.accent-right {
  margin-right: 275px;
}

.rect1 {
  background: none;
  border: 3px solid var(--black);
  grid-column: 1/10;
  grid-row: 1/8;
}

.rect2 {
  grid-column: 2/11;
  grid-row: 4/10;
}

.page-links {
  display: grid;
  padding: 40px;
  grid-gap: clamp(14px, 1.5vw, 40px);
}

.page-link {
  text-decoration: none;
  white-space: nowrap;
  color: var(--black);
  font-size: clamp(1.2em, 2.3vw, 1.7em);
  transition: background-position 0.5s ease-out;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, var(--highlight) 50%);
  background-position: -0% 0;
  background-size: 200% auto;
}

.page-link:hover {
  background-position: -99.99% 0;
  color: var(--linkhover);
}

/*========= HOME: PROJECTS SECTION =======*/
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.rotate {
  animation: rotation 14s infinite linear;
}

.fresh-container {
  width: 22vw;
  height: 22vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.absolute {
  position: absolute;
}

@media screen and (min-width: 1186px) {
  .absolute {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 9%;
  }
}

@media screen and (min-width: 1495px) {
  .absolute {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 10%;
    left: 40%;
  }
}


#fresh-polygon {
  position: absolute;
}

#polygon-16 {
  fill: var(--fresh);
  stroke: var(--black);
}

.fresh {
  position: absolute;
  transform: rotate(345deg);
  font-family: bungee, sans-serif;
  font-size: 1.8em;
}

.img-thumbnail {
  border: 3px solid var(--black);
  border-radius: 5px 5px 5px 5px;
  margin: auto;
  max-width: 100%;
}

.one-img {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.two-img {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.img-container img {
  width: 100%;
}

.img-container {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  margin: 20px;
  width: 325px;
  max-width: 100%;
  box-shadow: 8px 8px var(--blk-shadow);
  border-radius: 2px;
  z-index: 300;
}

.img-container:hover .img-overlay {
  opacity: 1;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: var(--highlight);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  transition: 0.2s;
}

.overlay-text a {
  color: var(--linkhover);
  font-size: 1.7em;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/*====== CONTACT FORM ====*/
.shell {
  border-radius: 8px;
}

.shadow {
  box-shadow: 15px 20px var(--blk-shadow);
}

.rev-shadow {
  box-shadow: -15px 20px var(--blk-shadow);
}

.shell-header {
  height: 30px;
  background: var(--blue-none);
  border-radius: 8px 8px 0 0;
  border: 3px solid var(--black);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
}

.shell-body {
  border-radius: 0 0 8px 8px;
  border-bottom: 3px solid var(--black);
  border-right: 3px solid var(--black);
  border-left: 3px solid var(--black);
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.shell-padding {
  padding: 40px;
}

.video-shell-body {
  border-radius: 0 0 8px 8px;
  border-bottom: 3px solid var(--black);
  border-right: 3px solid var(--black);
  border-left: 3px solid var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shell-bg {
  background: var(--white);
}

.about-bg {
  background: url('https://i.imgur.com/HvF7yfO.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 40vh;
}

.header-dot {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin: 0 5px;
  border: 3px solid var(--black);
  display: inline-block;
}

.xl {
  width: 1020px;
  height: auto;
  max-width: 100%;
}

.reg {

  max-width: 850px;
  height: 100%;
  width: 100%;
}

.vid {
  width: 100%;
  max-width: 800px;
  width: 63vh;
}

@media screen and (min-width: 1144px) {
  .vid {
    max-width: 43vw;
    width: 100%;
  }
}

/*======= CONTACT FORM ========*/
form {
  margin: 0 auto;
  position: relative;
  border-radius: 5px;
}

input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

label,
input,
textarea {
  display: block;
}

input[type="email"],
input[type="text"],
textarea {
  width: 525px;
  border: 2px solid var(--black);
  padding: 10px;
  font-size: 1em;
  border-radius: 5px;
  box-shadow: 3px 3px var(--blk-shadow);
  background: var(--main-bg);
  color: var(--black);
  transition: border 0.5s;
  -webkit-transition: border 0.5s;
  -moz-transition: border 0.5s;
  -o-transition: border 0.5s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:focus,
textarea:focus {
  border: solid 2px #000;
  background: var(--focus);
}

textarea {
  height: 100px;
  resize: none;
  overflow: auto;
}

input[type="submit"]:active {
  box-shadow: none;
  transform: translate(5%, 15%);
}

input[type="submit"] {
  background-color: var(--main-bg);
  box-shadow: 5px 8px var(--blk-shadow);
  width: 150px;
  border-radius: 30px;
  border: 3px solid var(--black);
  color: var(--black);
  font-family: bungee, sans-serif;
  cursor: pointer;
  margin: 30px 0;
  font-size: 1.29em;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s;
}

input[type="submit"]:hover {
  background-color: var(--highlight);
  color: var(--linkhover);
}

label {
  font-size: 1.2em;
  padding-left: 20px;
  margin-top: 10px;
  padding-top: 7px;
}

.formgroup,
.formgroup-active,
.formgroup-error {
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 6.5%;
}

.formgroup-active {
  background-image: url('https://i.imgur.com/jaN12uk.png');
}

.formgroup-error {
  background-image: url('https://i.imgur.com/1CFCmEP.png');
  color: red;
}

/*======================ABOUT PAGE========================*/

#about-me main {
  padding-top: 5em;
}

.no-scroll {
  overflow-x: hidden;
}

.subtitle {
  font-size: 1.3em;
}

.profile-name {
  border-bottom: 2px solid var(--black);
  margin: 1% 3% 0 3%;
}

.profile-name p {
  font-size: 2.2em;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 15px 0;
  text-transform: uppercase;
}

.inner-shell {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-gap: 35px;
  margin: 4% 3%;
}

.slogan {
  font-weight: 600;
  font-style: italic;
  font-size: 1.3em;
}

.about-profile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.about-content {
  border: 2px solid var(--black);
  padding: 15px;
}

.about-content ul {
  list-style-type: none;
  padding-left: 0;
}

.about-content ul li {
  line-height: 1.8em;
}

.bio {
  font-size: 0.9em;
  line-height: 1.4em;
}

.about-img {
  border: 3px solid var(--black);
  border-radius: 5px 5px 5px 5px;
  max-width: 100%;
  object-fit: contain;
}

/*======================PROJECTS PAGE========================*/
.summary {
  border: 2px solid var(--black);
  width: 30vw;
  min-width: 160px;
  padding: 15px;
  background: var(--white);
  border-radius: 10px;
}

.summary-text {
  font-size: 0.9em;
  line-height: 1.3em;
}

/*----Palette----*/
.palette {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border: 2px solid var(--black);
  padding: 15px;
  margin-bottom: 10px;
}

.palette-circle {
  width: 50px;
  height: 50px;
  border: 2px solid var(--black);
  border-radius: 50px;
}

/*------- Yume Forest Color Palette -------*/
.dark-pink {
  background: #e89797;
}

.brown {
  background: #7d5a5a;
}

.olive-green {
  background: #b0bb9d;
}

/*------- JY Goldmeter Color Palette -------*/
.orange {
  background: #FAAD1E;
}

.red {
  background: #9E2116;
}

.jy-gray {
  background: #242A2B;
}

/*------- Rinos-IP Color Palette -------*/
.dark-yellow {
  background: #ad8c02;
}

.dark-blue {
  background: #0e9aad;
}

.rinos-gray {
  background: #282828;
}

/*===========================================================
-----------------------MEDIA QUERIES-------------------
=============================================================*/

@media only screen and (min-width: 1506px) and (max-width:1704px) {
  .mail .icon-tooltip {
    right: 7.5%;
  }
}

@media only screen and (min-width: 1307px) and (max-width:1505px) {
  .mail .icon-tooltip {
    right: 8.5%;
  }
}

@media only screen and (min-width: 975px) and (max-width:1306px) {
  .mail .icon-tooltip {
    right: 10%;
  }

  .moon .icon-tooltip {
    right: 53%;
  }
}

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

  .shadow,
  .rev-shadow {
    box-shadow: none;
  }
}

@media screen and (min-width:1367px) and (max-width: 1494px) {
  .absolute {
    margin-top: 28%;
    left: 14%;
  }
}

/*======== iPad Pro 12.9 Landscape View 1366px ==========*/
@media screen and (min-width: 1366px) and (max-width: 1366px) {
  .reg {
    width: 650px;
  }

  .absolute {
    margin-top: 17%;
    left: 38%;
  }

  .block {
    display: block;
  }

  .vid {
    width: 575px;
  }

  .video-shell-body {
    height: 38vh;
  }

  .page-links.block {
    display: block;
  }
}

@media screen and (max-width: 1186px) {
  .absolute {
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
  }
}

@media only screen and (min-width: 500px) and (max-width:974px) {
  .mail .icon-tooltip {
    right: 6%;
    top: 65%;
  }

  .moon .icon-tooltip {
    right: 43%;
    top: 70%;
  }
}

/*======== Tablet view between 1024px and 769px ==========*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {

  h2 {
    font-size: 2.8em;
  }

  .absolute {
    position: absolute;
    top: 75%;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .xl {
    width: 900px;
    height: auto;
    max-width: 100%;
  }

  .page-links.block {
    display: block;
  }
}

@media screen and (max-width: 990px) {
  #mobile-logo {
    display: block;
  }

  #desktop-logo {
    display: none;
  }

  .tagline {
    top: 65%;
    font-size: 2em;
  }

  .accent-left {
    margin-left: 0;
  }

  .accent-right {
    margin-right: 0;
  }

  .page-links {
    padding: 30px;
    grid-gap: 30px;
  }

  .page-link {
    font-size: 1.4em;
  }

  .shell {
    padding: 0 40px;
  }

  .about-bg,
  .reg {
    height: auto;
  }

  .shell-padding {
    padding: 0;
  }

  .inner-shell {
    grid-template-columns: auto;
    grid-template-rows: auto;
  }

  .about-profile {
    margin-left: 0;
  }

  .subtitle {
    font-size: 103%;
  }

  .slogan {
    font-size: 1.2em;
  }

  .bio li {
    font-size: 1em;
  }

  .profile-name p {
    font-size: 1.7em;
  }

  .bio {
    font-size: 1em;
    line-height: 1.2em;
  }
}

@media screen and (max-width: 855px) {
  .fresh {
    font-size: 1em;
  }
}

@media screen and (min-width: 686px) and (max-width: 820px) {
  .img-container {
    width: 245px;
  }
}

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

  p,
  span,
  input,
  textarea,
  label {
    font-size: 75%;
  }

  .overlay-text a {
    font-size: 1.4em;
  }

  .inner-shell {
    grid-gap: 10px;
  }
}

@media only screen and (max-width: 724px) {
  .vid {
    width: 440px;
  }
}

/*======== Tablet view between 768px and 501px ==========*/

@media screen and (min-width: 501px) and (max-width: 768px) {


  .profile-name {
    margin: 0% 5% 0 5%;
  }

  .palette-circle {
    width: 40px;
    height: 40px;
  }

  .palette {
    padding: 10px;
    margin-bottom: 10px;
  }

  .top-padding {
    padding-top: 90px;
  }

  .absolute {
    top: 70%;
  }

  .vid {
    width: 685px;
    max-width: 100%;
  }

  input,
  textarea,
  label {
    font-size: 110%;
  }

  .indicator-container {
    top: 21%;
  }

  .tagline {
    top: 72%;
    font-size: 1.7em;
  }
}

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

  .indicator-container {
    height: 3.4em;
    width: 3.4em;
  }

  .arrowpoint {
    border-width: 12px 11px 0 11px;
  }

  .base {
    width: 4px;
    height: 1.1em;
  }

  input[type="email"],
  input[type="text"],
  textarea {
    width: 350px;
  }
}

@media screen and (min-width: 576px) and (max-width: 685px) {
  .img-container {
    width: 205px;
  }
}

@media only screen and (max-width: 650px) {
  .accent {
    margin-top: -15px;
  }
}

@media screen and (max-width: 575px) {
  .img-container {
    width: 165px;
  }
}

/*======== Mobile view under 500px ==========*/
@media screen and (max-width: 500px) {

  h3 {
    font-size: 1em;
  }

  .top-padding {
    padding-top: 75px;
  }

  .top-bar {
    padding: 20px;
  }

  .overlay a {
    font-size: 1.8em;
    padding: 11px;
  }

  .overlay-text a {
    font-size: 1em;
  }

  .byline {
    font-size: 0.9em;
  }

  a.menu-toggle svg {
    width: 48px;
  }

  a.dark-mode-toggle svg {
    width: 5vh;
  }

  .mail a svg {
    width: 6vh;
  }

  .icon-tooltip {
    font-size: 8px;
  }

  .moon .icon-tooltip {
    top: 59%;
    right: 35%;
  }

  .mail .icon-tooltip {
    top: 57%;
    right: 2.2%;
  }

  #lineDrawing {
    padding: 50px;
  }

  .triangle {
    margin: -15% 0 0 84%;
  }

  .triangle_shadow {
    margin: -15% 0 0 85%;
  }

  .social-grid a svg,
  .triangle svg,
  .triangle_shadow svg {
    width: 11vh;
  }

  .tagline {
    top: 66%;
    font-size: 1.2em;
    right: 12%;
  }

  .indicator-container {
    top: 20%;
    border-width: 2px;
  }

  .bio {
    font-size: 0.7em;
    line-height: 1.3em;
  }

  .slogan {
    font-size: 0.9em;
  }

  .subtitle {
    font-size: 90%;
  }

  .profile-name p {
    font-size: 1.1em;
    margin: 6px 0;
  }

  .profile-name {
    margin: 1% 5% 0 5%;
  }

  .about-img {
    border: 2px solid var(--black);
  }

  .about-content {
    border: 2px solid var(--black);
    padding: 6px 15px;
  }

  .about-content ul {
    margin: 4px 0;
  }

  .about-content ul li {
    line-height: 1.8em;
    font-size: 0.7em;
  }

  .grid-bg::before {
    background-size: 50px 50px, 50px 50px;
  }

  .video-shell-body,
  .shell-body {
    border-bottom: 2px solid var(--black);
    border-right: 2px solid var(--black);
    border-left: 2px solid var(--black);
  }

  .summary-text {
    font-size: 0.5em;
    line-height: 1.5em;
  }

  input[type="email"],
  input[type="text"],
  textarea {
    width: 100%;
    padding: 3px;
    font-size: 16px;
  }

  textarea {
    height: 82px;
  }

  .vid,
  .reg {
    width: 300px;
  }

  video {
    height: 26vh;
  }

  .absolute {
    left: 10%;
    width: 27vw;
    top: 63%;
  }

  .fresh {
    font-size: 0.7em;
  }

  input[type="submit"] {
    width: 90px;
    font-size: 0.8em;
    margin: 16px 0;
    border: 2px solid var(--black);
  }

  .page-links {
    padding: 10px;
    grid-gap: 20px;
  }

  .page-link {
    font-size: 1em;
  }

  .rect1 {
    grid-column: 2/9;
    grid-row: 4/9;
    background: none;
    border: 2px solid var(--black);
  }

  .rect2 {
    grid-column: 3/10;
    grid-row: 6/10;
  }

  .shell-header {
    height: 20px;
    border: 2px solid var(--black);
  }

  .palette {
    padding: 5px;
    margin-bottom: 10px;
  }

  .palette-circle {
    width: 17px;
    height: 17px;
    border: 2px solid var(--black);
    border-radius: 50px;
  }

  .img-thumbnail {
    border: 2px solid var(--black);
  }

  .header-dot {
    height: 8px;
    width: 8px;
    border: 2px solid var(--black);
  }

  .img-container {
    box-shadow: none;
    margin: 10px;
    border: 2px solid var(--black);
  }

  label {
    padding-left: 0px;
    margin-top: 5px;
    padding-top: 4px;
  }
}

@media only screen and (max-width: 414px) {
  .absolute {
    margin-top: 63%;
    left: 2%
  }

  .moon .icon-tooltip {
    top: 65%;
    right: 37%;
  }

  .mail a svg {
    width: 5vh;
  }

  a.dark-mode-toggle svg {
    width: 4vh;
  }

  a.menu-toggle svg {
    width: 36px;
  }
}

/* ==== EMBLEMS ==== */

#designrush,
#awwwards {
  display: none;
}

@media screen and (min-width: 1024px) {
  #designrush {
    position: fixed;
    z-index: 999;
    top: 80%;
    right: 0;
    display: block;
  }

  #awwwards {
    display: block;
    position: fixed;
    z-index: 999;
    transform: translateY(-50%);
    top: 50%;
    right: 0
  }
}