.glass {
  background: inherit;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  box-shadow: 0em 2em 30em -2em rgba(0, 0, 0, 0.7);
  z-index: 1; }

.glass:before {
  content: '';
  position: absolute;
  background: inherit;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.9);
  filter: blur(10px);
  z-index: -1;
  margin: -20px; }

ul {
  list-style: none; }

a {
  display: contents; }

h1, h2, h3,
p, ul, li,
small {
  margin: 0;
  padding: 0;
  color: #fff; }

form {
  display: contents; }

h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px; }

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: .9px; }

li, p {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: .9px; }

small {
  font-family: "Montserrat", sans-serif;
  font-weight: 400; }

.open_menu:hover,
.close_menu:hover {
  cursor: pointer; }

@keyframes pulsate {
  100% {
    /* Larger blur radius */
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #fff, 0 0 80px #fff, 0 0 90px #111, 0 0 100px #111, 0 0 150px #111; }
  0% {
    /* Smaller blur radius */
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #fff, 0 0 45px #fff, 0 0 55px #111, 0 0 70px #111, 0 0 80px #111; } }

@keyframes shift_dot {
  from {
    background-color: #333; }
  to {
    background-color: #FFA759; } }

.apply_shift_dot {
  animation: shift_dot infinite alternate 4s;
  animation-delay: 2s; }

@keyframes shift_lr {
  from {
    left: -20em; }
  to {
    left: 0em; } }

@-webkit-keyframes shift_lr {
  from {
    left: -20em; }
  to {
    left: 0em; } }

.apply_shift_lr {
  animation: shift_lr infinite alternate 10s;
  -webkit-animation: shift_lr infinite alternate 10s; }

@-webkit-keyframes shifting_gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes shifting_gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes breathe {
  from {
    transform: scale(1.04); }
  to {
    transform: scale(0.97); } }

@-webkit-keyframes breathe {
  from {
    transform: scale(1.04); }
  to {
    transform: scale(0.97); } }

.apply_breathe {
  animation: breathe 2s infinite alternate;
  animation-delay: 1s;
  -webkit-animation: breathe 2s infinite alternate;
  -webkit-animation-delay: 1s; }

@keyframes shifting_circ {
  from {
    left: 0em; }
  to {
    left: 1em; } }

.apply_shifting_circ1 {
  animation: shifting_circ 8s infinite alternate ease-in;
  -webkit-animation: shifting_circ 8s infinite alternate; }

.apply_shifting_circ2 {
  animation: shifting_circ 8s infinite alternate ease-in;
  -webkit-animation: shifting_circ 8s infinite alternate;
  animation-direction: reverse; }

@keyframes shifting_bg {
  from {
    background-position: top; }
  to {
    background-position: bottom; } }

.apply_shifting_bg {
  animation: shifting_bg infinite 4s alternate; }

@keyframes shifting_border {
  from {
    border-radius: 10% 50% 10% 50%; }
  to {
    border-radius: 75% 90% 75% 90%; } }

@-webkit-keyframes shifting_border {
  from {
    border-radius: 10% 50% 10% 50%; }
  to {
    border-radius: 75% 90% 75% 90%; } }

.apply_shifting_border {
  animation: shifting_border infinite 10s alternate;
  -webkit-animation: shifting_border infinite 10s alternate; }

@keyframes click_down {
  from {
    transform: translate(0, 0em); }
  to {
    transform: translate(0, 0.5em); } }

@-webkit-keyframes click_down {
  from {
    transform: translate(0, 0em); }
  to {
    transform: translate(0, 5em); } }

.apply_click_down {
  animation: click_down 1s alternate;
  -webkit-animation: click_down 1s alternate;
  background-color: red !important; }

@keyframes click_light {
  from {
    filter: brightness(0); }
  to {
    filter: brightness(2); } }

@keyframes click_light {
  from {
    filter: brightness(0); }
  to {
    filter: brightness(4); } }

.apply_click_light {
  animation: click_light .25s;
  -webkit-animation: click_light .25s; }

body, html {
  height: calc(100% - 2em);
  margin: 0;
  font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #000;
  font-size: .9em; }

#main_ctnr {
  display: flex;
  flex-flow: column; }

.pulse_blob {
  background: #6340ff;
  border-radius: 50%;
  height: 5px;
  width: 5px;
  box-shadow: 0 0 0 0 #6340ff;
  transform: scale(1);
  animation: pulse 2s infinite; }

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: #6340ff; }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(99, 64, 255, 0); }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(99, 64, 255, 0); } }

.orange_btn {
  border: 2px solid transparent;
  outline: none;
  padding: .5em 1.5em;
  border-radius: 10px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  background-color: #FFA759;
  color: #000; }

.rev_orange_btn {
  border: 2px solid transparent;
  outline: none;
  padding: .5em 1.5em;
  border-radius: 10px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #FFA759;
  background-color: #000;
  border-color: #FFA759; }

.orange_btn:hover,
.orange_btn:focus {
  filter: brightness(1.3);
  cursor: pointer;
  transition: .5s; }

.rev_orange_btn:hover,
.rev_orange_btn:focus {
  filter: brightness(1.4);
  cursor: pointer;
  transition: .5s; }

.button_like {
  display: flex;
  gap: .5em;
  justify-content: center;
  align-items: center;
  width: 8em;
  border-radius: 10px;
  padding: .5em .25em;
  border: 2px solid transparent; }
  .button_like img {
    width: 1em; }

.button_like[data-variant="0"] {
  background-color: #FFA759; }
  .button_like[data-variant="0"] p {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #000; }

.button_like[data-variant="1"] {
  border-color: #FFA759;
  background-color: #111; }
  .button_like[data-variant="1"] p {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #FFA759; }

.button_like[data-variant=neu1] {
  background-color: #fff;
  transform: rotate(5deg);
  box-shadow: 5px 5px 0 3px #000; }
  .button_like[data-variant=neu1] p {
    color: #000; }

.button_like[data-variant=neu2] {
  background-color: #FFA759;
  box-shadow: 5px 5px 0 3px #000;
  border: 4px solid #000;
  transform: rotate(-5deg); }
  .button_like[data-variant=neu2] p {
    color: #000; }

.button_like[data-variant=min1] {
  box-shadow: 5px 5px 25px 3px #c8c8c8;
  background: #FFA759;
  border: 4px solid #000; }
  .button_like[data-variant=min1] p {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #000; }

.button_like[data-variant=min2] {
  box-shadow: 5px 5px 25px 3px #c8c8c8;
  background: #000;
  border: 4px solid transparent; }
  .button_like[data-variant=min2] p {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff; }

.button_like[data-variant=glass] {
  background: #000;
  border: 4px solid transparent; }
  .button_like[data-variant=glass] p {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #E0FF00 !important;
    font-weight: 600 !important; }
  .button_like[data-variant=glass] img {
    font-size: 1.8em; }

.button_like:hover {
  cursor: pointer;
  filter: brightness(1.2); }

.dramatic_h1_ctnr {
  display: contents; }
  .dramatic_h1_ctnr h1 {
    font-size: 3em; }
  .dramatic_h1_ctnr hr {
    width: 1em;
    color: #FFA759; }

.skill_card {
  background-color: #111;
  height: 15em;
  border-radius: 20px;
  width: 80%;
  max-width: 20em;
  padding: 1em;
  position: relative; }
  .skill_card .skill_card_contents {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 1em; }
  .skill_card .skill_img {
    width: 2em; }
  .skill_card h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    letter-spacing: .9px;
    text-align: center; }
  .skill_card p {
    margin-top: 1em;
    font-weight: 600; }
  .skill_card .dotted_bg_ctnr {
    position: absolute;
    background-color: #000;
    height: 60%;
    width: 60%;
    display: flex;
    flex-flow: row wrap;
    gap: .33em;
    justify-content: center;
    z-index: -1; }
  .skill_card .dotted_bg_ctnr[data-variant="1"] {
    right: -1em;
    top: -1em; }
  .skill_card .dotted_bg_ctnr[data-variant="2"] {
    left: -1em;
    top: -1em; }
  .skill_card .dot {
    background-color: #333;
    border-radius: 50%;
    height: .5em;
    width: .5em; }

.skill_card[data-variant="1"] {
  left: -100em; }

.skill_card[data-variant="2"] {
  right: -100em; }

.github_tab {
  align-items: center;
  background: #000;
  border-radius: 10px 0px 0px 10px;
  bottom: 10em;
  display: none;
  gap: .5em;
  padding: .25em;
  position: fixed;
  right: 0;
  bottom: 8em;
  z-index: 1000;
  transition: 3s;
  mix-blend-mode: exclusion; }
  .github_tab img {
    width: 2em; }
  .github_tab p {
    color: #fff;
    transition: 1s;
    transition-delay: 2s;
    transform: scale(0);
    display: none; }

.github_tab:hover,
.github_tab:focus {
  mix-blend-mode: unset; }
  .github_tab:hover p,
  .github_tab:focus p {
    transition-delay: 2s;
    transform: scale(1);
    display: block;
    text-decoration: underline; }

@media only screen and (min-width: 1400px) {
  .github_tab {
    display: flex; } }

#header_section {
  background-color: #f8f8f8;
  height: 3em;
  padding: 1em; }
  #header_section nav {
    display: flex;
    justify-content: space-around;
    height: 100%;
    align-items: center; }
    #header_section nav p {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px; }
  #header_section p {
    color: #000000; }
  #header_section .time_container {
    display: flex;
    align-items: center;
    gap: .25em; }
  #header_section .logo_container {
    display: none; }
  #header_section .phone_number :hover {
    cursor: pointer; }

@media only screen and (min-width: 1400px) {
  #header_section .logo_container {
    display: block; } }

#footer_section {
  display: flex;
  flex-flow: column; }
  #footer_section img {
    width: 2em; }
  #footer_section #upwork, #footer_section #linkedin {
    width: 5em; }
  #footer_section .img_text_ctnr {
    display: flex;
    flex-flow: column;
    gap: .25em; }
    #footer_section .img_text_ctnr p {
      font-family: "Montserrat", sans-serif;
      font-weight: 400;
      display: none; }
  #footer_section .links_ctnr {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-flow: wrap;
    gap: 2em;
    padding: 1em;
    background: #111; }
  #footer_section .nav_ctnr {
    display: none;
    background-color: #000;
    padding: 1em; }
    #footer_section .nav_ctnr h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #FFA759;
      font-weight: 600;
      text-align: center;
      margin-bottom: 1em; }
    #footer_section .nav_ctnr ul {
      display: flex;
      flex-flow: column;
      align-items: center;
      gap: 1em; }
      #footer_section .nav_ctnr ul li {
        font-family: "Montserrat", sans-serif;
        font-weight: 300;
        letter-spacing: .9px;
        color: #fff;
        font-weight: 600;
        text-decoration: underline; }
      #footer_section .nav_ctnr ul li:hover {
        text-decoration: none; }

