@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {
  --status-color-online: rgb(171, 210, 251);
  --status-color-offline: rgb(244, 179, 203);
  --scale-effect: 1.25;
}

* {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

html, body {
  scroll-behavior: smooth;
  background-color: rgb(24, 24, 24);
}

h1, h2, h3, h4, h5, p {
  margin: 0;
  color: rgb(250, 250, 250);
}

h1, h2, h3, h4 {
  font-family: Plus Jakarta Sans, sans-serif;
  font-weight: 800;
  text-transform: lowercase;
}

h1 {
  font-size: 2rem;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-image: radial-gradient(circle at 100% 90%, rgb(247, 203, 220), rgb(201, 182, 216), rgb(196, 224, 251));
  line-height: 1.3;
}

h2 {
  font-size: 1.75rem;
  line-height: 1;
}

h3, h4 {
  font-size: 1.25rem;
}

h5, li, label {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(133, 133, 133);
}

::-moz-placeholder {
  font-size: 0.75rem;
  color: rgb(82, 81, 81);
}

::placeholder, input, textarea {
  font-size: 0.75rem;
  color: rgb(82, 81, 81);
}

p {
  font-size: 0.75rem;
  color: rgb(250, 250, 250);
}

a {
  text-decoration: none;
  color: rgb(250, 250, 250);
}

a:hover, a:active {
  color: rgb(250, 250, 250);
}

.card {
  border: none;
}

.home-card-icon {
  font-size: 3rem;
}

.fw-semibold {
  font-weight: 600 !important;
}

nav .logo {
  height: 2rem;
}
nav ul {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5rem;
}
nav a {
  font-weight: 600 !important;
}

.nav-highlight {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5rem;
}

.footer i, .footer h5 {
  color: rgb(133, 133, 133) !important;
}

.resume-wrapper {
  border-radius: 1rem;
}

.download-button {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5rem;
  padding: 0.5rem 1rem !important;
  border-style: solid;
  border-color: rgb(82, 81, 81);
}
.download-button h5 {
  color: rgb(250, 250, 250) !important;
}

.section-padding-top {
  padding-top: 3rem;
}

.bento-box {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(5, 3.5rem);
  grid-template-rows: repeat(11, 5rem);
  grid-gap: 1rem;
}

.bento-box h5, .bento-box li, .bento-box label, .bento-bottom h5, .bento-bottom li, .bento-bottom label {
  color: rgb(250, 250, 250) !important;
}
.bento-box .bento-card, .bento-bottom .bento-card {
  background-color: rgb(2, 2, 2);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}
.bento-box .bento-images, .bento-bottom .bento-images {
  position: relative;
  transition: all 0.5s ease-in-out;
}
.bento-box .bento-images .desktop, .bento-box .bento-images .phone, .bento-bottom .bento-images .desktop, .bento-bottom .bento-images .phone {
  border-color: rgb(46, 46, 46);
  border-style: solid;
  border-radius: 0.65rem;
  box-shadow: 0.125rem 0.25rem 0.75rem rgba(133, 133, 133, 0.2);
  border-width: 0.35rem;
}
.bento-box .bento-images .phone, .bento-bottom .bento-images .phone {
  width: 20%;
  position: absolute;
  right: 10%;
  bottom: 0;
}
.bento-box h2, .bento-box h3, .bento-box .home-card-icon, .bento-bottom h2, .bento-bottom h3, .bento-bottom .home-card-icon {
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
.bento-box .home-card-icon, .bento-bottom .home-card-icon {
  background-image: radial-gradient(circle at 100% 90%, rgb(247, 203, 220), rgb(201, 182, 216), rgb(196, 224, 251));
}
.bento-box h2, .bento-bottom h2 {
  background-image: radial-gradient(circle at 100% 90%, rgb(247, 203, 220), rgb(201, 182, 216), rgb(196, 224, 251));
}
.bento-box h3, .bento-bottom h3 {
  background-image: linear-gradient(to right, rgb(171, 210, 251), rgb(244, 179, 203));
}
.bento-box .bento-fun h3, .bento-bottom .bento-fun h3 {
  background-image: linear-gradient(to bottom right, rgb(201, 182, 216), rgb(247, 203, 220), rgb(244, 179, 203)) !important;
}

.header-pink, .header-blue, .cta-color-swap, .icon-color-swap {
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.header-pink {
  background-image: linear-gradient(to bottom right, rgb(201, 182, 216), rgb(247, 203, 220), rgb(244, 179, 203));
}

.header-blue {
  background-image: linear-gradient(to bottom right, rgb(201, 182, 216), rgb(196, 224, 251), rgb(171, 210, 251));
}

.icon-color-swap {
  background-image: linear-gradient(to right, rgb(171, 210, 251), rgb(244, 179, 203)) !important;
}

.cta-color-swap {
  background-image: linear-gradient(to bottom right, rgb(201, 182, 216), rgb(196, 224, 251), rgb(171, 210, 251)) !important;
}

.hover-enlarge {
  transition: transform 0.5s ease;
}

.hover-enlarge:hover {
  transform: scale(0.95);
}

.grid1 .head-text, .grid1 .head-pfp {
  max-width: 42rem;
}
.grid1 h5, .grid1 p {
  padding-top: 0.75rem;
}
.grid1 .profile-pic {
  border-radius: 900rem;
  background-image: radial-gradient(circle at 100% 90%, rgb(247, 203, 220), rgb(201, 182, 216), rgb(196, 224, 251));
  background-position: center;
  background-size: cover;
  transition: background-image 0.5s ease-in-out;
  overflow: hidden;
}
.grid1 .status-circle {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1rem;
  background-color: rgb(171, 210, 251);
}
.grid1 .status-indicator {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5rem;
  padding: 0.5rem 1rem !important;
  border-style: solid;
  border-color: rgb(82, 81, 81);
}
.grid1 .status-indicator.animate {
  transform: scale(var(--scale-effect));
}
.grid1 .status-text {
  padding-top: 0;
  color: rgb(250, 250, 250) !important;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(10deg);
  }
  20%, 40%, 60%, 80%, 100% {
    transform: rotate(-10deg);
  }
}
.grid1 .spin {
  animation: spin 1s ease-in-out;
}

.grid6 {
  grid-column: 1/6;
  grid-row: 1/3;
}
.grid6 .bento-images .gloves {
  position: absolute;
  right: -10%;
  bottom: 7%;
  width: 60%;
}
.grid6 .bento-images .desktop {
  border-width: 0.4rem;
}

.grid2 {
  grid-column: 1/3;
  grid-row: 3/4;
}

.grid3 {
  grid-column: 3/6;
  grid-row: 3/6;
}
.grid3 .flex-wrapper {
  flex: auto;
}
.grid3 .bento-images .desktop {
  border-width: 0.5rem;
  width: 80%;
}
.grid3 .bento-images .phone {
  width: 20%;
}

.grid5 {
  grid-column: 1/3;
  grid-row: 4/6;
}

.grid4 {
  grid-column: 4/6;
  grid-row: 6/10;
}
.grid4 .desktop {
  width: 80%;
}

.grid9 {
  grid-column: 1/3;
  grid-row: 10/12;
}
.grid9 .bento-images img {
  right: 0.6rem;
  top: 0.8rem !important;
}

.grid7 {
  grid-column: 1/4;
  grid-row: 6/8;
}
.grid7 .flex-wrapper {
  flex: auto;
}
.grid7 .desktop {
  width: 45%;
}
.grid7 .offset1, .grid7 .offset2 {
  position: absolute;
}
.grid7 .offset1 {
  left: -23%;
}
.grid7 .offset2 {
  right: -23%;
}

.grid8 {
  grid-column: 1/4;
  grid-row: 8/10;
}
.grid8 .flex-wrapper {
  flex: auto;
}
.grid8 .gloves {
  position: absolute;
  right: -10%;
  width: 60%;
}

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

.bio img, .contact img {
  border-radius: 1rem;
  max-width: 42rem;
}
.bio .bio-text-wrapper, .bio .contact-text, .contact .bio-text-wrapper, .contact .contact-text {
  max-width: 42rem;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-119rem);
  }
}
.slider {
  height: 14.55rem;
  overflow: hidden;
  position: relative;
  margin: auto;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, rgb(24, 24, 24) 0%, rgba(24, 24, 24, 0) 100%);
  content: "";
  height: 14.55rem;
  position: absolute;
  width: 3rem;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 20s linear infinite;
  width: 238rem;
}
.slider .slide {
  margin-right: 3rem;
}
.slider .slide, .slider .img-wrapper {
  width: 11rem;
  height: 11rem;
}
.slider .img-wrapper {
  overflow: hidden;
  border-radius: 2rem;
}

