:root {
  --blue: #4ee7ec;
  --yellow: #ffe14b;
  --pink: #ffbbf7;
  --dark: #333;
}

body {
  font-family: "Montserrat", sans-serif;
  color: #333;
  margin: 0;
}

header, footer, main {
  padding: 0 5rem;
}

h1 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2rem;
  margin: 0;
}

h3 {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0;
}

h2 {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 5rem;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  margin: 0;
  letter-spacing: 0.2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background: -webkit-gradient(linear, left bottom, left top, from(#87d0ea), color-stop(#ffe14b), to(#ffbbf7));
  background: linear-gradient(to top, #87d0ea, #ffe14b, #ffbbf7);
  background-repeat: no-repeat;
  background-size: 40% 3.75em;
  background-position: 1.75rem 0rem;
}

p, a, button, label {
  color: inherit;
  text-decoration: none;
  margin: auto;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
}

p {
  max-width: 30rem;
  place-self: center;
}

section, #index h2 {
  margin: 2rem 0;
}

.icon {
  background: none;
  position: fixed;
  left: 2rem;
}

.icon .material-icons {
  font-size: 5rem;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--blue)), color-stop(var(--yellow)), to(var(--pink)));
  background: linear-gradient(to top, var(--blue), var(--yellow), var(--pink));
  background-repeat: no-repeat;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  background-clip: text;
  color: var(--dark);
}

.icon .material-icons:hover {
  color: transparent;
}

a, button {
  background: -webkit-gradient(linear, left top, right top, from(var(--dark)), to(var(--dark))), -webkit-gradient(linear, left top, right top, from(var(--blue)), color-stop(var(--yellow)), to(var(--pink)));
  background: linear-gradient(to right, var(--dark), var(--dark)), linear-gradient(to right, var(--blue), var(--yellow), var(--pink));
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms;
  transition: background-size 400ms;
}

a:hover, button:hover {
  background-size: 0 20px, 100% 20px;
}

#succulent path, #jade path, #leaf path {
  fill: var(--blue);
}

#pathos path {
  fill: var(--yellow);
}

#koidark path, #koilight path {
  fill: var(--pink);
}

header {
  margin: 1rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

header h3 {
  font-size: 1rem;
}

.name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin: 0;
}

.name img {
  height: 100%;
  max-height: 4rem;
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

nav a {
  margin: 0rem .25rem 0 .25rem;
  padding: 1rem 1rem 0 1rem;
  text-transform: uppercase;
}

#succulent {
  width: 30%;
  position: absolute;
  top: -2rem;
  left: 1rem;
  z-index: -1;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

footer {
  background: #333;
  color: white;
  padding-bottom: 1rem;
}

footer a {
  -webkit-transition: color 400ms;
  transition: color 400ms;
  background: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(var(--blue)), color-stop(var(--yellow)), to(var(--pink)));
  background: linear-gradient(to right, #fff, #fff), linear-gradient(to right, var(--blue), var(--yellow), var(--pink));
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms;
  transition: background-size 400ms;
}

footer a:hover {
  color: var(--dark);
}

main {
  display: -ms-grid;
  display: grid;
  grid-gap: 3rem .5rem;
  -ms-grid-columns: 1fr 3fr 1.5fr;
      grid-template-columns: 1fr 3fr 1.5fr;
  margin: 4rem 0;
}

article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

article a,
article p,
article h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0.25rem 0;
}

#life {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 1;
  grid-row: 1;
  z-index: 1;
  margin-top: 2rem;
}

#life h2 {
  background-size: 40% 3.75em;
}

.life {
  margin-top: 2rem;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  -ms-grid-column: 2;
  grid-column: 2;
}

.life p {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  line-height: 2rem;
}

#rin1 {
  max-width: 15rem;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 2;
  -ms-grid-column: 1;
  grid-column: 1;
  width: 100%;
  padding-top: 2rem;
}