@media only screen and (min-width: 767px) {
  #footer_section {
    font-size: 1.1em; } }

@media only screen and (min-width: 1400px) {
  #footer_section {
    font-size: 1.2em; } }

#hidden_section {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 300;
  transition: 1s;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  filter: blur(400px);
  opacity: 0;
  display: none; }
  #hidden_section .modal_ctnr {
    display: flex;
    background: rgba(17, 17, 17, 0.9);
    width: 80%;
    max-width: 40em;
    height: 70%;
    border-radius: 20px;
    position: relative;
    z-index: 100; }
    #hidden_section .modal_ctnr nav {
      width: 100%;
      height: 100%; }
    #hidden_section .modal_ctnr ul {
      display: flex;
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;
      margin-top: 2em;
      gap: 2em;
      height: 100%; }
    #hidden_section .modal_ctnr li {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px; }
    #hidden_section .modal_ctnr img {
      width: 2em; }
  #hidden_section .glass_back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99;
    filter: blur(100px); }

#hero_section {
  height: 90vh;
  overflow: hidden;
  position: relative; }
  #hero_section .hero_ctnr {
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    display: flex;
    flex-flow: column;
    height: 100%;
    position: absolute;
    justify-content: center;
    width: 100%;
    z-index: 100; }
    #hero_section .hero_ctnr .icon_container {
      border-radius: 1em;
      border: 4px solid #fff;
      padding: .5em; }
      #hero_section .hero_ctnr .icon_container i {
        color: white;
        font-size: 4em; }
    #hero_section .hero_ctnr h1 {
      animation: pulsate 2.5s infinite alternate;
      border-radius: 2em;
      text-shadow: 0 0 0.4em var(--primary), 0 0 0.1em var(--primary), 0 0 0.82em var(--primary);
      text-align: center;
      font-size: 4em; }
    #hero_section .hero_ctnr h2 {
      font-size: 1.5em;
      text-align: center; }
    #hero_section .hero_ctnr button {
      margin-top: 1em; }
  #hero_section .text_ctnr {
    display: contents; }
  #hero_section #night_ctnr {
    position: relative;
    z-index: 97;
    filter: blur(50px);
    opacity: .8; }
  #hero_section #globe_canvas {
    outline: none;
    mix-blend-mode: exclusion;
    width: 100%;
    height: 100vh; }
  #hero_section .controls_ctnr {
    display: none; }