.contact-text .msg-box h5, .contact-text .msg-box li, .contact-text .msg-box input, .contact-text .msg-box textarea, .contact-text .msg-box label {
  color: rgb(250, 250, 250);
}
.contact-text .msg-box #email-done {
  border-radius: 5rem;
  padding: 0.5rem 0.75rem;
  border-style: solid;
  border-color: rgb(82, 81, 81);
  border-width: 2px;
}
.contact-text .msg-box #email-done h5 {
  color: rgb(133, 133, 133) !important;
}
.contact-text .msg-box input[type=text], .contact-text .msg-box textarea {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 0.25rem;
  resize: none;
}
.contact-text .msg-box ::-moz-placeholder {
  padding: 0.5rem;
  padding: 0;
  margin: 0;
}
.contact-text .msg-box ::placeholder {
  padding: 0.5rem;
  padding: 0;
  margin: 0;
}
.contact-text .msg-box .msg-input {
  flex: auto;
}
.contact-text .msg-box button {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5rem;
  padding: 0.5rem 1rem !important;
  border-style: solid;
  border-color: rgb(82, 81, 81);
}

.contact-text .msg-box {
  background-color: rgb(2, 2, 2);
  border-radius: 1rem;
}

.case-head-pic img, .case-head-pic iframe {
  border-color: rgb(46, 46, 46);
  border-style: solid;
  border-width: 1rem;
  border-radius: 2rem;
  max-width: 65rem !important;
}