#rin2 {
  max-width: 15rem;
  width: 100%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  -ms-grid-column: 3;
  grid-column: 3;
}

#art {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 4;
  grid-row: 4;
}

#art h2 {
  background-size: 40% 6.75em;
}

.art {
  -ms-grid-row: 4;
  grid-row: 4;
  -ms-grid-column: 2;
  grid-column: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.art img {
  width: 200px;
  height: 100%;
}

.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gallery img {
  padding: 0.5rem;
}

#koidark {
  max-width: 40rem;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  z-index: -1;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -webkit-transform: translateX(7rem) translateY(-15rem);
          transform: translateX(7rem) translateY(-15rem);
}

#jellyfish {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 4;
  grid-row: 4;
  position: relative;
  left: -7rem;
  width: 200%;
  z-index: -1;
}

#koilight {
  max-width: 40rem;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / span 2;
  -ms-grid-row: 2;
  grid-row: 2;
  z-index: -1;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

#skill{
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 5;
  grid-row: 5;
}

#skill h2 {
  background-size: 40% 5em;
}

.skill {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 5;
  grid-row: 5;
}

#pathos {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
  -ms-grid-row: 5;
  grid-row: 5;
  -webkit-transform: rotate(244deg);
          transform: rotate(244deg);
  position: relative;
  right: -10rem;
  top: -3rem;
  justify-self: flex-end;
  z-index: -1;
}

#experiance {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 6;
  grid-row: 6;
}

#experiance h2 {
  background-size: 40% 10em;
}

.experiance {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 6;
  grid-row: 6;
}

#leaf {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / span 2;
  -ms-grid-row: 6;
  -ms-grid-row-span: 2;
  grid-row: 6 / span 2;
  max-width: 30rem;
  z-index: -1;
  -webkit-transform: rotate(48deg) translateX(-5rem) translateY(10rem);
          transform: rotate(48deg) translateX(-5rem) translateY(10rem);
}

#other {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 7;
  grid-row: 7;
}

#other h2 {
  background-size: 40% 3.75em;
}

.other {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 7;
  grid-row: 7;
}

.other p {
  place-self: flex-start;
}

#jade {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
  -ms-grid-row: 6;
  grid-row: 6;
  max-width: 30rem;
  z-index: -1;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -webkit-transform: translateX(25rem) translateY(12rem);
          transform: translateX(25rem) translateY(12rem);
}

#portfolio {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 1;
  grid-row: 1;
}

#portfolio h2 {
  background-size: 40% 8.5em;
}

.portfolio {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
}

.portfolio img {
  padding: 0;
  margin: .5rem;
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  mix-blend-mode: multiply;
}

.portfolio main {
  -ms-grid-columns: 1fr 6fr 1fr;
      grid-template-columns: 1fr 6fr 1fr;
}

.portfolio article {
  width: 200px;
}

.portfolio article h3, .portfolio article p {
  margin: 0;
  text-align: center;
}

.portfolio article h3 {
  font-size: 1rem;
}

.portfolio a {
  background: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff)), -webkit-gradient(linear, left bottom, left top, from(var(--blue)), color-stop(var(--yellow)), to(var(--pink)));
  background: linear-gradient(to top, #fff, #fff), linear-gradient(to top, var(--blue), var(--yellow), var(--pink));
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms;
  transition: background-size 400ms;
}

.portfolio a:hover {
  background-size: 0 20px, 100% 100%;
}

#contact {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 2;
  grid-row: 2;
}

#contact h2 {
  background-size: 40% 6.5em;
}

label {
  display: block;
  width: 100%;
  resize: none;
  color: #333;
}

form input, textarea {
  color: #333;
  font-size: 1rem;
  width: 100%;
  height: 2rem;
  background: none;
  border: 3px solid #333;
}

textarea {
  min-height: 12rem;
}

.contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-right: 1rem;
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
}