@media only screen and (min-width: 767px) {
  #hero_section {
    font-size: 1.6em; }
    #hero_section .hero_ctnr {
      pointer-events: none; } }

@media only screen and (min-width: 1400px) {
  #hero_section {
    height: 90vh;
    font-size: 2em; }
    #hero_section .hero_ctnr {
      justify-content: flex-end;
      height: 85%; }
    #hero_section #mountain {
      bottom: -100px; }
    #hero_section .controls_ctnr {
      display: flex;
      flex-flow: column;
      gap: 1em;
      width: 8em;
      margin-top: 2em;
      background: #000;
      border: 4px solid #222;
      border-radius: .25em;
      padding: 1em;
      opacity: .6; }
      #hero_section .controls_ctnr p {
        font-family: "Montserrat", sans-serif;
        font-weight: 400;
        text-align: center;
        font-size: .6em;
        user-select: none; }
      #hero_section .controls_ctnr .controls {
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 1em;
        margin-top: 1em; }
        #hero_section .controls_ctnr .controls p {
          background-color: #222;
          padding: .5em;
          border-radius: 50%; }
      #hero_section .controls_ctnr .control_set {
        display: none;
        gap: .5em; }
      #hero_section .controls_ctnr .control_button {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center; }
        #hero_section .controls_ctnr .control_button small {
          font-family: "Montserrat", sans-serif;
          font-weight: 700;
          letter-spacing: 1.5px;
          font-size: .4em; }
      #hero_section .controls_ctnr .control_button:hover {
        cursor: pointer; } }

