@charset "UTF-8";
body {
  margin: 0px;
  font-family: 'Courier New', Courier, monospace; }

a {
  color: black;
  text-decoration: none; }

ul, li {
  list-style: none;
  margin-block-start: 0em;
  margin-block-end: 0em; }

h1, h2, h3, h4, h5, p {
  margin: 0px;
  padding: 0px; }

html {
  scroll-behavior: smooth; }

:root {
  --yellow: #fdbd53;
  --grey: #d4d4d4;
  --white: #ffff;
  --black: #3c3d41;
  --red: #c94b4b;
  --section-bg: var(--white);
  --section-bg-shadow: 1px 1px 5px #a09c9c;
  --section-font-color: var(--black);
  --content-container-bg: var(--grey);
  --final-color: var(--black);
  --toggle-bg: var(--grey);
  --section-title: var(--yellow);
  --dialog-close: var(--black);
  --link-stroke: var(--black);
  --link-bg: var(--red);
  --fw-background: black;
  --fw-color: white; }

.dark {
  --section-bg: black;
  --section-bg-shadow: 0px 0px 5px #121214;
  --section-font-color: var(--white);
  --content-container-bg: var(--black);
  --final-color: var(--white);
  --toggle-bg: var(--black);
  --dialog-close: var(--grey);
  --link-stroke: var(--red);
  --link-bg: var(--black);
  --fw-background: var(--yellow);
  --fw-color: var(--black); }

