@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,400&family=Young+Serif&display=swap");
::selection {
  color: rgb(0, 0, 0);
  background: rgb(255, 255, 255);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #ffffff #000000;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: #000000;
}

*::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #000000;
}

@keyframes loader-animation {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
@keyframes background-blob-rotate {
  from {
    rotate: 0deg;
    scale: 0.75 1;
  }
  50% {
    scale: 1.5 1.75;
  }
  to {
    rotate: 360deg;
    scale: 0.75 1;
  }
}
body {
  background-color: black;
  font-family: "Raleway", sans-serif;
  cursor: none;
}

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: #000;
  overflow: hidden;
  cursor: none;
}
#preloader .loader {
  translate: -50% -50%;
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
  animation: loader-animation 2s linear infinite;
}
#preloader .loader::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 1px;
  background: #000;
  border-radius: 50%;
  z-index: 1000;
}
#preloader .loader::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
  border-radius: 50%;
  filter: blur(60px);
  z-index: 1;
}

.outer-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  mix-blend-mode: difference;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.innner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  mix-blend-mode: difference;
  background-color: rgb(255, 255, 255);
  opacity: 1;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 0.2s, height 0.2s;
  z-index: 10000;
}

.cursor-click {
  width: 24px;
  height: 24px;
}

#hero {
  position: relative;
  height: 92%;
  width: 100%;
  min-height: 92vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  overflow: hidden;
}
#hero #blob {
  background-color: white;
  height: 34vmax;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(to top, #76e1ff, #4340e9 45%, #45009e);
  animation: background-blob-rotate 20s infinite;
  opacity: 0.3;
  z-index: -21;
}
#hero #particles {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: -20;
}
#hero #blur {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -19;
  backdrop-filter: blur(12vmax);
}
#hero .hero-container {
  padding: calc(2.5em + 1.8vw);
}
#hero .hero-container h1 {
  font-family: "Young Serif", serif;
  font-size: calc(4rem + 2vw);
  color: rgba(255, 255, 255, 0.25);
}
#hero .hero-container h1 span {
  font-variant: tabular-nums;
  color: rgb(255, 255, 255);
}
#hero .hero-container .meaning {
  color: rgba(255, 255, 255, 0.35);
  font-family: "Raleway", sans-serif;
}
#hero .hero-container .meaning h3 {
  font-size: 2rem;
  font-weight: 500;
}
#hero .hero-container .meaning em {
  display: block;
  font-weight: 400;
  margin: 0 0 1em;
}
#hero .hero-container .meaning p {
  margin: 0;
}
#hero .hero-container .meaning p span.informative {
  text-decoration: underline 1px dotted;
}
#hero .hero-container .meaning p i {
  color: rgba(255, 255, 255, 0.75);
}
#hero .hero-container .meaning p.noun {
  display: inline-block;
  vertical-align: middle;
}
#hero .hero-container .meaning pre {
  display: inline-block;
  margin: 0 0 0 1em;
  vertical-align: middle;
}

header {
  padding: 1em 2em;
  position: sticky;
  top: 10px;
  z-index: 1;
}
header canvas#navBackground {
  position: absolute;
  top: -40%;
  left: 0;
  width: 100% !important;
  height: 10%;
  z-index: -1;
  translate: 0 -50%;
}
header .container {
  background: rgba(0, 0, 0, 0.5);
  padding: 0.4em 1em;
  margin-top: -0.5em;
  border-radius: 0.5em;
  box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.75);
}
header .nav-item {
  z-index: 2;
}
header .underlay {
  position: absolute;
  background: linear-gradient(340deg, rgb(121, 44, 165) 0%, rgb(34, 142, 158) 50%, rgb(32, 55, 148) 100%);
  box-shadow: inset -10px -5px 1em rgba(47, 0, 255, 0.5);
  z-index: 0;
  transition: 0.3s ease left, width, opacity;
  opacity: 1;
  border-radius: 0.25em;
}
header .nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: 700;
  --bs-nav-link-color: rgba(255, 255, 255, 0.85);
  --bs-nav-link-hover-color: rgba(255, 255, 255, 1);
  --bs-nav-link-disabled-color: rgba(255, 255, 255, 0.5);
  position: relative;
}
header .nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: rgba(255, 255, 255, 1);
  --bs-nav-pills-link-active-bg: rgba(132, 0, 255, 0.5);
}
header .nav-link {
  text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.4), 0 0 0.4em rgba(0, 0, 0, 0.2), 0 0 1em rgba(0, 0, 0, 0.1);
  cursor: none;
}