#story_section {
  align-items: center;
  background: radial-gradient(#111, #000);
  display: flex;
  flex-flow: column;
  filter: grayscale(100%);
  gap: 2em;
  text-align: center;
  padding: 1em;
  transition: 3s; }
  #story_section .inksplat {
    display: none; }
  #story_section .me_picture {
    width: 20em;
    background-color: #000;
    padding: .5em;
    border-radius: 20px; }
  #story_section .text_ctnr p {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    width: 75%;
    margin: 0 auto;
    line-height: 1.2em;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 30em; }
  #story_section .text_ctnr span {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    letter-spacing: .9px;
    color: #FFA759;
    border-bottom: 2px solid #FFA759; }

@media only screen and (min-width: 767px) {
  #story_section {
    font-size: 1.2em; } }

@media only screen and (min-width: 1400px) {
  #story_section {
    gap: 1em;
    position: relative;
    overflow: hidden; }
    #story_section * {
      position: relative;
      z-index: 100; }
    #story_section .me_picture {
      width: 22em; }
    #story_section .inksplat {
      display: block;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%; } }

#about_section {
  width: 70vw;
  height: 100vh; }

#contact_modal_section {
  background-color: rgba(0, 0, 0, 0.7);
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 4000;
  justify-content: center;
  align-items: center;
  display: none;
  opacity: 0;
  filter: blur(400px); }
  #contact_modal_section .modal_ctnr {
    position: relative;
    width: 80%;
    padding: 1em;
    height: 60%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
    border-radius: 10px;
    max-width: 30em; }
  #contact_modal_section .glass_back {
    background-color: rgba(255, 255, 255, 0.2);
    filter: blur(70px);
    position: absolute;
    height: 80%;
    width: 80%;
    z-index: 99; }
  #contact_modal_section .form_ctnr {
    display: flex;
    flex-flow: column;
    gap: 1.5em; }
    #contact_modal_section .form_ctnr img {
      width: 1.5em;
      align-self: flex-end;
      mix-blend-mode: color; }
    #contact_modal_section .form_ctnr img:hover {
      cursor: pointer;
      mix-blend-mode: unset;
      transition: 1s; }
  #contact_modal_section .form_group {
    display: flex;
    flex-flow: column;
    gap: .25em; }
    #contact_modal_section .form_group .label_ctnr {
      display: flex;
      gap: .25em;
      align-items: center; }
      #contact_modal_section .form_group .label_ctnr label {
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: #fff; }
      #contact_modal_section .form_group .label_ctnr small {
        font-size: .7em;
        color: #BCBCBC; }
    #contact_modal_section .form_group input,
    #contact_modal_section .form_group textarea {
      font-family: "Montserrat", sans-serif;
      font-weight: 400;
      border: 2px solid transparent;
      border-radius: 2px;
      outline: none;
      max-width: 25em;
      padding: .5em;
      width: 75%; }
    #contact_modal_section .form_group textarea {
      resize: vertical;
      max-height: 10em; }
    #contact_modal_section .form_group input:hover,
    #contact_modal_section .form_group textarea:hover {
      background-color: #BCBCBC;
      border-color: #BCBCBC;
      cursor: pointer;
      transition: .5s; }
    #contact_modal_section .form_group input:focus,
    #contact_modal_section .form_group textarea:focus {
      transition: .5s;
      border-color: #FFA759;
      background-color: #fff; }
    #contact_modal_section .form_group #submit {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      width: max-content; }

#resume_like {
  padding: 2em 0;
  filter: grayscale(100%);
  position: relative; }
  #resume_like h1 {
    text-align: center;
    margin-bottom: .5em; }
  #resume_like hr {
    width: 1em;
    color: #FFA759; }
  #resume_like .background_img {
    width: 15em;
    position: absolute;
    right: 2em;
    display: none; }
  #resume_like .comments_ctnr {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 3em; }
  #resume_like .comment_ctnr {
    text-align: center;
    display: flex;
    flex-flow: column;
    gap: .5em;
    font-size: 1.05em;
    background-color: #111;
    border-radius: 20px;
    padding: 1em;
    max-width: 75%; }
  #resume_like .author {
    width: 80%;
    margin: 0 auto;
    color: #f1f1f1; }
  #resume_like .comment {
    width: 80%;
    max-width: 25em;
    margin: 0 auto;
    font-weight: 500; }
  #resume_like .origin {
    display: contents;
    color: #FFA759; }

@media only screen and (min-width: 1400px) {
  #resume_like .background_img {
    display: block; }
  #resume_like .comments_ctnr {
    flex-flow: row wrap;
    justify-content: center;
    max-width: 50em;
    margin: 2em auto; }
  #resume_like .comment_ctnr {
    align-self: center; }
  #resume_like .comment {
    max-width: 18em; } }

