/*Theme Rules - background, text, neutral, gradient, highlight*/
.home-theme {
  background-color: #19254b;
  color: white;
}
.home-theme header {
  background: #0c1225;
  background: linear-gradient(180deg, #0c1225 10%, rgba(0, 0, 0, 0) 100%);
}
.home-theme svg .st0 {
  fill: white;
}
.home-theme svg .st1 {
  fill: #28eaea;
}
.home-theme .gradient-border {
  background: #0c1225;
}
.home-theme .gradient-border:not(.hide)::after {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}
.home-theme .auto-type {
  color: #28eaea;
}
.home-theme .auto-type span {
  color: white;
}
.home-theme h4 {
  color: #28eaea;
  font-weight: 500;
}
.home-theme .nav-anim {
  color: #28eaea;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.home-theme .nav-anim.active {
  color: #28eaea;
}
.home-theme .nav-anim::after {
  background: #0b666a;
}
.home-theme a {
  color: #28eaea;
}
.home-theme a:hover {
  filter: brightness(150%);
}
.home-theme #my-heart,
.home-theme .hearts {
  color: #28eaea;
}

.about-theme {
  background-color: #164b60;
  color: white;
}
.about-theme header {
  background: #0c2b37;
  background: linear-gradient(180deg, #0c2b37 10%, rgba(0, 0, 0, 0) 100%);
}
.about-theme svg .st0 {
  fill: white;
}
.about-theme svg .st1 {
  fill: #a2ff86;
}
.about-theme .gradient-border {
  background: #0c2b37;
}
.about-theme .gradient-border:not(.hide)::after {
  background: linear-gradient(60deg, #164b60, #1b6b93, #4fc0d0, #a2ff86);
}
.about-theme .auto-type {
  color: #a2ff86;
}
.about-theme .auto-type span {
  color: white;
}
.about-theme h4 {
  color: #a2ff86;
  font-weight: 500;
}
.about-theme .nav-anim {
  color: #a2ff86;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.about-theme .nav-anim.active {
  color: #28eaea;
}
.about-theme .nav-anim::after {
  background: #1b6b93;
}
.about-theme a {
  color: #a2ff86;
}
.about-theme a:hover {
  filter: brightness(150%);
}
.about-theme #my-heart,
.about-theme .hearts {
  color: #a2ff86;
}

.portfolio-theme {
  background-color: #252a34;
  color: #eaeaea;
}
.portfolio-theme header {
  background: #101216;
  background: linear-gradient(180deg, #101216 10%, rgba(0, 0, 0, 0) 100%);
}
.portfolio-theme svg .st0 {
  fill: #eaeaea;
}
.portfolio-theme svg .st1 {
  fill: #ff2e63;
}
.portfolio-theme .gradient-border {
  background: #101216;
}
.portfolio-theme .gradient-border:not(.hide)::after {
  background: linear-gradient(60deg, #252a34, #08d9d6, #ff2e63);
}
.portfolio-theme .auto-type {
  color: #ff2e63;
}
.portfolio-theme .auto-type span {
  color: #eaeaea;
}
.portfolio-theme h4 {
  color: #ff2e63;
  font-weight: 500;
}
.portfolio-theme .nav-anim {
  color: #ff2e63;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.portfolio-theme .nav-anim.active {
  color: #28eaea;
}
.portfolio-theme .nav-anim::after {
  background: #08d9d6;
}
.portfolio-theme a {
  color: #ff2e63;
}
.portfolio-theme a:hover {
  filter: brightness(150%);
}
.portfolio-theme #my-heart,
.portfolio-theme .hearts {
  color: #ff2e63;
}

.contact-theme {
  background-color: #041c32;
  color: #ecb365;
}
.contact-theme header {
  background: #000203;
  background: linear-gradient(180deg, #000203 10%, rgba(0, 0, 0, 0) 100%);
}
.contact-theme svg .st0 {
  fill: #ecb365;
}
.contact-theme svg .st1 {
  fill: #257195;
}
.contact-theme .gradient-border {
  background: #000203;
}
.contact-theme .gradient-border:not(.hide)::after {
  background: linear-gradient(60deg, #041c32, #04293a, #257195);
}
.contact-theme .auto-type {
  color: #257195;
}
.contact-theme .auto-type span {
  color: #ecb365;
}
.contact-theme h4 {
  color: #257195;
  font-weight: 500;
}
.contact-theme .nav-anim {
  color: #257195;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.contact-theme .nav-anim.active {
  color: #28eaea;
}
.contact-theme .nav-anim::after {
  background: #04293a;
}
.contact-theme a {
  color: #257195;
}
.contact-theme a:hover {
  filter: brightness(150%);
}
.contact-theme #my-heart,
.contact-theme .hearts {
  color: #257195;
}

html,
body {
  font-family: "REM", sans-serif;
  margin: 0;
  padding: 0;
  transition: 500ms ease-in-out;
  /* Hide scrollbar for Chrome, Safari and Opera */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
html ::-webkit-scrollbar,
body ::-webkit-scrollbar {
  display: none;
}

header {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}
@media (max-width: 576px) {
  header {
    padding: 1rem 1rem 1.5rem;
  }
}
header #logo {
  width: 5rem;
  height: auto;
  cursor: pointer;
  scale: 0.9 0.9;
}
header #logo:hover {
  scale: 1 1;
}
header .socials {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
header .socials i {
  font-size: 32px;
  color: white;
  cursor: pointer;
}
header .socials i:hover {
  scale: 1.2 1.2;
}

h1 {
  font-size: 40px;
  font-weight: 500;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 2rem;
  font-weight: 400;
}

h4 {
  font-weight: 400;
}

@media (max-width: 576px) {
  h1,
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  .center {
    padding: 1.5rem !important;
  }
}
.flex {
  display: flex;
  justify-content: center;
}

.center {
  margin: auto;
}

.reward {
  position: relative;
}
.reward.heart-float::before {
  font-family: "FontAwesome";
  content: "\f004";
  position: absolute;
  animation: heartFlutter 0.5s 1 ease-in-out forwards;
}

#bg-body {
  height: 100vh;
  min-height: 100vh;
  /* Setting a minimum height of 100vh */
}
#bg-body h1,
#bg-body h2,
#bg-body h3,
#bg-body p {
  margin-block-start: 0px;
  color: var(--_text-color);
}
#bg-body p {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#bg-body.overflowing {
  overflow: auto;
}
#bg-body .outer-border {
  padding: 2rem;
  display: flex;
  justify-content: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  max-width: 1200px;
  margin: auto;
}
@media (max-width: 768px) {
  #bg-body .outer-border {
    flex-direction: column-reverse;
  }
  #bg-body .outer-border .content-sections {
    width: 100% !important;
  }
}
@media (max-width: 576px) {
  #bg-body .outer-border {
    padding: 1rem !important;
  }
}
#bg-body .outer-border .content-sections {
  width: 70%;
  /* Animations for portfolio navigation */
}
#bg-body .outer-border .content-sections .gradient-border {
  --_borderWidth: 3px;
  position: relative;
  border-radius: var(--_borderWidth);
  width: 100%;
}
#bg-body .outer-border .content-sections .gradient-border .center {
  padding: 2rem;
}
#bg-body .outer-border .content-sections #fun {
  color: #3b7be1;
  cursor: pointer;
}
#bg-body .outer-border .content-sections .gradient-border:not(.hide):after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--_borderWidth));
  left: calc(-1 * var(--_borderWidth));
  height: calc(100% + var(--_borderWidth) * 2);
  width: calc(100% + var(--_borderWidth) * 2);
  border-radius: calc(2 * var(--_borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}
#bg-body .outer-border .content-sections .portfolio-nav {
  display: flex;
  width: 100%;
  --_gap: 2rem;
  list-style: none;
}
@media (max-width: 768px) {
  #bg-body .outer-border .content-sections .portfolio-nav {
    padding-left: 0;
  }
  #bg-body .outer-border .content-sections .portfolio-nav .nav-anim {
    padding: calc(var(--_gap) / 3) !important;
    font-size: 1rem !important;
  }
}
#bg-body .outer-border .content-sections .portfolio-nav .nav-anim {
  font-size: 1.5rem;
  opacity: 0.8;
  padding: calc(var(--_gap) / 2);
  cursor: pointer;
  position: relative;
}
@supports selector(:has(h1)) {
  #bg-body .outer-border .content-sections .portfolio-nav .nav-anim:has(+ :hover)::after {
    --_translate: 100%;
    --_scale-delay: 300ms;
    --_translate-delay: 200ms;
  }
  #bg-body .outer-border .content-sections .portfolio-nav .nav-anim:hover {
    opacity: 1;
  }
  #bg-body .outer-border .content-sections .portfolio-nav .nav-anim:hover + .nav-anim::after {
    --_translate: -100%;
    --_scale-delay: 300ms;
    --_translate-delay: 200ms;
  }
  #bg-body .outer-border .content-sections .portfolio-nav .nav-anim:hover::after {
    --_width: 1;
  }
}
#bg-body .outer-border .content-sections .portfolio-nav .nav-anim::after {
  content: "";
  height: 3px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  scale: var(--_width, 0) 1;
  translate: var(--_translate, 0);
  transition: scale 300ms var(--_scale-delay, 0ms), translate 500ms var(--_translate-delay, 0ms);
}
#bg-body .outer-border .content-sections .portfolio-sub-content .content-div.hide {
  display: none;
}
#bg-body .outer-border #nav-block nav {
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  #bg-body .outer-border #nav-block nav {
    flex-direction: row;
  }
}
#bg-body .outer-border #nav-block nav .nav-link.gradient-border {
  --_borderWidth: 3px;
  position: relative;
  border-radius: var(--_borderWidth);
}
#bg-body .outer-border #nav-block nav .nav-link.gradient-border:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--_borderWidth));
  left: calc(-1 * var(--_borderWidth));
  height: calc(100% + var(--_borderWidth) * 2);
  width: calc(100% + var(--_borderWidth) * 2);
  border-radius: calc(2 * var(--_borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}
#bg-body .outer-border #nav-block nav span {
  color: white;
  display: block;
  cursor: pointer;
  padding: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.contact-card {
  position: fixed;
  bottom: 3rem;
  right: 1rem;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hide {
  width: 0px !important;
  height: 0px;
  overflow: hidden;
  transition: 1s ease-in-out;
}

footer {
  text-align: center;
  padding: 2rem;
}
@media (max-width: 1024px) {
  footer {
    text-align: right;
  }
}
footer p {
  color: white;
}
footer #my-heart,
footer .hearts {
  animation: pulse 3s ease-in-out alternate infinite;
  transition: 1s ease-in-out;
  margin-right: 3px;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes heartFlutter {
  0% {
    opacity: 0;
    top: -5px;
  }
  50% {
    opacity: 1;
    top: -15px;
  }
  100% {
    opacity: 0;
    top: -30px;
  }
}/*# sourceMappingURL=structure.css.map */