.contact h2 {
  -ms-grid-column: 3;
  grid-column: 3;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--blue)), color-stop(var(--yellow)), to(var(--pink)));
  background: linear-gradient(to top, var(--blue), var(--yellow), var(--pink));
  background-repeat: no-repeat;
  background-size: 45% 8em;
  background-position: 1.75rem 0rem;
}

.contact div {
  max-width: 20rem;
}

button {
  border: none;
}

.portdescription {
  -ms-grid-columns: 1fr 75% 1fr;
      grid-template-columns: 1fr 75% 1fr;
  grid-gap: 1rem;
  justify-items: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.portdescription h1 {
  font-size: 40rem;
  font-family: 'Barlow Condensed', sans-serif;
  z-index: -1;
  -webkit-transform: translatey(-10rem) translatex(-2rem);
          transform: translatey(-10rem) translatex(-2rem);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--blue)), color-stop(var(--blue)), color-stop(var(--yellow)), color-stop(var(--pink)), to(var(--pink)));
  background: linear-gradient(var(--blue), var(--blue), var(--yellow), var(--pink), var(--pink));
  background-clip: text;
  color: transparent;
}

.portdescription h2 {
  background: none;
}

.portdescription img {
  max-width: 400px;
  width: 100%;
  height: 100%;
}

.portdescription .fig {
  height: 100%;
}

.portdescription #ideation, .portdescription #one {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 3;
  grid-column: 3;
}

.portdescription .ideation {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 2;
  grid-column: 2;
}

.portdescription #sketches, .portdescription #two {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 3;
  grid-column: 3;
}

.portdescription .sketches {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 2;
  grid-column: 2;
}

.portdescription #drafts, .portdescription #three {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 3;
  grid-column: 3;
}

.portdescription .drafts {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 2;
  grid-column: 2;
}

.portdescription #final, .portdescription #four {
  -ms-grid-row: 4;
  grid-row: 4;
  -ms-grid-column: 3;
  grid-column: 3;
}

.portdescription .final {
  -ms-grid-row: 4;
  grid-row: 4;
  -ms-grid-column: 2;
  grid-column: 2;
}

#internship #portfolio {
  grid-row: span 2;
}

#internship .intershipdescrip {
  -ms-grid-column: 2;
  grid-column: 2;
}

#header404 {
  -ms-grid-column: 3;
  grid-column: 3;
}

#header404 h2 {
  background-size: 40% 4em;
}

.oops section {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.oops img {
  margin-top: 2rem;
  width: 100%;
}

@media screen and (max-width: 900px) {
  p {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    place-self: flex-start;
  }
}

@media screen and (max-width: 600px) {
  main {
    margin: 0;
    padding: 0;
  }
  header, footer {
    padding: 1rem;
  }
  #koidark {
    -webkit-transform: translateX(0rem);
            transform: translateX(0rem);
  }
  #jellyfish {
    left: 0;
  }
  #pathos {
    -webkit-transform: rotate(302deg);
            transform: rotate(302deg);
    right: -7rem;
  }
  #jade {
    -webkit-transform: translateX(0rem);
            transform: translateX(0rem);
  }
  article p {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    place-self: flex-start;
  }
  .portdescription h1 {
    display: none;
  }
  .portdescription h2 {
    font-size: 3rem;
    background: -webkit-gradient(linear, left bottom, left top, from(#87d0ea), color-stop(#ffe14b), to(#ffbbf7));
    background: linear-gradient(to top, #87d0ea, #ffe14b, #ffbbf7);
    background-repeat: repeat;
    background-size: auto;
    background-repeat: no-repeat;
    background-size: 40% 3.75em;
    background-position: 1.25rem 0rem;
  }
  .portdescription #ideation {
    background-size: 40% 6.75em;
  }
  .portdescription #sketches {
    background-size: 40% 7.75em;
  }
  .portdescription #drafts {
    background-size: 40% 5.75em;
  }
  .portdescription #final {
    background-size: 40% 4.25em;
  }
  .icon {
    bottom: 3rem;
  }
}
/*# sourceMappingURL=styles.css.map */