#skills_ctnr {
  padding: 1em;
  position: relative;
  overflow: hidden; }
  #skills_ctnr .skills_bg {
    display: none;
    width: 15em;
    position: absolute;
    left: 0;
    display: none; }
  #skills_ctnr .skill_cards_ctnr {
    margin-top: 3em;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 5em;
    text-align: center;
    overflow: hidden; }
    #skills_ctnr .skill_cards_ctnr .skill_card:first-of-type {
      margin-top: 1em; }
    #skills_ctnr .skill_cards_ctnr .skill_card:last-of-type {
      margin-bottom: 3em; }
  #skills_ctnr h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: center; }

@media only screen and (min-width: 1400px) {
  #skills_ctnr .skill_cards_ctnr {
    flex-flow: row wrap;
    max-width: 80%;
    justify-content: center;
    margin: 2em auto; } }

#neubrutalism_section {
  overflow: hidden; }
  #neubrutalism_section .neu_hero_ctnr {
    display: flex;
    flex-flow: column; }
  #neubrutalism_section .button_like_ctnr {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-top: 2em; }
  #neubrutalism_section .neu_ctnr1 {
    background-color: #4333b3;
    flex: 1;
    padding: 2em 1em;
    position: relative; }
    #neubrutalism_section .neu_ctnr1 h1 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      font-size: 4em;
      color: #FFA759;
      text-align: center;
      position: relative;
      z-index: 10; }
    #neubrutalism_section .neu_ctnr1 span {
      text-shadow: 0 0 20px #000; }
    #neubrutalism_section .neu_ctnr1 .decorative_sqr {
      background-color: #000;
      height: 5em;
      width: 5em;
      position: absolute;
      z-index: 1;
      left: 5em;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    #neubrutalism_section .neu_ctnr1 .icon_bg {
      display: none; }
  #neubrutalism_section .circle_decoration_ctnr {
    display: none; }
    #neubrutalism_section .circle_decoration_ctnr .circle1 {
      width: 5em; }
  #neubrutalism_section .neu_ctnr2 {
    background-color: #b33333;
    flex: 1;
    padding: 2em;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2.5em;
    column-gap: 3em;
    overflow: hidden; }
    #neubrutalism_section .neu_ctnr2 .emoji_icon {
      position: absolute;
      font-size: 4em;
      top: -.5em;
      left: -.5em; }
    #neubrutalism_section .neu_ctnr2 .emoji_icon_alt {
      position: absolute;
      font-size: 4em;
      top: -.5em;
      right: -.5em; }
    #neubrutalism_section .neu_ctnr2 .neu_card {
      border: 4px solid #000;
      width: 15em;
      padding: 2em;
      padding-top: 3em;
      box-shadow: 5px 5px 0 3px #000;
      position: relative; }
      #neubrutalism_section .neu_ctnr2 .neu_card p, #neubrutalism_section .neu_ctnr2 .neu_card li {
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-align: center;
        color: #000; }
      #neubrutalism_section .neu_ctnr2 .neu_card ul {
        list-style: disc; }
    #neubrutalism_section .neu_ctnr2 .first_neu_card {
      transform: rotate(-5deg);
      background: #00ffab;
      left: -100em; }
    #neubrutalism_section .neu_ctnr2 .second_neu_card {
      transform: rotate(5deg);
      right: -100em;
      background: #f3a1ff;
      height: min-content; }
    #neubrutalism_section .neu_ctnr2 .third_neu_card {
      left: -100em;
      transform: rotate(-5deg);
      background: #fffb00; }
  #neubrutalism_section .cta_ctnr {
    background-color: #fff;
    padding: 1em;
    overflow: hidden; }
    #neubrutalism_section .cta_ctnr h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #000; }
    #neubrutalism_section .cta_ctnr h3 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #00ffab;
      font-size: 2em; }
  #neubrutalism_section .cta {
    align-items: center;
    display: flex;
    gap: 2em;
    position: relative;
    width: 500vw; }
  #neubrutalism_section .neu_me_ctnr {
    background: linear-gradient(0deg, #FFA759, #b33333);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 2em;
    position: relative; }
    #neubrutalism_section .neu_me_ctnr .blob_bg {
      position: absolute;
      z-index: 0;
      width: 30em;
      top: -8em; }
    #neubrutalism_section .neu_me_ctnr .nametag {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      font-size: 1em;
      transform: unset;
      width: max-content;
      max-width: unset;
      padding: .5em;
      border-radius: 5px;
      top: -5em;
      position: relative;
      background-color: #222;
      color: #FFA759;
      font-weight: 600; }
    #neubrutalism_section .neu_me_ctnr p {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #000;
      font-size: 2em;
      text-align: center;
      margin: 1em 0;
      max-width: 7em;
      transform: rotate(-5deg); }
    #neubrutalism_section .neu_me_ctnr .barrera_cutout {
      position: relative;
      padding: 2em;
      width: 15em;
      height: 15em;
      border-radius: 50%; }
    #neubrutalism_section .neu_me_ctnr .circle_decoration1 {
      display: none; }
  #neubrutalism_section p {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    letter-spacing: .9px; }