#aboutMe {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#aboutMe .profile-img {
  border-radius: 0.5rem;
  object-fit: cover;
  min-height: 460px;
}
#aboutMe p {
  font-size: 0.8rem;
}

@media (max-width: 575.98px) {
  #hero .hero-container {
    padding: calc(3rem + 1.8vw) calc(1.5em + 1.6vw);
  }
  #hero .hero-container h1 {
    font-size: calc(2.5rem + 2vw);
  }
  #aboutMe {
    padding: 0 2em;
  }
}
svg {
  fill: currentColor;
}

#contactMe {
  background-color: rgb(255, 255, 255);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#contactMe .message-area-dialog form {
  background-color: #111;
  border: 1px solid #343434;
  box-shadow: 0 0.5em 2em 0.25em rgba(128, 128, 128, 0.25);
}
#contactMe .message-area-dialog form button:hover, #contactMe .message-area-dialog form button:focus {
  background-color: #1a1a1a;
}
#contactMe .message-area-dialog form button:active {
  background-color: #272727;
  color: #fafafa;
}
#contactMe .message-area-dialog form i::after {
  color: #111;
}
#contactMe .form {
  text-align: left;
  color: currentColor;
}
#contactMe .form, #contactMe .form .legend, #contactMe .form .fieldset, #contactMe .form label {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
#contactMe .form .legend {
  font-size: 2em;
  font-weight: 500;
  text-align: center;
  margin: 0 0 1em;
}
#contactMe .form .fieldset {
  margin-top: 0.6666666667em;
  cursor: none;
}
#contactMe .form .fieldset:last-of-type {
  margin-bottom: 0.6666666667em;
}
#contactMe .form .fieldset label {
  outline: none;
  cursor: none;
}
#contactMe .form .fieldset label:first-letter {
  text-transform: uppercase;
}
#contactMe .form .fieldset input:not([type=checkbox]) + label, #contactMe .form .fieldset input:not([type=radio]) + label, #contactMe .form .fieldset textarea + label, #contactMe .form .fieldset select + label {
  position: absolute;
  padding: 1em 0.6666666667em;
  width: calc(100% - 1.25em);
  top: 0;
  left: 0;
  opacity: 0.4;
  z-index: 2;
  transition: opacity 0.1s linear, padding 0.2s ease-in, font 0.2s ease-in;
}
#contactMe .form .fieldset input, #contactMe .form .fieldset textarea, #contactMe .form .fieldset select {
  display: block;
  width: 100%;
  padding: 1.5em 0.6666666667em 0.5em 0.6666666667em;
  margin: 0 0 1px 0;
  font: inherit;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: currentColor;
  background-color: rgba(127, 127, 127, 0.2);
  border: 0;
  border-radius: 0.25em;
  cursor: default;
  z-index: 1;
  outline-color: currentColor;
}
#contactMe .form .fieldset input::placeholder, #contactMe .form .fieldset textarea::placeholder, #contactMe .form .fieldset select::placeholder {
  opacity: 0;
  text-indent: 3em;
  transition: opacity 0.1s linear, text-indent 0.2s ease-in;
}
#contactMe .form .fieldset input:focus, #contactMe .form .fieldset input:active, #contactMe .form .fieldset input.active, #contactMe .form .fieldset textarea:focus, #contactMe .form .fieldset textarea:active, #contactMe .form .fieldset textarea.active, #contactMe .form .fieldset select:focus, #contactMe .form .fieldset select:active, #contactMe .form .fieldset select.active {
  cursor: text;
}
#contactMe .form .fieldset input:focus::placeholder, #contactMe .form .fieldset input:active::placeholder, #contactMe .form .fieldset input.active::placeholder, #contactMe .form .fieldset textarea:focus::placeholder, #contactMe .form .fieldset textarea:active::placeholder, #contactMe .form .fieldset textarea.active::placeholder, #contactMe .form .fieldset select:focus::placeholder, #contactMe .form .fieldset select:active::placeholder, #contactMe .form .fieldset select.active::placeholder {
  opacity: 0.5;
  text-indent: 0;
}
#contactMe .form .fieldset input:focus + label, #contactMe .form .fieldset input:active + label, #contactMe .form .fieldset input.active + label, #contactMe .form .fieldset textarea:focus + label, #contactMe .form .fieldset textarea:active + label, #contactMe .form .fieldset textarea.active + label, #contactMe .form .fieldset select:focus + label, #contactMe .form .fieldset select:active + label, #contactMe .form .fieldset select.active + label {
  background-color: inherit;
  padding: 0.4em 0.8em;
  font-size: 0.75em;
  opacity: 1;
}
#contactMe .form .fieldset input:focus + label::after, #contactMe .form .fieldset input:active + label::after, #contactMe .form .fieldset input.active + label::after, #contactMe .form .fieldset textarea:focus + label::after, #contactMe .form .fieldset textarea:active + label::after, #contactMe .form .fieldset textarea.active + label::after, #contactMe .form .fieldset select:focus + label::after, #contactMe .form .fieldset select:active + label::after, #contactMe .form .fieldset select.active + label::after {
  content: ":";
}
#contactMe .form .fieldset input:valid + label, #contactMe .form .fieldset textarea:valid + label, #contactMe .form .fieldset select:valid + label {
  background-color: inherit;
  padding: 0.4em 0.8em;
  font-size: 0.75em;
}
#contactMe .form .fieldset input:valid + label::after, #contactMe .form .fieldset textarea:valid + label::after, #contactMe .form .fieldset select:valid + label::after {
  content: ":";
}
#contactMe .form .fieldset input:not(:placeholder-shown) + label, #contactMe .form .fieldset textarea:not(:placeholder-shown) + label, #contactMe .form .fieldset select:not(:placeholder-shown) + label {
  background-color: inherit;
  padding: 0.4em 0.8em;
  font-size: 0.75em;
}
#contactMe .form .fieldset input:not(:placeholder-shown) + label::after, #contactMe .form .fieldset textarea:not(:placeholder-shown) + label::after, #contactMe .form .fieldset select:not(:placeholder-shown) + label::after {
  content: ":";
}
#contactMe .form .fieldset input:not(:-ms-input-placeholder) + label, #contactMe .form .fieldset textarea:not(:-ms-input-placeholder) + label, #contactMe .form .fieldset select:not(:-ms-input-placeholder) + label {
  background-color: inherit;
  padding: 0.4em 0.8em;
  font-size: 0.75em;
}
#contactMe .form .fieldset input:not(:-ms-input-placeholder) + label::after, #contactMe .form .fieldset textarea:not(:-ms-input-placeholder) + label::after, #contactMe .form .fieldset select:not(:-ms-input-placeholder) + label::after {
  content: ":";
}
#contactMe .form .fieldset input:not(:-moz-placeholder) + label, #contactMe .form .fieldset textarea:not(:-moz-placeholder) + label, #contactMe .form .fieldset select:not(:-moz-placeholder) + label {
  background-color: inherit;
  padding: 0.4em 0.8em;
  font-size: 0.75em;
}
#contactMe .form .fieldset input:not(:-moz-placeholder) + label::after, #contactMe .form .fieldset textarea:not(:-moz-placeholder) + label::after, #contactMe .form .fieldset select:not(:-moz-placeholder) + label::after {
  content: ":";
}
#contactMe .form .fieldset input, #contactMe .form .fieldset select {
  width: 100%;
  padding-right: 3em;
}
#contactMe .form .fieldset textarea {
  border-top: 1.5em solid transparent;
  padding-top: 0;
  min-height: 6em;
  height: 6em;
  resize: vertical;
  overflow-y: auto;
}
#contactMe .form .verify {
  display: none;
}
#contactMe .form .checkbox {
  position: relative;
}
#contactMe .form .checkbox input[type=checkbox] {
  appearance: none;
  position: absolute;
  top: calc(50% - 0.75em);
  left: 0;
  height: 1.5em;
  width: 1.5em;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: 0;
}
#contactMe .form .checkbox input[type=checkbox] + label {
  width: inherit;
  position: inherit;
  padding: inherit;
  font-size: inherit;
}
#contactMe .form .checkbox input[type=checkbox] + label::after {
  content: unset;
}
#contactMe .form .checkbox input[type=checkbox]:focus + label::before, #contactMe .form .checkbox input[type=checkbox]:active + label::before {
  outline: 1px currentColor !important;
}
#contactMe .form .checkbox input[type=checkbox]:checked + label::after {
  content: "";
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
#contactMe .form .checkbox label {
  position: relative;
  width: calc(100% - 2.5em) !important;
  line-height: 1.5;
  padding-left: 2.5em !important;
  z-index: 2;
}
#contactMe .form .checkbox label::before, #contactMe .form .checkbox label::after {
  content: "" !important;
  position: absolute;
  transform-origin: center center;
  opacity: 1;
  z-index: 3;
}
#contactMe .form .checkbox label::before {
  top: calc(50% - 0.75em);
  left: 0;
  height: 1.5em;
  width: 1.5em;
  border-radius: 0.25em;
  background-color: rgba(127, 127, 127, 0.25);
}
#contactMe .form .checkbox label::after {
  top: calc(50% - 0.625em);
  left: 0.5em;
  height: 1em;
  width: 0.5em;
  transform: rotate(45deg) scale(0.5);
  border: 0 solid currentColor;
  border-width: 0 0.2em 0.2em 0;
  opacity: 0;
  transition: opacity 0.15s linear, transform 0.15s ease-in;
}
#contactMe .form > button {
  cursor: none;
  width: 100%;
  padding: 1em 0.6666666667em;
  float: none;
  overflow: hidden;
  font-weight: bolder;
  text-transform: capitalize;
  text-overflow: ellipsis;
  border: 0;
  border-radius: 0.25em;
}
#contactMe .form > button[type=submit] {
  display: block;
}
#contactMe .form > button[type=reset] {
  display: none;
}
#contactMe .form > button:not(:last-of-type) {
  margin-bottom: 0.5em;
}
#contactMe .message-area {
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-touch-action: none;
  touch-action: none;
}
#contactMe .message-area textarea {
  min-height: 8em !important;
  max-height: 50vh;
  resize: vertical;
  overflow-y: auto;
  z-index: 1;
}
#contactMe .message-area textarea:first-letter, #contactMe .message-area textarea::first-letter {
  text-transform: uppercase;
}
#contactMe .message-area textarea::placeholder {
  font: inherit;
}
#contactMe .message-area-dialog {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: none;
  width: 100%;
  font-size: 0.75em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s linear;
  backdrop-filter: blur(3px);
  z-index: 1900;
  -ms-touch-action: none;
  touch-action: none;
}
#contactMe .message-area-dialog[open] {
  display: inline-block;
}
#contactMe .message-area-dialog.fade {
  opacity: 1;
  visibility: visible;
}
#contactMe .message-area-dialog form {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(70% - 2em);
  display: inline-block;
  overflow: hidden;
  padding: 1em 1em 0 1em;
  margin: 0;
  border: 1px solid #cdcdcd;
  border-radius: 0.25em;
  text-align: center;
  transform: translate(-50%, -50%);
  background-color: #FFF;
  box-shadow: 0 0.5em 2em 0.25em rgba(128, 128, 128, 0.25);
}
#contactMe .message-area-dialog form i {
  position: relative;
  font-style: normal;
  display: block;
  text-align: left;
  text-indent: 2.5em;
  line-height: 1.75;
  word-break: break-word;
  word-wrap: normal;
  margin: 0.5em 0.5em 1.5em 0.5em;
  padding: 0;
}
#contactMe .message-area-dialog form i::before, #contactMe .message-area-dialog form i::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1em;
  height: 0.15em;
  text-align: center;
  transform: rotate(-45deg);
  background-color: inherit;
}
#contactMe .message-area-dialog form i::before {
  width: 0;
  height: 0;
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-top: 1.35em solid currentColor;
  background: transparent;
  transform: rotate(180deg);
}
#contactMe .message-area-dialog form i::after {
  content: "!";
  left: -1.9em;
  top: 0.05em;
  transform: none;
  font-weight: 900;
  color: #FFF;
  background: none;
}
#contactMe .message-area-dialog form button {
  background: none;
  width: calc(50% + 1em);
  border-radius: 0;
  border: 0;
  border-top: 1px solid transparent;
  border-color: inherit;
  padding: 0.5em 0;
  margin: 0;
  line-height: 2em;
  outline: 0;
  color: currentColor;
  cursor: pointer;
  opacity: 1;
}
#contactMe .message-area-dialog form button:hover, #contactMe .message-area-dialog form button:focus {
  background-color: #e6e6e6;
}
#contactMe .message-area-dialog form button:active {
  background-color: #b3b3b3;
  color: #FFF;
}
#contactMe .message-area-dialog form button:first-letter {
  text-transform: uppercase;
}
#contactMe .message-area-dialog form button[type=button] {
  font-weight: 600;
}
#contactMe .message-area-dialog form button:not(:first-of-type) {
  border-left: 1px solid transparent;
  border-color: inherit;
}
#contactMe .message-area-dialog form button:first-of-type {
  float: left;
  margin-left: -1em;
}
#contactMe .message-area-dialog form button:last-of-type {
  float: right;
  margin-right: -1em;
}
#contactMe .message-area-dialog form button:only-of-type {
  float: none;
  width: calc(100% + 2em);
}
#contactMe .message-area-listing {
  position: relative;
  font: inherit;
  border: 0;
  margin: 0.5em 0 0 0;
  padding: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}