.dark .content__container {
  background-color: #000000 !important; }

.dark .aboutme {
  background: #FF416C;
  background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
  background: linear-gradient(to left, #FF4B2B, #FF416C) !important; }

.dark .code {
  background: #FC466B;
  background: -webkit-linear-gradient(to right, #3F5EFB, #FC466B);
  background: linear-gradient(to right, #3F5EFB, #FC466B) !important; }
  .dark .code .fwcard {
    background: #3c3d41 !important;
    color: white !important; }

.dark .dontcode {
  background: #c94b4b;
  background: -webkit-linear-gradient(to right, #4b134f, #c94b4b);
  background: linear-gradient(to top, #4b134f, #c94b4b); }

.dark .works {
  background: #6441A5;
  background: -webkit-linear-gradient(to right, #2a0845, #6441A5) !important;
  background: linear-gradient(to right, #2a0845, #6441A5) !important; }
  .dark .works .work__item {
    background-color: #3c3d41 !important;
    color: white !important; }

.dark .timeline {
  background: #FC354C;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0ABFBC, #FC354C) !important;
  background: linear-gradient(to right, #0ABFBC, #FC354C) !important; }
  .dark .timeline .timeline__card {
    background-color: #3c3d41 !important; }
    .dark .timeline .timeline__card-time {
      color: #3c3d41; }

.dark .open_btn svg {
  background: #3c3d41;
  color: white; }

body {
  display: grid;
  height: 100vh;
  font-family: karla; }
  body * {
    transition: all 0.05s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  body .profile--img {
    width: 60% !important;
    margin: 0px !important; }
  @media only screen and (min-width: 768px) {
    body {
      grid-template-columns: 30vw 1fr; }
      body .open_btn {
        display: none; } }
  @media only screen and (max-width: 600px) {
    body {
      grid-template-columns: 0px 1fr; }
      body .content__container {
        margin: 0px 10px; }
      body section#aboutme,
      body section#code,
      body section#works,
      body section#dontcode,
      body section#timeline {
        padding: 30px 40px;
        width: 70% !important; }
      body .linkcons {
        margin: 0px !important;
        width: 100% !important; }
        body .linkcons img {
          width: 30px !important;
          margin: 15px 20px !important; }
      body .open_btn.close {
        transform: rotate(180deg); }
      body .open_btn {
        z-index: 1000;
        transition: transform 0.25s ease; }
        body .open_btn svg {
          width: 1.5rem;
          height: 1.5rem;
          background: #e2e2e2;
          padding: 10px;
          border-radius: 50%;
          box-shadow: 0px 0px 1px black; }
      body .navbar {
        overflow: hidden;
        height: 0vh;
        position: absolute;
        top: 0;
        left: 0;
        grid-row: unset !important;
        z-index: 1;
        transition: height 0.4s cubic-bezier(0, 0, 0.2, 1); }
      body .content {
        width: 100vw;
        position: relative; }
        body .content .open_btn {
          position: fixed;
          bottom: 2rem;
          right: 1.5rem;
          z-index: 1; }
      body .dialog {
        width: 90% !important;
        height: 80% !important;
        overflow: scroll; }
        body .dialog .dialog__content {
          flex-direction: column !important; }
          body .dialog .dialog__content .gallery {
            overflow: visible !important;
            width: 100% !important;
            margin-top: 10px !important; }
            body .dialog .dialog__content .gallery img {
              width: 100% !important;
              margin: 10px 0px !important; } }
  body .navbar {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--yellow);
    max-height: 100vh;
    overflow: hidden; }
    body .navbar .navbar__profile {
      transform: none;
      width: 80%; }
      body .navbar .navbar__profile img {
        margin: 10px 0px; }
      body .navbar .navbar__profile .toggle__container {
        margin-left: 5px; }
        body .navbar .navbar__profile .toggle__container .toggle {
          background-color: var(--toggle-bg);
          border-radius: 50px;
          width: 50px;
          height: 25px;
          position: relative;
          padding-top: 5px;
          box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75); }
          body .navbar .navbar__profile .toggle__container .toggle * {
            cursor: pointer; }
          body .navbar .navbar__profile .toggle__container .toggle .toggle--checkbox {
            position: absolute;
            width: inherit;
            height: 80%;
            opacity: 0;
            z-index: 1; }
            body .navbar .navbar__profile .toggle__container .toggle .toggle--checkbox:checked + .toggle--content::after {
              margin-left: 5px;
              content: url("/assets/img/sun.svg");
              width: 20px;
              display: block;
              transition: all 0.45s cubic-bezier(0, 0, 0.2, 1); }
            body .navbar .navbar__profile .toggle__container .toggle .toggle--checkbox:not(:checked) + .toggle--content::after {
              margin-left: 25px;
              content: url("/assets/img/moon.svg");
              width: 20px;
              display: block;
              transition: all 0.45s cubic-bezier(0, 0, 0.2, 1); }
      body .navbar .navbar__profile .navbar__profile-content h1 {
        font-size: xx-large;
        margin: 1rem 0rem;
        font-weight: 100;
        text-shadow: 2px 2px 5px #00000042; }
      body .navbar .navbar__profile .navbar__profile-content hr {
        border: solid 0.1px black; }
      body .navbar .navbar__profile .navbar__profile--links {
        display: flex;
        justify-content: center;
        margin: 10px 0px;
        padding: 0px; }
        body .navbar .navbar__profile .navbar__profile--links li {
          margin: 0px 20px; }
          body .navbar .navbar__profile .navbar__profile--links li svg {
            width: 25px;
            height: 25px;
            padding: 10px;
            stroke: var(--black);
            border-radius: 50%;
            transition: all ease-in 0.2s; }
            body .navbar .navbar__profile .navbar__profile--links li svg:hover {
              stroke: var(--yellow);
              background-color: var(--black);
              box-shadow: 0 0.8px 4px rgba(0, 0, 0, 0.025), 0 1.9px 8.8px rgba(0, 0, 0, 0.035), 0 3.9px 15.9px rgba(0, 0, 0, 0.045), 0 8px 29.3px rgba(0, 0, 0, 0.055), 0 22px 74px rgba(0, 0, 0, 0.08); }
      body .navbar .navbar__profile .navbar__links {
        width: 100%;
        padding: 20px 10px; }
        body .navbar .navbar__profile .navbar__links li {
          padding: 10px 0px;
          cursor: pointer;
          display: inline-block;
          position: relative;
          transition: 0.5s;
          font-size: 20px;
          width: 100%; }
          body .navbar .navbar__profile .navbar__links li:hover {
            text-decoration: underline;
            padding-right: 24px;
            padding-left: 8px; }
            body .navbar .navbar__profile .navbar__links li:hover::after {
              opacity: 1;
              right: 10px; }
          body .navbar .navbar__profile .navbar__links li::after {
            content: "  👈";
            position: absolute;
            opacity: 0;
            right: -20px;
            transition: 0.5s; }
  body .content {
    grid-row: 1;
    display: inline-block;
    justify-content: center;
    background: #d4d4d4;
    overflow: hidden scroll; }
    body .content .header {
      display: none; }
    @media only screen and (max-width: 600px) {
      body .content .header {
        position: sticky;
        display: block;
        top: 0;
        z-index: 100;
        padding: 15px 0px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        overflow: hidden;
        background-color: #fdbd53b3; }
        body .content .header:before {
          content: "";
          position: absolute;
          background: inherit;
          z-index: -1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          box-shadow: inset 0 0 2000px #fdbd53b3;
          filter: blur(10px);
          margin: -1px; }
      body .content section {
        width: 58% !important; }
        body .content section .content__content {
          margin-top: 0px !important; }
        body .content section .fwcard {
          margin: 5px !important; }
      body .content .aboutme__content .name h1 {
        font-size: 30px !important; }
      body .content .aboutme .life {
        flex-direction: column !important; }
        body .content .aboutme .life img {
          width: 80% !important; }
        body .content .aboutme .life p {
          width: 100% !important;
          margin: 20px 0px; }
      body .content .aboutme .short {
        font-size: 20px !important;
        text-align: left !important; }
      body .content .code h1, body .content .timeline h1, body .content .works h1 {
        font-size: 30px !important; }
      body .content .timeline__content {
        flex-direction: column !important; }
      body .content .timeline__card {
        margin-bottom: 15px !important; }
      body .content .works .work {
        flex-direction: column !important;
        margin-top: 20px !important; }
        body .content .works .work__item {
          margin-top: 15px !important; }
      body .content .content__container {
        padding: 0px;
        margin: 0px; } }
    body .content .content__container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--content-container-bg); }
    body .content section {
      width: 70%;
      margin: 30px 0px;
      background: var(--section-bg);
      padding: 50px;
      border-radius: 15px;
      color: var(--section-font-color);
      box-shadow: var(--section-bg-shadow);
      height: fit-content;
      position: relative; }
      body .content section:after {
        position: absolute;
        background-color: #2962b9;
        height: 100%;
        width: 15px;
        top: 0;
        right: 0;
        border-radius: 0px 5px 5px 0px; }
      body .content section .content__title {
        margin-bottom: 1.2rem; }
        body .content section .content__title h1 {
          font-size: xx-large;
          font-weight: bolder; }
      body .content section .content__content p {
        font-size: large; }
    body .content .aboutme {
      background-color: #ff5c7c; }
      body .content .aboutme .aboutme__content {
        position: relative; }
        body .content .aboutme .aboutme__content .name h1 {
          color: white;
          font-size: 40px; }
        body .content .aboutme .aboutme__content .name p {
          font-size: 20px; }
        body .content .aboutme .aboutme__content .life {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin: 25px 0px; }
          body .content .aboutme .aboutme__content .life img {
            width: 25%; }
          body .content .aboutme .aboutme__content .life p {
            font-size: 25px;
            width: 70%;
            color: white; }
        body .content .aboutme .aboutme__content .short {
          font-size: 20px;
          font-weight: 400;
          color: #ff5c7c;
          background: white;
          padding: 15px 20px;
          border-radius: 5px; }
    body .content .code {
      background: #1c92d2;
      color: white; }
      body .content .code .code__content .content__message {
        font-size: 25px;
        margin-top: 2rem;
        margin-bottom: 3rem;
        text-align: justify; }
      body .content .code .code__content .content__note {
        background-color: white;
        color: #1c92d2;
        border-radius: 5px;
        padding: 15px;
        font-size: 22px;
        margin-bottom: 3rem;
        text-align: center; }
      body .content .code .code__content .content__frameworks {
        margin: 10px 0px 25px 0px;
        height: auto;
        flex-wrap: wrap; }
      body .content .code .code__content .fwcard {
        margin-left: 20px;
        background: var(--fw-background);
        padding: 10px 12px;
        border-radius: 20px;
        color: var(--fw-color);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 0.8rem;
        box-shadow: 0px 2px 5px #5a5555; }
        body .content .code .code__content .fwcard img {
          width: 1.2rem; }
        body .content .code .code__content .fwcard p {
          font-size: small;
          margin: 0px 5px;
          padding: 0px; }
    body .content .works {
      background: #654ea3;
      color: white; }
      body .content .works__content .info {
        padding: 15px 10px;
        background: white;
        color: #654ea3;
        text-align: center;
        border-radius: 5px;
        font-size: 22px; }
      body .content .works__content .work {
        display: flex; }
        body .content .works__content .work__title {
          margin-top: 1.5rem;
          margin-bottom: .5rem;
          font-size: 25px; }
        body .content .works__content .work__item {
          background: #eaafc8;
          color: black;
          height: 5rem;
          margin: 45px 10px 10px 0px;
          font-size: 20px;
          width: 15rem;
          border-radius: 5px;
          transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
          box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
          cursor: pointer;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center; }
          body .content .works__content .work__item * {
            cursor: pointer; }
          body .content .works__content .work__item:hover {
            transform: translate3d(0px, -3px, 0px);
            box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); }
          body .content .works__content .work__item p {
            padding: 0;
            font-size: 30px; }
          body .content .works__content .work__item-container {
            margin-top: 50px; }
      body .content .works__content hr {
        width: 40%;
        margin-left: 1.5rem; }
    body .content .dontcode {
      background-color: #c94b4b;
      color: white; }
      body .content .dontcode .dontcode__content .socialinfo {
        padding: 15px;
        background: white;
        color: #0d2220;
        border-radius: 5px;
        margin: 1.5rem 0px;
        font-size: 22px; }
      body .content .dontcode .dontcode__content .social__links p {
        font-size: 25px;
        text-align: justify;
        margin-bottom: 1.4rem;
        padding: 10px; }
      body .content .dontcode .dontcode__content .social__links a {
        color: var(--black); }
      body .content .dontcode .dontcode__content img {
        width: 200px;
        margin: 20px 30px; }
      body .content .dontcode .dontcode__content .linkcons {
        display: flex;
        justify-content: space-between;
        margin: 20px;
        flex-wrap: wrap;
        width: 60%;
        margin: auto; }
        body .content .dontcode .dontcode__content .linkcons a > svg {
          width: 30px;
          margin: 5px 10px;
          padding: 0px 10px;
          border-radius: 50%;
          stroke: var(--link-stroke);
          transition: all ease-in 0.2s; }
          body .content .dontcode .dontcode__content .linkcons a > svg:hover {
            stroke: var(--link-bg);
            background-color: var(--link-stroke); }
    body .content .timeline {
      background-color: #0ABFBC; }
      body .content .timeline .timeline__content {
        margin-top: 30px;
        display: flex;
        flex-direction: row;
        overflow-x: scroll; }
        body .content .timeline .timeline__content .timeline__card {
          background-color: #2090f3;
          width: fit-content;
          padding: 20px 20px;
          border-radius: 6px;
          margin: 0px 20px 0px 0px;
          min-width: 16rem; }
          body .content .timeline .timeline__content .timeline__card-title {
            color: white;
            font-size: 25px;
            height: 40px; }
          body .content .timeline .timeline__content .timeline__card-time {
            font-weight: 100;
            background-color: white;
            border-radius: 5px;
            margin-top: 0px;
            padding: 3px 5px;
            width: fit-content; }
    body .content .final {
      font-size: large;
      margin-bottom: 2rem;
      color: var(--final-color); }

.dialog__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000a8;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  display: none; }
  .dialog__container .dialog {
    background-color: var(--section-bg);
    padding: 30px;
    color: #3c3d41;
    height: 70%;
    width: 70%;
    box-sizing: border-box;
    border-radius: 5px; }
    .dialog__container .dialog p {
      color: var(--black); }
    .dialog__container .dialog h1,
    .dialog__container .dialog h3 {
      color: #654ea3; }
    .dialog__container .dialog .dialog__title {
      flex-direction: row;
      display: flex;
      justify-content: space-between; }
      .dialog__container .dialog .dialog__title svg {
        width: 25px;
        height: 25px;
        padding: 5px 5px;
        border-radius: 50%;
        stroke: var(--link-stroke);
        cursor: pointer; }
        .dialog__container .dialog .dialog__title svg:hover {
          stroke: var(--link-bg);
          background: var(--link-stroke); }
    .dialog__container .dialog .title__close svg {
      stroke: var(--dialog-close); }
    .dialog__container .dialog .dialog__content {
      display: flex;
      flex-direction: row; }
      .dialog__container .dialog .dialog__content .project__details {
        flex: 0.5;
        margin-right: 5%;
        margin-top: 20px; }
        .dialog__container .dialog .dialog__content .project__details .role {
          margin: 20px 0px; }
      .dialog__container .dialog .dialog__content .stack h3 {
        margin-bottom: 0px; }
      .dialog__container .dialog .dialog__content .gallery {
        display: flex;
        overflow: hidden scroll;
        flex-direction: row;
        flex: 1;
        flex-wrap: wrap;
        box-sizing: border-box;
        max-height: 50vh; }
        .dialog__container .dialog .dialog__content .gallery img {
          height: 80%;
          margin: 10px 15px; }