.case-phone-container {
  max-width: 1140px !important;
}

.float-phone {
  position: absolute;
  width: 25%;
  border-width: 0.65rem !important;
  border-radius: 1.2rem !important;
  right: 0;
  bottom: 0;
  box-shadow: 0.125rem 0.25rem 0.75rem rgba(133, 133, 133, 0.2);
}

video.float-phone {
  width: 20% !important;
  right: 10%;
  bottom: 20%;
}

.polaroid {
  background-color: rgb(250, 250, 250);
  padding: 1rem;
  box-shadow: 0.125rem 0.25rem 0.75rem rgba(133, 133, 133, 0.2);
}
.polaroid img {
  border-color: transparent !important;
  border-radius: 0 !important;
}

.case-text li {
  text-transform: none;
  color: rgb(250, 250, 250);
  font-weight: 400;
}

.case-list h5 {
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-image: linear-gradient(to bottom right, rgb(201, 182, 216), rgb(196, 224, 251), rgb(171, 210, 251));
  font-weight: 800;
}
.case-list p {
  color: rgb(133, 133, 133) !important;
}
.case-list li {
  text-transform: none !important;
}

.case-pics-slider img, .case-pics-slider video {
  border-radius: 0.95rem;
  border-color: rgb(46, 46, 46);
  border-width: 1rem;
  border-style: solid;
}
.case-pics-slider .multi-pic img {
  border-width: 0.5rem !important;
}
.case-pics-slider .multi-pic .float-phone {
  border-radius: 0.8rem !important;
  border-width: 0.4rem !important;
}

.yt-vid {
  aspect-ratio: 16/9;
}