@media only screen and (min-width: 767px) {
  #neubrutalism_section .neu_hero_ctnr {
    flex-flow: row; }
  #neubrutalism_section .neu_ctnr1 .icon_bg {
    position: absolute;
    right: -2em;
    width: 4em;
    background-color: #000;
    top: 0; }
  #neubrutalism_section .neu_me_ctnr {
    background: #000;
    position: relative;
    overflow: hidden; }
    #neubrutalism_section .neu_me_ctnr .barrera_cutout {
      mix-blend-mode: unset; }
    #neubrutalism_section .neu_me_ctnr .circle_decoration {
      animation: shifting_gradient infinite 10s;
      -webkit-animation: shifting_gradient infinite 10s;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      height: 8em;
      position: absolute;
      width: 8em; }
    #neubrutalism_section .neu_me_ctnr .circle_decoration1 {
      background: linear-gradient(45deg, #4333b3, #b33333);
      left: 5vw;
      top: 4em;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      transform: rotate(15deg); }
    #neubrutalism_section .neu_me_ctnr .circle_decoration2 {
      background: linear-gradient(45deg, #b33333, #4333b3);
      right: 5vw;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      transform: rotate(5deg);
      outline: none; }
    #neubrutalism_section .neu_me_ctnr p {
      color: #fff; }
    #neubrutalism_section .neu_me_ctnr .nametag {
      background-color: #222;
      color: #FFA759;
      font-weight: 600; }
  #neubrutalism_section .button_like_ctnr {
    flex-flow: column;
    align-items: center; }
  #neubrutalism_section .circle_decoration_ctnr {
    display: flex;
    justify-content: center;
    margin-top: 2em;
    justify-content: center; }
    #neubrutalism_section .circle_decoration_ctnr .circle_dec {
      border-radius: 50%;
      width: 5em;
      height: 5em;
      transition: background-position 1s;
      background-size: 400%;
      background-position: left; }
    #neubrutalism_section .circle_decoration_ctnr .circle_dec:hover {
      background-position: right; }
    #neubrutalism_section .circle_decoration_ctnr .circle1 {
      background: linear-gradient(45deg, #FFA759, #fffb00);
      position: relative; }
    #neubrutalism_section .circle_decoration_ctnr .circle2 {
      background: linear-gradient(45deg, #b33333, #f3a1ff);
      position: relative;
      top: 1em;
      left: -2em;
      mix-blend-mode: color-dodge; } }

#minimalism_section {
  background-color: #f3f3f3;
  overflow: hidden;
  padding: 3em 0;
  position: relative;
  min-height: 80vh; }
  #minimalism_section .blob_bg {
    position: absolute;
    width: 15em;
    left: 0em;
    right: 0em;
    mix-blend-mode: multiply;
    top: -4em;
    z-index: 10;
    margin: 0 auto;
    filter: blur(100px); }
  #minimalism_section .hero_text_ctnr {
    align-items: center;
    display: flex;
    flex-flow: column;
    gap: 1em;
    position: relative;
    z-index: 9; }
    #minimalism_section .hero_text_ctnr h1 {
      font-size: 4em;
      text-align: center;
      color: #FFA759; }
    #minimalism_section .hero_text_ctnr .description {
      color: #000;
      text-align: center;
      width: 75%; }
    #minimalism_section .hero_text_ctnr span {
      color: #fff;
      font-size: .5em; }
    #minimalism_section .hero_text_ctnr .buttons_ctnr {
      display: flex;
      flex-flow: row;
      gap: 2em;
      justify-content: center;
      margin-top: 2em; }
      #minimalism_section .hero_text_ctnr .buttons_ctnr .button_like {
        box-shadow: 5px 5px 25px 3px #c8c8c8; }
  #minimalism_section .minimal_cards_ctnr {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1em; }
  #minimalism_section .min_card {
    box-shadow: 5px 5px 25px 3px #c8c8c8;
    background-color: #fff;
    border-radius: 10px;
    align-items: center;
    display: flex;
    flex-flow: column;
    gap: 2em;
    justify-content: center;
    height: 12em;
    padding: 1em;
    width: 8em;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    outline: none; }
    #minimalism_section .min_card img {
      width: 2em; }
    #minimalism_section .min_card p {
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      letter-spacing: .9px;
      color: #000;
      text-align: center; }
  #minimalism_section .slider_ctnr {
    align-items: center;
    background: #c8c8c8;
    border-radius: 10px;
    display: flex;
    height: 1em;
    width: 100%;
    justify-content: flex-start;
    cursor: pointer; }
    #minimalism_section .slider_ctnr .slide {
      background-color: #FFA759;
      border-radius: 50%;
      height: 1.5em;
      width: 1.5em;
      transition: 1s;
      position: relative; }