#contactMe .message-area-listing[data-state] {
  cursor: default;
}
#contactMe .message-area-listing[data-state] a {
  pointer-events: none;
  opacity: 0.15;
  filter: blur(2px);
}
#contactMe .message-area-listing[data-state=rename] .rename {
  width: calc(100% - 3em) !important;
  left: 3em;
  right: auto;
  text-indent: -200% !important;
  padding: 0 4em 0 2em;
  text-align: left;
  opacity: 1;
}
#contactMe .message-area-listing[data-state=rename] .rename i {
  display: block;
  cursor: text;
}
#contactMe .message-area-listing[data-state=rename] button:not(.rename) svg path:first-child {
  display: none;
}
#contactMe .message-area-listing[data-state=rename] button:not(.rename) svg path:last-child {
  display: block;
}
#contactMe .message-area-listing[data-state=upload] .rename, #contactMe .message-area-listing[data-state=send] .rename, #contactMe .message-area-listing[data-state=sent] .rename {
  display: none !important;
}
#contactMe .message-area-listing[data-state=upload] .upload, #contactMe .message-area-listing[data-state=send] .upload, #contactMe .message-area-listing[data-state=sent] .upload {
  opacity: 1;
  right: 0;
}
#contactMe .message-area-listing[data-state=upload] .delete svg path:first-child, #contactMe .message-area-listing[data-state=send] .delete svg path:first-child, #contactMe .message-area-listing[data-state=sent] .delete svg path:first-child {
  display: none;
}
#contactMe .message-area-listing[data-state=upload] .delete svg path:last-child, #contactMe .message-area-listing[data-state=send] .delete svg path:last-child, #contactMe .message-area-listing[data-state=sent] .delete svg path:last-child {
  display: block;
}
#contactMe .message-area-listing[data-state=upload] {
  cursor: wait;
}
#contactMe .message-area-listing[data-state=upload] .upload {
  text-indent: -200% !important;
  cursor: wait;
}
#contactMe .message-area-listing[data-state=upload] .upload output {
  display: block;
}
#contactMe .message-area-listing[data-state=delete] .upload {
  right: 2em;
}
#contactMe .message-area-listing[data-state=delete] .rename {
  right: 0;
}
#contactMe .message-area-listing[data-state=delete] .delete {
  opacity: 1;
  text-indent: -2em !important;
}
#contactMe .message-area-listing[data-state=delete] .delete svg {
  right: auto;
  left: 0.5em;
}
#contactMe .message-area-listing[data-state=delete] button:not(.delete) svg path:first-child {
  display: none;
}
#contactMe .message-area-listing[data-state=delete] button:not(.delete) svg path:last-child {
  display: block;
}
#contactMe .message-area-listing a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 9.5em);
  padding: 0.5em 0.5em 0.5em 3em;
  color: currentColor;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.5;
  z-index: 1;
  outline: 0;
  transition: opacity 0.15s linear;
}
#contactMe .message-area-listing a:hover, #contactMe .message-area-listing a:focus {
  opacity: 1;
}
#contactMe .message-area-listing a svg, #contactMe .message-area-listing a img {
  position: absolute;
  left: 0;
  top: 0.5em;
}
#contactMe .message-area-listing a i {
  display: block;
  font-style: normal;
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.25;
}
#contactMe .message-area-listing svg, #contactMe .message-area-listing img {
  margin: 0;
  width: 2em;
  height: 2em;
  object-fit: contain;
}
#contactMe .message-area-listing svg {
  fill: currentColor;
}
#contactMe .message-area-listing figure {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 6em);
  height: 3em;
  padding: 0;
  margin: 0;
  background-color: transparent;
  z-index: 0;
}
#contactMe .message-area-listing button {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  visibility: visible;
}
#contactMe .message-area-listing button:hover, #contactMe .message-area-listing button[aria-expanded=true] {
  background-color: rgba(127, 127, 127, 0.5);
}
#contactMe .message-area-listing button[aria-expanded=true] {
  width: 10em !important;
  border-radius: 1em !important;
  text-indent: 0 !important;
  z-index: 2 !important;
  overflow: hidden;
  cursor: default;
}
#contactMe .message-area-listing button.upload {
  right: 2em;
}
#contactMe .message-area-listing button.rename {
  right: 4em;
}
#contactMe .message-area-listing button svg path:last-child:not(:only-child) {
  display: none;
}
#contactMe .message-area-listing button i, #contactMe .message-area-listing button output {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: none;
  white-space: nowrap;
  outline: 0;
}
#contactMe .message-area-listing button i {
  overflow: hidden;
  width: calc(100% - 6em);
  text-overflow: ellipsis;
  font-style: normal;
  line-height: 2;
  margin: 0 4em 0 0;
  padding: 0 0 0 2em;
  text-indent: 0 !important;
  -webkit-touch-callout: all;
  user-select: all;
}
#contactMe .message-area-listing button output {
  --progress: 0;
  width: 100%;
  text-indent: 0;
  text-align: center;
  line-height: 2.75;
  font-size: 0.75em;
  z-index: -1;
}
#contactMe .message-area-listing button output::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  width: calc(var(--progress) * 1%);
  background-color: rgba(127, 127, 127, 0.75);
  transition: width 0.15s ease-in;
  z-index: -1;
}
#contactMe .message-area label {
  z-index: 2;
}
#contactMe .message-area button, #contactMe .message-area-listing button {
  cursor: none;
  position: relative;
  display: inline-block;
  overflow: visible;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font: inherit;
  color: currentColor;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  opacity: 0.5;
  z-index: 3;
}
#contactMe .message-area button:hover, #contactMe .message-area button:focus, #contactMe .message-area button:active, #contactMe .message-area button:focus-within, #contactMe .message-area-listing button:hover, #contactMe .message-area-listing button:focus, #contactMe .message-area-listing button:active, #contactMe .message-area-listing button:focus-within {
  opacity: 1 !important;
}
#contactMe .message-area button::before, #contactMe .message-area button::after, #contactMe .message-area-listing button::before, #contactMe .message-area-listing button::after {
  position: absolute;
  left: 0;
  top: 0;
  color: currentColor;
  background: none;
  width: 100%;
  text-align: center;
  text-transform: capitalize;
  text-indent: 0;
}
#contactMe .message-area button.back, #contactMe .message-area button.rename, #contactMe .message-area button.upload, #contactMe .message-area button.delete, #contactMe .message-area-listing button.back, #contactMe .message-area-listing button.rename, #contactMe .message-area-listing button.upload, #contactMe .message-area-listing button.delete {
  position: absolute;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  color: inherit;
  text-indent: -9999rem;
  z-index: 4;
  transition: opacity 0.15s linear, background 0.15s linear;
}
#contactMe .message-area button.back svg, #contactMe .message-area button.rename svg, #contactMe .message-area button.upload svg, #contactMe .message-area button.delete svg, #contactMe .message-area-listing button.back svg, #contactMe .message-area-listing button.rename svg, #contactMe .message-area-listing button.upload svg, #contactMe .message-area-listing button.delete svg {
  width: 1em;
  height: 1em;
}
#contactMe .message-area button.back svg, #contactMe .message-area-listing button.back svg {
  transform: rotate(-90deg);
}
#contactMe .message-area button.ready svg path:first-child, #contactMe .message-area button.recording svg path:first-child, #contactMe .message-area-listing button.ready svg path:first-child, #contactMe .message-area-listing button.recording svg path:first-child {
  display: inline-block;
}
#contactMe .message-area button.ready svg path:not(:first-child), #contactMe .message-area button.recording svg path:not(:first-child), #contactMe .message-area-listing button.ready svg path:not(:first-child), #contactMe .message-area-listing button.recording svg path:not(:first-child) {
  display: none;
}
#contactMe .message-area button.recording, #contactMe .message-area-listing button.recording {
  --peak: 0;
  background-color: red !important;
  box-shadow: 0 0 0 calc(var(--peak) * 0.075em) rgba(255, 0, 0, calc(var(--peak) * 0.05));
}
#contactMe .message-area button.recording::before, #contactMe .message-area button.play::before, #contactMe .message-area button.pause::before, #contactMe .message-area-listing button.recording::before, #contactMe .message-area-listing button.play::before, #contactMe .message-area-listing button.pause::before {
  content: attr(data-time);
  top: -1.75em;
}
#contactMe .message-area button.play svg path:first-child, #contactMe .message-area button.pause svg path:first-child, #contactMe .message-area-listing button.play svg path:first-child, #contactMe .message-area-listing button.pause svg path:first-child {
  display: none;
}
#contactMe .message-area button.play svg path:nth-child(2), #contactMe .message-area-listing button.play svg path:nth-child(2) {
  display: inline-block;
}
#contactMe .message-area button.play svg path:nth-child(3), #contactMe .message-area-listing button.play svg path:nth-child(3) {
  display: none !important;
}
#contactMe .message-area button.pause svg path:nth-child(2), #contactMe .message-area-listing button.pause svg path:nth-child(2) {
  display: none !important;
}
#contactMe .message-area button.pause svg path:nth-child(3), #contactMe .message-area-listing button.pause svg path:nth-child(3) {
  display: inline-block;
}
#contactMe .message-area button svg, #contactMe .message-area-listing button svg {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  fill: currentColor;
  width: 2em;
  height: 2em;
  vertical-align: middle;
}
#contactMe .message-area button svg svg path:first-child, #contactMe .message-area-listing button svg svg path:first-child {
  display: inline-block;
}
#contactMe .message-area button svg svg path:last-child, #contactMe .message-area-listing button svg svg path:last-child {
  display: none;
}
#contactMe .message-area nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  overflow: hidden;
  width: calc(100% - 1em);
  height: calc(100% - 0.5em);
  margin: 0;
  padding: 0.5em 0.5em 0 0.5em;
  text-align: center;
  white-space: nowrap;
  outline: none;
  z-index: 3;
}
#contactMe .message-area nav [type=file], #contactMe .message-area nav audio {
  display: none;
  visibility: hidden;
}
#contactMe .message-area nav > button {
  top: calc(50% - 1em);
  visibility: hidden;
  opacity: 0;
}
#contactMe .message-area nav > button:nth-of-type(2n) {
  margin: 0 10%;
}
#contactMe .message-area nav > button:last-of-type {
  margin: 0;
}
#contactMe .message-area nav > button:nth-of-type(1) {
  transform: scale(1) translateX(-100%);
}
#contactMe .message-area nav > button:nth-of-type(3) {
  transform: scale(1) translateX(100%);
}
#contactMe .message-area nav ~ .close, #contactMe .message-area nav ~ .back {
  right: 0.25em;
  top: 0.25em;
  visibility: hidden;
  opacity: 0;
}
#contactMe .message-area nav.select > button {
  visibility: visible;
  opacity: 0.5;
  transform: scale(1) translateX(0);
}
#contactMe .message-area nav.selected ~ .close, #contactMe .message-area nav.selected ~ .back {
  visibility: visible;
  opacity: 0.5;
}
#contactMe .message-area nav.selected > button {
  visibility: hidden;
  opacity: 0;
}
#contactMe .message-area nav.selected > button:nth-of-type(1) {
  transform: scale(1) translateX(0);
}
#contactMe .message-area nav.selected > button:nth-of-type(3) {
  transform: scale(1) translateX(0);
}
#contactMe .message-area nav.selected.type {
  pointer-events: none;
}
#contactMe .message-area nav.selected.type > button:not(:nth-of-type(1)) {
  transform: scale(1) translateX(100%);
}
#contactMe .message-area nav.selected.type ~ textarea::placeholder {
  text-align: left;
}
#contactMe .message-area nav.selected.speak > button:nth-of-type(1) {
  transform: scale(1) translateX(-100%);
}
#contactMe .message-area nav.selected.speak > button:nth-of-type(3) {
  transform: scale(1) translateX(100%);
}
#contactMe .message-area nav.selected.speak > button:nth-of-type(2) {
  visibility: visible;
  opacity: 1;
  transform: scale(1.25);
  background-color: rgba(127, 127, 127, 0.5);
}
#contactMe .message-area nav.selected.upload > button:not(:nth-of-type(3)) {
  transform: scale(1) translateX(-100%);
}
#contactMe .message-area nav.selected.upload > button:nth-of-type(3) {
  margin-left: calc(-20% + 1em);
  transform: scale(1.25) translateX(-100%);
  visibility: visible;
  opacity: 1;
  background-color: rgba(127, 127, 127, 0.5);
}
#contactMe .message-area nav.selected.playback .toolbar {
  opacity: 1;
  visibility: visible;
}
#contactMe .message-area nav.selected.playback .seekbar {
  opacity: 1;
  visibility: visible;
}
#contactMe .message-area nav .visualizer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
}
#contactMe .message-area nav .toolbar {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: calc(50% - 0.65em);
  bottom: 0;
  width: calc(100% - 1em);
}
#contactMe .message-area nav .toolbar button {
  opacity: 0.5;
  visibility: visible;
  transform: scale(0.75) !important;
  float: none;
}
#contactMe .message-area nav .toolbar button::after {
  font-size: 0.85em;
}
#contactMe .message-area nav .toolbar button:first-child {
  margin-right: 33%;
}
#contactMe .message-area nav .toolbar button:last-child {
  margin-left: 33%;
}
#contactMe .message-area nav .seekbar {
  --position: 0;
  position: absolute;
  bottom: 0.9em;
  left: 0;
  width: 100%;
  height: 1em;
  font-size: 0.6em;
  transition: opacity 0.25s linear;
}
#contactMe .message-area nav .seekbar:hover i::before {
  opacity: 1;
}
#contactMe .message-area nav .seekbar::before, #contactMe .message-area nav .seekbar::after {
  position: absolute;
}
#contactMe .message-area nav .seekbar::before {
  content: attr(data-start);
  left: 0;
}
#contactMe .message-area nav .seekbar::after {
  content: attr(data-end);
  right: 0;
}
#contactMe .message-area nav .seekbar i {
  width: calc(100% - 10em);
  position: relative;
  display: inline-block;
  font-style: normal;
  text-indent: -9999rem;
  cursor: pointer;
}
#contactMe .message-area nav .seekbar i::before, #contactMe .message-area nav .seekbar i::after {
  content: "";
  top: 25%;
  left: 0;
  position: absolute;
  display: block;
  height: 50%;
  width: 100%;
  background-color: currentColor;
  opacity: 0.15;
}
#contactMe .message-area nav .seekbar i::before {
  width: calc(100% * var(--position));
  opacity: 0.7;
  transition: width 5ms ease-in-out;
}
#contactMe .message-area nav button {
  float: none;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  transform: scale(1);
  transition: transform 0.15s ease-in-out, opacity 0.15s linear, background 0.15s linear;
}
#contactMe .message-area nav button:first-letter {
  text-transform: uppercase;
}
#contactMe .message-area nav button::before, #contactMe .message-area nav button::after {
  font-size: 0.5em;
  transition: opacity 0.15s linear, background 0.15s linear;
}
#contactMe .message-area nav button::before {
  height: 100%;
  border-radius: 50%;
}
#contactMe .message-area nav button::after {
  top: 100%;
  line-height: 2;
  opacity: 0;
}
#contactMe .message-area nav button:hover, #contactMe .message-area nav button:focus, #contactMe .message-area nav button:active {
  transform: scale(1.25);
  background-color: rgba(127, 127, 127, 0.5);
}
#contactMe .message-area nav button:hover::after, #contactMe .message-area nav button:focus::after, #contactMe .message-area nav button:active::after {
  opacity: 1;
  transition: opacity 0.15s linear;
}
#contactMe .message-area nav button:hover::after {
  content: attr(aria-label);
  opacity: 1;
}
#contactMe .message-area nav button:focus::after {
  content: attr(aria-label);
}
#contactMe .message-area nav button:focus:not(:focus-visible)::after {
  content: none;
}
#contactMe .message-area nav button:focus:not(:-moz-focusring)::after {
  content: none;
}/*# sourceMappingURL=main.css.map */