@media only screen and (min-width: 768px) {
  .bento-box {
    grid-template-columns: repeat(7, 6rem);
    grid-template-rows: repeat(7, 6rem);
  }
  .grid1 .profile-pic {
    width: 90% !important;
    height: 90% !important;
  }
  .grid1 .status-indicator {
    padding: 0.5rem 1rem;
  }
  .grid6 {
    grid-column: 1/6;
    grid-row: 1/3;
  }
  .grid6 .bento-images .gloves {
    right: -12%;
    bottom: -10%;
  }
  .grid2 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  .grid3 {
    grid-column: 3/6;
    grid-row: 3/6;
  }
  .grid5 {
    grid-column: 1/3;
    grid-row: 4/6;
  }
  .grid4 {
    grid-column: 6/8;
    grid-row: 1/5;
  }
  .grid9 {
    grid-column: 6/8;
    grid-row: 5/6;
  }
  .grid7 {
    grid-column: 1/4;
    grid-row: 6/8;
  }
  .grid8 {
    grid-column: 4/6;
    grid-row: 6/8;
  }
  .grid10 {
    grid-column: 6/8;
    grid-row: 6/8;
  }
  .slider::before, .slider::after {
    width: 12.75rem;
  }
  .contact-text .msg-box .msg-input {
    height: 7rem;
  }
  .case-head-pic img, .case-head-pic iframe {
    border-width: 1.5rem;
    border-radius: 3rem;
  }
  .float-phone {
    border-width: 1rem !important;
    border-radius: 1.5rem !important;
  }
  video.float-phone {
    bottom: 12%;
  }
  .case-pics-slider .half-pics .float-phone {
    border-width: 0.7rem !important;
    border-radius: 1.5rem !important;
  }
}
@media only screen and (min-width: 992px) {
  h1 {
    font-size: 3.85rem;
  }
  h2 {
    font-size: 2.8rem;
  }
  h3 {
    font-size: 2.5rem;
  }
  h4 {
    font-size: 1.75rem;
  }
  h5, li, label {
    font-size: 1.15rem;
  }
  ::-moz-placeholder {
    font-size: 1.15rem;
  }
  p, ::placeholder, input, textarea {
    font-size: 1.15rem;
  }
  .home-card-icon {
    font-size: 7rem;
  }
  .footer .fa-lg, .contact-head .fa-lg {
    font-size: 2rem;
    line-height: 1.75rem !important;
  }
  .resume-wrapper {
    border-radius: 2rem;
  }
  .section-padding-top {
    padding-top: 5rem;
  }
  .bento-box {
    grid-template-columns: repeat(7, 7.75rem);
    grid-template-rows: repeat(7, 7.75rem);
    grid-gap: 1.25rem;
  }
  .bento-box .bento-card, .bento-bottom .bento-card {
    border-radius: 2rem;
  }
  .bento-box .bento-images .desktop, .bento-box .bento-images .phone, .bento-bottom .bento-images .desktop, .bento-bottom .bento-images .phone {
    border-radius: 1rem;
  }
  .bento-box .bento-images .desktop, .bento-bottom .bento-images .desktop {
    border-width: 0.5rem;
  }
  .bento-box .bento-images .phone, .bento-bottom .bento-images .phone {
    border-width: 0.35rem;
  }
  .grid1 .status-indicator {
    padding: 0.5rem 1rem;
  }
  .grid3 .bento-images .desktop {
    border-width: 0.65rem;
  }
  .grid3 .bento-images .phone {
    width: 18%;
    right: 2rem;
    border-width: 0.45rem;
  }
  .grid6 .bento-images .gloves {
    right: -15%;
    bottom: -17%;
  }
  .grid6 .bento-images .desktop {
    border-width: 0.55rem;
  }
  .bio img, .contact img {
    border-radius: 2rem;
  }
  .slider {
    height: 19rem;
  }
  .slider::before, .slider::after {
    height: 19rem;
  }
  .slider .slide, .slider .img-wrapper {
    width: 14rem;
    height: 14rem;
  }
  .contact-text .msg-box {
    border-radius: 2rem;
  }
  .case-head-pic img, .case-head-pic iframe {
    border-width: 1.75rem;
    border-radius: 4rem;
  }
  .float-phone {
    border-width: 1.25rem !important;
    border-radius: 1.75rem !important;
  }
  video.float-phone {
    bottom: 10%;
  }
  .case-pics-slider img, .case-pics-slider video {
    border-radius: 2rem;
    border-width: 2rem;
  }
  .case-pics-slider .half-pics img {
    border-width: 1.5rem;
  }
  .case-pics-slider .multi-pic img {
    border-width: 1rem;
  }
  .case-pics-slider .multi-pic .float-phone {
    border-width: 0.65rem !important;
    border-radius: 1.25rem !important;
  }
  .case-pics-slider .half-pics .float-phone {
    border-width: 1rem !important;
  }
}
@media only screen and (min-width: 1300px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 3.25rem;
  }
  .bento-box {
    grid-template-columns: repeat(7, 10rem);
    grid-template-rows: repeat(7, 10rem);
    grid-gap: 1.5rem;
  }
}/*# sourceMappingURL=main-20241116.css.map */