@media only screen and (min-width: 767px) {
  #minimalism_section .hero_text_ctnr {
    gap: 2em; }
    #minimalism_section .hero_text_ctnr .description {
      width: 33%; }
  #minimalism_section .minimal_cards_ctnr {
    gap: 3em; } }

#glassmin_section {
  padding: 2em 0;
  background-attachment: fixed;
  background: linear-gradient(180deg, #efd5ff 0%, #6c73d5 100%);
  background-size: cover; }
  #glassmin_section .desktop_sidepanel {
    display: contents; }
  #glassmin_section h1 {
    text-align: center;
    color: #000;
    font-size: 4em; }
  #glassmin_section .panels_ctnr {
    display: flex;
    flex-flow: column;
    align-items: center;
    height: 100%;
    padding-top: 2em;
    gap: 3em; }
  #glassmin_section .panel {
    width: 75%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1em;
    gap: .5em;
    max-width: 25em;
    opacity: 0;
    transition: 1s ease-in; }
    #glassmin_section .panel h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-align: center;
      color: #000;
      font-size: 1.5em;
      border-bottom: 1px solid #000;
      max-width: min-content; }
    #glassmin_section .panel p {
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      letter-spacing: .9px;
      color: #000;
      font-size: 1em;
      position: relative;
      z-index: 10;
      text-align: center;
      width: 75%;
      font-weight: 400; }
  #glassmin_section .panel1 h3 {
    color: #000;
    font-size: .9em; }
  #glassmin_section .panel1 small {
    color: #000; }
  #glassmin_section .panel1 .button_like {
    font-size: .8em; }
  #glassmin_section .panel1 .profile_img {
    width: 40%;
    border-radius: 50%;
    background: #fff;
    padding: 1em;
    border: 4px solid #000; }
  #glassmin_section .panel1 .profile_ctnr {
    display: flex;
    gap: 1em; }
  #glassmin_section .panel1 .profile_details {
    display: flex;
    flex-flow: column;
    gap: .5em; }
  #glassmin_section .panel2 {
    order: 1; }
    #glassmin_section .panel2 ul {
      margin-top: 2em;
      display: flex;
      flex-flow: column;
      gap: 1em; }
    #glassmin_section .panel2 li {
      color: #000;
      font-weight: 600;
      text-decoration: underline; }
    #glassmin_section .panel2 li:hover {
      cursor: pointer; }
  #glassmin_section .panel3 .postlist_ctnr {
    display: flex;
    flex-flow: column;
    margin: 2em 0;
    gap: 2em;
    width: 100%; }
  #glassmin_section .panel3 .post {
    display: flex;
    flex-flow: column;
    border-radius: 20px;
    padding: 1em;
    align-items: flex-start;
    gap: .5em; }
    #glassmin_section .panel3 .post p {
      width: unset; }
    #glassmin_section .panel3 .post h4 {
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      letter-spacing: .9px;
      font-weight: 600;
      text-decoration: underline;
      margin-bottom: unset;
      font-weight: 400; }
    #glassmin_section .panel3 .post .posted {
      font-size: .8em; }
  #glassmin_section .panel3 .blurb {
    text-align: left;
    font-weight: 400; }
  #glassmin_section .panel3 .tags_ctnr {
    display: flex;
    flex-flow: wrap;
    gap: 1em;
    margin-bottom: .25em;
    width: 70%;
    max-width: 25em; }
    #glassmin_section .panel3 .tags_ctnr p {
      padding: .1em;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
      font-size: .85em; }
  #glassmin_section .panel3 hr {
    border: 2px solid #000;
    width: 100%; }

@media only screen and (min-width: 1400px) {
  #glassmin_section .panels_ctnr {
    flex-flow: row-reverse; }
  #glassmin_section .desktop_sidepanel {
    display: flex;
    flex-flow: column;
    gap: 3em; }
  #glassmin_section .panels_ctnr {
    align-items: flex-start;
    justify-content: center; }
  #glassmin_section .panel2 {
    order: unset; }
  #glassmin_section .panel3 {
    max-width: 50em; } }

#interactive_donut_section {
  background-color: #ddd;
  padding: 2em 1em; }
  #interactive_donut_section h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: center;
    font-size: 2em;
    color: #000; }
  #interactive_donut_section .interactive_panel {
    display: flex;
    flex-flow: column;
    gap: 2em;
    align-items: center;
    margin-top: 2em; }
  #interactive_donut_section #donut_ctnr {
    width: 90%;
    height: 30em;
    max-width: 65em;
    background: #000;
    border-radius: 1em;
    border: 5px solid olivedrab;
    overflow: hidden; }
  #interactive_donut_section #controls_ctnr {
    border: 5px solid olivedrab;
    background: #000;
    display: flex;
    flex-flow: column;
    gap: 2em;
    justify-content: center;
    align-items: center;
    border-radius: 1em;
    padding: 1em; }
    #interactive_donut_section #controls_ctnr .control {
      box-shadow: 0px 5px 15px 3px #343030;
      background: #c8c8c8;
      width: 3em;
      height: 3em;
      border-radius: 1em;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: .5em;
      font-size: .6em; }
      #interactive_donut_section #controls_ctnr .control p {
        font-size: 2em;
        color: #000;
        pointer-events: none; }
    #interactive_donut_section #controls_ctnr .transformer_controls,
    #interactive_donut_section #controls_ctnr .movement_controls,
    #interactive_donut_section #controls_ctnr .zoom_controls {
      display: flex;
      justify-content: center;
      gap: 2em; }
    #interactive_donut_section #controls_ctnr .movement_controls {
      gap: 1em; }
    #interactive_donut_section #controls_ctnr #change_mesh {
      background: red; }
    #interactive_donut_section #controls_ctnr #change_color {
      background: green; }
    #interactive_donut_section #controls_ctnr .changer {
      box-shadow: 0px 5px 15px 3px #343030;
      height: 2em;
      width: 2em;
      border-radius: 50%; }

#experience_section {
  background-color: #111;
  padding: 1em; }
  #experience_section h1 {
    text-align: center; }
  #experience_section .experience_ctnr {
    align-items: center;
    display: flex;
    gap: 3em;
    max-width: 55vw;
    flex-flow: row wrap;
    margin: 0 auto;
    justify-content: center;
    margin-top: 2em; }
  #experience_section .experience {
    padding: 1em;
    width: 10em; }
    #experience_section .experience h3 {
      font-size: 3em;
      margin-bottom: .25em;
      color: #FFA759; }
    #experience_section .experience h3, #experience_section .experience p {
      text-align: center; }
  #experience_section .chart_ctnr {
    display: none;
    justify-content: center;
    margin: 0 auto;
    margin-top: 3em;
    width: 80vw;
    max-width: 50em; }

@media only screen and (min-width: 767px) {
  #experience_section .chart_ctnr {
    display: flex; } }

#titleleap {
  padding: 1em;
  background-color: #fff; }
  #titleleap h1 {
    text-align: center;
    color: #0E3D51; }
  #titleleap .logo_container {
    display: flex;
    justify-content: center; }
  #titleleap .product_summary {
    text-align: center;
    margin-top: 2em;
    display: flex;
    flex-flow: column;
    align-items: center; }
    #titleleap .product_summary p {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      letter-spacing: 1.5px;
      width: 75%;
      margin: 0 auto;
      line-height: 1.2em;
      margin-top: 1em;
      margin-bottom: 1em;
      max-width: 30em;
      color: #0E3D51; }
    #titleleap .product_summary span {
      color: #4a9ea6;
      border-bottom: 2px solid #4a9ea6; }
    #titleleap .product_summary img {
      width: 100%; }
  #titleleap .phone_image {
    width: 90%;
    max-width: 60em;
    display: block; }

#landing_section {
  background-color: #f8f8f8;
  min-height: 80vh;
  padding-bottom: 2em;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  gap: 2em;
  align-items: center; }
  #landing_section .landing_header {
    width: 100%;
    padding: .5em;
    display: flex;
    justify-content: space-between; }
    #landing_section .landing_header b {
      color: #6340ff;
      text-decoration: underline;
      letter-spacing: 0.2em; }
    #landing_section .landing_header h2 {
      color: #111;
      text-align: center; }
  #landing_section .landing_design_container {
    width: 90%;
    height: 30em;
    max-width: 50em;
    position: relative; }
    #landing_section .landing_design_container .stork_container {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 100;
      border-radius: 10px;
      pointer-events: none;
      background: #9178ff;
      background: radial-gradient(circle, #9178ff 0%, #f3edff 20%, #f6f6f6 36%, #f7f7f7 90%, #f8f8f8 100%); }
      #landing_section .landing_design_container .stork_container :hover {
        cursor: grab; }
    #landing_section .landing_design_container .blur_bg {
      display: none; }
  #landing_section .landing_footer {
    display: flex;
    flex-direction: column;
    align-items: center; }
    #landing_section .landing_footer b {
      letter-spacing: 0.3em; }
    #landing_section .landing_footer small {
      color: #111; }
    #landing_section .landing_footer h1 {
      color: #111;
      font-size: 4em; }

@media only screen and (min-width: 767px) {
  #landing_section {
    font-size: 1.6em; }
    #landing_section .landing_header {
      padding: 1em;
      width: 70%; } }

@media only screen and (min-width: 1400px) {
  #landing_section {
    padding-top: 2em; }
    #landing_section .landing_design_container .stork_container {
      pointer-events: initial; } }

#styles_section {
  padding-top: 4em; }

@media only screen and (min-width: 767px) {
  #styles_section {
    padding-top: 5em; } }

@media only screen and (min-width: 1400px) {
  #styles_section {
    padding-top: 0; } }