:root {
  /* Dark mode */
  --primary-color: #4759e9;
  --primary-color: #598afe;
  --primary-color: #617bff;
  --secondary-color: #3b49ba;

  --text-color: #fbfcfc;
  --text-secondary-color: rgb(180, 188, 208);
  --lightgray: #e4e4e4;

  --text-highlight: linear-gradient(90deg,rgba(97, 123, 255, 0.4),rgba(97, 123, 255, 0.05));
  
  --gradient-1: linear-gradient(346deg, var(--primary-color) 0%, rgb(239, 214, 255) 100%);
  --gradient-2: linear-gradient(90.01deg,#e59cff .01%,#ba9cff 50.01%,#9cb2ff 100%),linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.28) 100%);
  --gradient-3: radial-gradient(circle closest-corner at 42% -100%,#ed9ba9,rgba(237,155,169,0)),linear-gradient(103deg,#9076fc 16%,#61cfeb 88%);

  --navbar-bg: rgba(16, 18, 29, .8);
  /* --hero-bg: linear-gradient(0deg, transparent 69%, #291b55 100%); */
  --hero-bg: linear-gradient(0deg, transparent 69%, #202b50 100%);
  
  --background1: #3b49ba;
  --background2: #0d0f17;
  --background3: rgba(16,18,29,1);
  --background4: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));

  --background-linear: linear-gradient(320deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 100%);

  --border-1: 1px solid rgba(255, 255, 255, 0.2);

  --card-bg-1: #161827;
  --card-bg-2: #191c2c;

  --card-shadow-1: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

  --global-theme-toggle-content: "🌚";
  --global-theme-toggle-content: "🌝 ";
}

/* bg-color: #171725 */

html[data-theme="light"] {
  /* Light mode */
  --primary-color: #4759e9;
  --secondary-color: #3b49ba;

  --text-color: #323235;
  --text-secondary-color: #50657F;
  --lightgray: #50657F;

  --text-highlight: linear-gradient(90deg,rgba(71, 89, 233, 0.2),rgba(71, 89, 233, 0.02));
  
  --gradient-1: linear-gradient(346deg, var(--primary-color) 0%, rgb(100, 51, 131) 100%);
  --gradient-2: linear-gradient(90.01deg,#e59cff .01%,#ba9cff 50.01%,#9cb2ff 100%),linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.28) 100%);

  --navbar-bg: rgb(246, 246, 246,.6);
  --hero-bg: linear-gradient(180deg, #c8c6f27b, rgba(255,255,255,0));

  --background1: #f6f6f6;
  --background2: 239, 245, 253;
  --background3: #f6f6f6;
  --background4: #eceff1;

  --border-1: 1px solid rgba(220, 227, 231, 1);
  
  --card-bg-1: #eceff1;
  --card-bg-2: #e5e3ec;

  --card-shadow-1: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
  --card-shadow-1: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

  --background-linear: #eceff1;

  --global-theme-toggle-content: "🌝";
  --global-theme-toggle-content: "🌚";
}

/* TOGGLE THEME */

.theme-toggle {
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
}

.theme-toggle::after {
  content: var(--global-theme-toggle-content);
}


/* Top linear line */
.top-bar {
  background: linear-gradient(90deg, rgba(17, 17, 17, 0), rgb(255, 255, 255,.5) 50%, rgba(17, 17, 17, 0));
  height: 1px;
  /* width: 50%; */
  width: 100%;
}

/* Quick styles */

/* Circled Square */
.squircle {
  clip-path: polygon(100% 50%, 100% 56.6%, 100% 59.3%, 100% 61.4%, 99.9% 63.2%, 99.9% 64.8%, 99.9% 66.2%, 99.8% 67.5%, 99.8% 68.7%, 99.7% 69.8%, 99.6% 70.8%, 99.5% 71.8%, 99.5% 72.8%, 99.4% 73.7%, 99.3% 74.6%, 99.1% 75.4%, 99% 76.3%, 98.9% 77%, 98.8% 77.8%, 98.6% 78.5%, 98.5% 79.2%, 98.3% 79.9%, 98.1% 80.6%, 98% 81.3%, 97.8% 81.9%, 97.6% 82.5%, 97.4% 83.1%, 97.2% 83.7%, 97% 84.3%, 96.8% 84.8%, 96.5% 85.4%, 96.3% 85.9%, 96% 86.4%, 95.8% 86.9%, 95.5% 87.4%, 95.3% 87.9%, 95% 88.3%, 94.7% 88.8%, 94.4% 89.2%, 94.1% 89.7%, 93.8% 90.1%, 93.4% 90.5%, 93.1% 90.9%, 92.8% 91.3%, 92.4% 91.7%, 92% 92%, 91.7% 92.4%, 91.3% 92.8%, 90.9% 93.1%, 90.5% 93.4%, 90.1% 93.8%, 89.7% 94.1%, 89.2% 94.4%, 88.8% 94.7%, 88.3% 95%, 87.9% 95.3%, 87.4% 95.5%, 86.9% 95.8%, 86.4% 96%, 85.9% 96.3%, 85.4% 96.5%, 84.8% 96.8%, 84.3% 97%, 83.7% 97.2%, 83.1% 97.4%, 82.5% 97.6%, 81.9% 97.8%, 81.3% 98%, 80.6% 98.1%, 79.9% 98.3%, 79.2% 98.5%, 78.5% 98.6%, 77.8% 98.8%, 77% 98.9%, 76.3% 99%, 75.4% 99.1%, 74.6% 99.3%, 73.7% 99.4%, 72.8% 99.5%, 71.8% 99.5%, 70.8% 99.6%, 69.8% 99.7%, 68.7% 99.8%, 67.5% 99.8%, 66.2% 99.9%, 64.8% 99.9%, 63.2% 99.9%, 61.4% 100%, 59.3% 100%, 56.6% 100%, 50% 100%, 43.4% 100%, 40.7% 100%, 38.6% 100%, 36.8% 99.9%, 35.2% 99.9%, 33.8% 99.9%, 32.5% 99.8%, 31.3% 99.8%, 30.2% 99.7%, 29.2% 99.6%, 28.2% 99.5%, 27.2% 99.5%, 26.3% 99.4%, 25.4% 99.3%, 24.6% 99.1%, 23.7% 99%, 23% 98.9%, 22.2% 98.8%, 21.5% 98.6%, 20.8% 98.5%, 20.1% 98.3%, 19.4% 98.1%, 18.7% 98%, 18.1% 97.8%, 17.5% 97.6%, 16.9% 97.4%, 16.3% 97.2%, 15.7% 97%, 15.2% 96.8%, 14.6% 96.5%, 14.1% 96.3%, 13.6% 96%, 13.1% 95.8%, 12.6% 95.5%, 12.1% 95.3%, 11.7% 95%, 11.2% 94.7%, 10.8% 94.4%, 10.3% 94.1%, 9.9% 93.8%, 9.5% 93.4%, 9.1% 93.1%, 8.7% 92.8%, 8.3% 92.4%, 8% 92%, 7.6% 91.7%, 7.2% 91.3%, 6.9% 90.9%, 6.6% 90.5%, 6.2% 90.1%, 5.9% 89.7%, 5.6% 89.2%, 5.3% 88.8%, 5% 88.3%, 4.7% 87.9%, 4.5% 87.4%, 4.2% 86.9%, 4% 86.4%, 3.7% 85.9%, 3.5% 85.4%, 3.2% 84.8%, 3% 84.3%, 2.8% 83.7%, 2.6% 83.1%, 2.4% 82.5%, 2.2% 81.9%, 2% 81.3%, 1.9% 80.6%, 1.7% 79.9%, 1.5% 79.2%, 1.4% 78.5%, 1.2% 77.8%, 1.1% 77%, 1% 76.3%, 0.9% 75.4%, 0.7% 74.6%, 0.6% 73.7%, 0.5% 72.8%, 0.5% 71.8%, 0.4% 70.8%, 0.3% 69.8%, 0.2% 68.7%, 0.2% 67.5%, 0.1% 66.2%, 0.1% 64.8%, 0.1% 63.2%, 0% 61.4%, 0% 59.3%, 0% 56.6%, 0% 50%, 0% 43.4%, 0% 40.7%, 0% 38.6%, 0.1% 36.8%, 0.1% 35.2%, 0.1% 33.8%, 0.2% 32.5%, 0.2% 31.3%, 0.3% 30.2%, 0.4% 29.2%, 0.5% 28.2%, 0.5% 27.2%, 0.6% 26.3%, 0.7% 25.4%, 0.9% 24.6%, 1% 23.7%, 1.1% 23%, 1.2% 22.2%, 1.4% 21.5%, 1.5% 20.8%, 1.7% 20.1%, 1.9% 19.4%, 2% 18.7%, 2.2% 18.1%, 2.4% 17.5%, 2.6% 16.9%, 2.8% 16.3%, 3% 15.7%, 3.2% 15.2%, 3.5% 14.6%, 3.7% 14.1%, 4% 13.6%, 4.2% 13.1%, 4.5% 12.6%, 4.7% 12.1%, 5% 11.7%, 5.3% 11.2%, 5.6% 10.8%, 5.9% 10.3%, 6.2% 9.9%, 6.6% 9.5%, 6.9% 9.1%, 7.2% 8.7%, 7.6% 8.3%, 8% 8%, 8.3% 7.6%, 8.7% 7.2%, 9.1% 6.9%, 9.5% 6.6%, 9.9% 6.2%, 10.3% 5.9%, 10.8% 5.6%, 11.2% 5.3%, 11.7% 5%, 12.1% 4.7%, 12.6% 4.5%, 13.1% 4.2%, 13.6% 4%, 14.1% 3.7%, 14.6% 3.5%, 15.2% 3.2%, 15.7% 3%, 16.3% 2.8%, 16.9% 2.6%, 17.5% 2.4%, 18.1% 2.2%, 18.7% 2%, 19.4% 1.9%, 20.1% 1.7%, 20.8% 1.5%, 21.5% 1.4%, 22.2% 1.2%, 23% 1.1%, 23.7% 1%, 24.6% 0.9%, 25.4% 0.7%, 26.3% 0.6%, 27.2% 0.5%, 28.2% 0.5%, 29.2% 0.4%, 30.2% 0.3%, 31.3% 0.2%, 32.5% 0.2%, 33.8% 0.1%, 35.2% 0.1%, 36.8% 0.1%, 38.6% 0%, 40.7% 0%, 43.4% 0%, 50% 0%, 56.6% 0%, 59.3% 0%, 61.4% 0%, 63.2% 0.1%, 64.8% 0.1%, 66.2% 0.1%, 67.5% 0.2%, 68.7% 0.2%, 69.8% 0.3%, 70.8% 0.4%, 71.8% 0.5%, 72.8% 0.5%, 73.7% 0.6%, 74.6% 0.7%, 75.4% 0.9%, 76.3% 1%, 77% 1.1%, 77.8% 1.2%, 78.5% 1.4%, 79.2% 1.5%, 79.9% 1.7%, 80.6% 1.9%, 81.3% 2%, 81.9% 2.2%, 82.5% 2.4%, 83.1% 2.6%, 83.7% 2.8%, 84.3% 3%, 84.8% 3.2%, 85.4% 3.5%, 85.9% 3.7%, 86.4% 4%, 86.9% 4.2%, 87.4% 4.5%, 87.9% 4.7%, 88.3% 5%, 88.8% 5.3%, 89.2% 5.6%, 89.7% 5.9%, 90.1% 6.2%, 90.5% 6.6%, 90.9% 6.9%, 91.3% 7.2%, 91.7% 7.6%, 92% 8%, 92.4% 8.3%, 92.8% 8.7%, 93.1% 9.1%, 93.4% 9.5%, 93.8% 9.9%, 94.1% 10.3%, 94.4% 10.8%, 94.7% 11.2%, 95% 11.7%, 95.3% 12.1%, 95.5% 12.6%, 95.8% 13.1%, 96% 13.6%, 96.3% 14.1%, 96.5% 14.6%, 96.8% 15.2%, 97% 15.7%, 97.2% 16.3%, 97.4% 16.9%, 97.6% 17.5%, 97.8% 18.1%, 98% 18.7%, 98.1% 19.4%, 98.3% 20.1%, 98.5% 20.8%, 98.6% 21.5%, 98.8% 22.2%, 98.9% 23%, 99% 23.7%, 99.1% 24.6%, 99.3% 25.4%, 99.4% 26.3%, 99.5% 27.2%, 99.5% 28.2%, 99.6% 29.2%, 99.7% 30.2%, 99.8% 31.3%, 99.8% 32.5%, 99.9% 33.8%, 99.9% 35.2%, 99.9% 36.8%, 100% 38.6%, 100% 40.7%, 100% 43.4%);
}

/* Tools halo effect */
.halo {
  width: 150px;
  height: 150px;

  background-image: repeating-radial-gradient(80% 80% at 50% 50%, #FFFFFF00 0%, #FFFFFF 16.7%, transparent 20%);
  /* background-image: repeating-radial-gradient(50% 50% at 50% 50%, #FFFFFF00 3%, #FFFFFF 17%, transparent 0% 18px); */
  mask-image: radial-gradient(50% 50%, black -20%, transparent);
  -webkit-mask-image: radial-gradient(50% 50%, black -20%, transparent);

  filter: blur(1px);
  transform: translate3d(0, 0, 0);
  opacity: .1;
}

@media screen and (max-width: 600px) {
  .halo {
    width: 100px;
    height: 100px;
  }
}

/* STYLES */

body {
  font-family: "Montserrat", sans-serif;
  position: relative;
  background-color: var(--background3)
}

#page {
  background-color: var(--background1);
}

a {
  color: var(--primary-color);
  font-weight: 500;
}

a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

* :focus {
  box-shadow: 0 0 0 1px var(--primary-color);
  outline-color: var(--primary-color);
  border-radius: 4px;
  outline-style: solid;
  outline-width: 0;
  outline-offset: -1px;
}

span {
  color: var(--primary-color);
}

.strong {
  font-weight: 600;
}

* a,
* a:hover {
  transition: all 0.2s ease-in-out;
}

/* Current location tag */
.current-location {
  position: absolute;
  top: 120px;
  left: 0;

  border-radius: 0 100px 100px 0;
  background-color: var(--background1);
  outline: none;

  color: var(--text-color);
  padding: 0.875rem 1rem;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;

  display: flex;
  gap: 16px;
  align-items: center;
}

.current-location p {
  margin: 0;
  padding: 0;
}

.current-location span {
  font-size: 24px;
}

/* Button shine effect */

.animate-btn {
  animation: shinebig 3s ease-in-out infinite;
  background-image: linear-gradient(90deg, #2D2D32 0, #354E80 50%, #2316A6 100%);
  border-radius: 100px;
}

@keyframes shinebig {
  15% { filter: drop-shadow(var(--secondary-color) 0 0 0); }
  60% { filter: drop-shadow(var(--secondary-color) 0 0 80px); }
}

/* Image move effect */
.movement-up-down {
  animation: up-down-move 5s ease-in-out infinite;
}

@keyframes up-down-move {
  50% { transform: translateY(-8px); }
}

/* TEXT HIGHLIGHT */
.text-highlight-primary {
  background-image: var(--text-highlight);
  border-left: 4px solid var(--primary-color);
  border-radius: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  line-height: 1;
  display: inline-block;
  color: var(--primary-color);
}

/* Back to Top Button */

#backToTop {
  position: fixed;
  bottom: 70px;
  right: -81px;
  z-index: 1000;
  border: 1px solid var(--primary-color);
  background-color: var(--background1);
  outline: none;
  color: var(--text-color);
  padding: 1em;
  border-radius: 10px 0 0 10px;
  font-size: 12px;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}

#backToTop:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  right: -1px;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}

/* TYPOGRAPHY */

h1 {
  font-size: 3rem;
  line-height: 1.3;
}

h2.title {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--gradient-3);
}

h3.title {
  color: var(--text-color);
  font-size: 1.75em;
  font-weight: 600;
}

h4.title {
  color: var(--text-secondary-color);
  font-size: 0.875rem;
  font-weight: 400;
}

h6.subtitle {
  color: var(--text-secondary-color);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 3em;
}

h6.category {
  color: var(--primary-color);
  font-size: 0.875em;
  font-weight: 500;
  margin: 0 0 1em;
}

/* HEADER */

header {
  width: 100%;
  color: var(--lightgray);
  padding: 1em 2em;
  position: fixed;
  z-index: 1000;
  transition: all .5s ease-in-out;
}

.scrolled {
  background-color: var(--navbar-bg);
  backdrop-filter: blur(10px);
  transition: all .5s ease-in-out;
}

header nav ul.nav {
  list-style: none;
  display: flex;
  color: var(--lightgray);
  font-size: 0.875em;
}

header nav ul a {
  color: var(--text-color);
}

header nav ul li.nav-item {
  padding: 0 10px;
  background: transparent;
  border: 0;
  font-size: 14px;
}

header nav ul li.nav-item .active {
  font-weight: 600;
  color: var(--primary-color);
}

/* Mobile Menu */

header .navbar {
  padding: 0;
}

header .navbar-toggler {
  padding: 0;
}

header .navbar-toggler-icon {
  padding: 0;
  width: 2em;
  height: 2em;
}

@media only screen and (max-width: 600px) {
  header nav ul.nav {
    width: 100%;
  }
  .nav-link {
    padding: 1.5rem 1rem;
  }
  section#home .intro .role {
    line-height: 1em;
  }
  section {
    padding: 4em 2em;
  }
  header {
    background-color: var(--navbar-bg);
    backdrop-filter: blur(10px);
    transition: all .5s ease-in-out;
  }
}

/* HOME */

section#home {
  color: var(--text-color);
  padding: 2em 0 4em;
  min-height: 100vh;
  background: var(--hero-bg);
  height: 100vh;
  min-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  section#home {
    height: auto;
  }
}

section#home span {
  color: inherit;
}

section#home .intro {
  margin: 4em 0;
}

section#home .intro hr {
  background: var(--primary-color);
  width: 4em;
  height: 4px;
  margin: 2rem 0;
}

section#home .intro .salutation {
  font-size: 1.25em;
}

section#home .intro .name {
  color: var(--text-color);
}

section#home .intro .role {
  font-size: 4rem;
  font-weight: 600;
  color: var(--text-color);
}

section#home .intro .description {
  color: var(--text-color);
}

section#home .profile-picture-container {
  overflow: visible;
}

section#home .profile-picture-container img {
  margin: 3em 0;
}

a.download {
  color: var(--text-color);
  background: linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 100%);
  font-weight: 600;
  transition: transform 0.5s ease-in;
  box-shadow: 0px 0px 12px rgba(71, 89, 233, 0.4);
  font-size: 14px;
}

a.download:hover {
  background: linear-gradient(122deg,#fee5a5,#fea5a5 62%,#f69393 100%,#fff);
  color: var(--background2);
  border-color: transparent;
  box-shadow: 0px 0px 42px rgba(71, 89, 233, 0.6);
  transform: scale(1.1);
  transition: transform 0.5s ease-in-out;
}

a.download.no-scale {
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}

section#home .rectangle {
  background: #ffffff;
  opacity: .8;
  backdrop-filter: blur(10px);
  height: 110px;
  width: 70px;
  border-radius: 50px;
  position: absolute;
  bottom: 160px;
  right: -30px;
  transform: rotate(10deg);
  z-index: 100;
}

.scroll-arrow.vert-move {
  height: 16px;
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 1s infinite  alternate;
}

.scroll-arrow.vert-move {
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 1s infinite  alternate;
}

.reverse {
  transform: rotate(180deg);
}

@-webkit-keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
@keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}


@media only screen and (min-width: 600px) and (max-width: 768px) {
  section#home .intro .role {
    font-size: 3em;
  }
  section#home .intro hr {
    margin: 1em auto;
  }
  section#home .profile-picture-container img {
    margin: 0 auto 2em;
    display: block;
    width: 50%;
  }
  section#home ul {
    justify-content: center
  }
}

@media only screen and (max-width: 600px) {
  section#home {
    align-items: normal;
  }
  section#home h1 {
    font-size: 2rem;
  }
  section#home .intro {
    margin: 3em 0 2em;
  }
  section#home .intro .role {
    font-size: 2em;
    font-weight: 600;
    line-height: 2em;
  }
  section#home .intro hr {
    margin: 1em auto;
  }
  section#home .profile-picture-container img {
    margin: 0 auto 2em;
    display: block;
    width: 70%;
  }
  section#home .intro .salutation {
    line-height: 2;
  }
  section#home ul {
    justify-content: center
  }
}
section#home ul {
  gap: 1rem;
  font-size: 24px;
  margin: 16px -8px;
  padding: 0;
}

section#home a.fa {
  color: var(--text-color);
  border: 1px solid transparent;
  border-radius: 1em;
  width: 2em;
  height: 2em;
  text-align: center;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#home a:hover.fa {
  text-decoration: none;
  color: var(--background1);
}

.btn-outline-primary {
  color: var(--text-color);
  border-color: var(--primary-color);
  border-radius: 0.75em;
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

.btn-outline-primary:hover {
  color: var(--text-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* TAGLINE */

.tagline {
  margin: 16rem 0 16rem;
}

.tagline h3 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-color);
}

.tagline p {
  color: var(--text-color);
  font-weight: 500;
}

.tagline span { 
  color: var(--text-color);
  background-color: #617bff50;
  padding: 0 4px;
}

@media only screen and (max-width: 600px) {
  .tagline {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 5rem 0 10rem;
  }
}

/* Blur */
.blur {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: var(--primary-color);
  border-radius: 50%;
  filter: blur(100px);
  flex: none;
  height: 310px;
  mix-blend-mode: overlay;
  opacity: 0.2;
  width: 300px;
  height: 300px;
  /* max-width: 100%; */
  position: absolute;
  top: -110px;
  z-index: -1;
  left: -30px;
}

#blur {
  animation: pulse .5s infinite;
}

/* ABOUT */

section#about {
  background: var(--background3);
  color: var(--text-color);
  padding: 4em 0;
}

section#about p {
  line-height: 1.75em;
  font-size: 1rem;
  margin: 1rem 0 0;
  color: var(--text-color);
}

section#about .aboutMe {
  border-radius: 2em;
  padding: 4rem;
  border-style: solid;
  border-width: 0;
  border-color: rgba(107, 70, 193, 0.4);
  box-shadow: 0 20px 70px 0 rgba(107, 70, 193, 0.1);
}

section#about .aboutMetrics h4 {
  color: var(--primary-color);
  
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--gradient-1);

  font-size: 0.875em;
  font-weight: 600;
  display: block;
}

section#about .aboutMetrics h5 {
  font-size: 1.5rem;
  color: var(--text-color);
  background-image: var(--text-color);
}

section#about .aboutSkills {
  padding: 3em 0 0;
}

@media only screen and (max-width: 600px) {
  
  .about-me-stats {
    flex-wrap: wrap;
  }

  section#about {
    padding: 4em 0;
  }

  section#about .aboutMe {
    padding: 2rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 768px) {
  section#about .aboutMetrics h4 {
    color: var(--text-color);
    font-size: 3em;
  }
}

/* SKILLS */

section#skills {
  color: var(--text-color);
  padding: 4em 0;
}

/* section#skills p {
  margin: 1rem 0;
} */

section#skills .skill-progress {
  margin: 1.5rem 0;
}

section#skills .skill-progress h4 {
  font-size: 1em;
  margin: 0 0 1em;
}

/* Squared tools icons */

.square-icon {
  position: absolute;
  z-index: 5;
  border-radius: 16px;
  padding: 12px;
  max-width: 100px;
  /* background: radial-gradient(87% 50% at 50% -38%, hsla(0, 0%, 100%, 0.052) 77.5%, hsla(0, 0%, 100%, 0.014) 88.13%, hsla(0, 0%, 100%, 0) 100%), radial-gradient(97% 109% at 48% 0, rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.4) 100%); */
  background: linear-gradient(321deg, rgba(26, 26, 26, 0.5) 43.37%, rgba(21, 21, 21, 0.5) 68.02%, rgba(16, 16, 16, 0.5) 92.66%);
  background-color: var(--background3);
  box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,0.1), inset -1px -1px 0px 0px rgba(0,0,0,0.2);
}

.square-icon.photoshop {
  background: linear-gradient(127.78deg, rgba(2, 39, 68, 0.5) 43.37%, rgba(3, 30, 51, 0.5) 68.02%, rgba(4, 15, 24, 0.5) 92.66%);
  background-color: #022744;
}

.square-icon.illustrator {
  background: linear-gradient(127.78deg, rgba(68, 5, 5, 0.5) 43.37%, rgba(51, 0, 0, 0.5) 68.02%, rgba(44, 2, 2, 0.5) 92.66%);
  background-color: #440505;
}

.square-icon.adobe-xd {
  background: linear-gradient(127.78deg, rgba(71, 1, 55, 0.5) 43.37%, rgba(52, 13, 43, 0.5) 68.02%, rgba(44, 7, 35, 0.5) 92.66%);
  background-color: #470137;
}

.square-icon.vs-code {
  background: linear-gradient(127.78deg, #FFFFFF 33.99%, #EFF3F5 92.66%);
}

section#skills .aboutSkills {
  margin-top: 6rem;
  gap: 1rem;
}

section#skills .aboutSkills h5 {
  font-weight: 600;
}

section#skills .aboutSkills .skill {
  color: var(--lightgray);
  padding: 2rem;
  border-radius: 16px;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  gap: 1rem;

  box-shadow: 0 10px 40px 0 rgba(107, 70, 193, 0.1);

  border-style: solid;
  border-width: 0;

}

section#skills .skill-container {
  flex: 1;
}

.tools-grid {
  display: flex;
}

section#skills .aboutSkills > div p {
  font-size: 0.875em;
  line-height: 1.5em;
}

@keyframes progressAnimationStrike {
  from { width: 0 }
}

@media only screen and (max-width: 600px) {
  section#skills {
    padding: 4em 0;
  }
}

.skill-card {
  background: rgba(0, 0, 0, .4);
  background: radial-gradient(87% 50% at 50% -38%, hsla(0, 0%, 100%, 0.052) 77.5%, hsla(0, 0%, 100%, 0.014) 88.13%, hsla(0, 0%, 100%, 0) 100%), radial-gradient(97% 109% at 48% 0, rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.4) 100%);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 1px inset;
  border-radius: 28px;
}

@media only screen and (max-width: 600px) {
  section#skills .aboutSkills h5 {
    font-size: 1.5rem;
  }  
}

/* CAREER */

section#career {
  color: var(--lightgray);
  background: var(--background3);
  padding: 4em 0;
}

section#career .accordion .card {
  color: var(--lightgray);
  background: var(--background3);
  border: 0;
}

section#career .accordion span.date {
  color: var(--text-secondary-color);
  font-size: 0.75em;
  font-weight: 500;
  text-align: right;
  display: flex;
  flex: none;
  padding: 0 1.5rem;
}

section#career .accordion span.role {
  color: var(--text-secondary-color);
  font-size: 0.75em;
  font-weight: 500;
}

section#career .accordion span.company {
  color: var(--text-color);
  font-size: 1.25em;
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

section#career .accordion .card .card-header {
  background: var(--card-bg-1);
  padding: 0;
  margin-bottom: 0.5rem;
  border-radius: 1.5rem;

  display: flex;
  align-items: center;

  background-color: var(--background3);
  border: 1px solid transparent;
  color: var(--lightgray);

  background: linear-gradient(225deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
}

section#career .accordion .card .card-header .company-logo img {
  border-radius: 16px;
  margin: 1rem;
}

section#career .accordion .arrow {
  width: 16px;
  margin: 0 32px 0 20px;
  transform: rotate(180deg);
}

section#career .accordion .card-header.collapsed .arrow {
  rotate: 180deg;
}

section#career .accordion .card .card-body {
  padding: 2rem 7rem 2rem 4rem;
  margin: 1rem 0 2rem 3rem;
  font-size: 0.875rem;

  border-left: 1px solid var(--text-secondary-color);
  color: var(--text-secondary-color);
}

section#career .accordion .anchor {
  color: var(--primary-color);
  padding: 1rem;
  border-radius: 1rem;
  gap: 0.25rem;
}

section#career .accordion .card button:hover {
  background: var(--background2);
  border-color: var(--card-bg-2);
}

section#career .accordion .card button:hover *,
section#career .accordion .card button:focus *,
section#career .accordion .card button:focus,
section#career .accordion .card button:visited * {
  text-decoration: none;
  box-shadow: none;
  outline: none;
}

@media only screen and (max-width: 600px) {
  section#career {
    padding: 4em 0;
  }
  section#career .accordion .card .card-body {
    padding: 1em 2em 2em;
  }
}

@media only screen and (max-width: 400px) {
  section#career {
    padding: 4em 0;
  }
  section#career .accordion .card .card-header {
    flex-direction: column;
    padding: 20px;
  }
  section#career .accordion .card .card-body {
    padding: 1em;
    margin: 1em;
  }
  section#career .accordion .card img.arrow {
    margin: 1em 0;
  }
}

/* WORK */

section#portfolio {
  color: var(--lightgray);
  padding: 8em 0 4em;
  background: var(--background3);
  text-align: center;
}

section#portfolio h3.title {
  color: var(--lightgray);
}

section#portfolio .work-description {
  padding: 0 2rem 3rem 0;
}

section#portfolio p.subtitle {
  margin: 0 0 0.5rem;
  color: var(--text-secondary-color);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

section#portfolio .portfolio {
  background: var(--background-linear);
  padding: 3rem 0 0 3rem;
  border-radius: 2rem;
  margin-bottom: 3rem;
  overflow: hidden;
  min-height: 380px;

  background: linear-gradient(225deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: (0, 0, 0, 0.5) 0px 20px 40px 0px, rgba(255, 255, 255, 0.1) 0px 1px 2px 0px inset;
}

@media only screen and (max-width: 600px) {
  section#portfolio .portfolio {
    flex-direction: column;
    gap: 2rem;
    padding: 4rem 2rem 0;
  }

  section#portfolio .work-description {
    padding: 0;
  }
  
}

section#portfolio .portfolio h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

section#portfolio .portfolio img {
  width: 100%;
}

section#portfolio .card-work a:focus img {
  box-shadow: 0 0 0 1px var(--primary-color), 0 0 0 4px rgba(255, 175, 48, 0.3);
  outline-color: var(--primary-color);
  border-radius: 4px;
  outline-style: solid;
  outline-width: 0;
  outline-offset: -1px;
  height: 100%;
}

section#portfolio .card-work {
  color: var(--lightgray);
  /* background: var(--primary-color);
  background-color: var(--card-bg-1); */
  border-radius: 0.5em;
  overflow: hidden;
  margin: 0 0 1em;
}

section#portfolio {
  color: var(--text-secondary-color);
  font-size: 0.875rem;
}

section#portfolio .card-work .description {
  color: var(--text-color);
  /* background: var(--primary-color);
  background-color: var(--card-bg-1); */
  padding: 1.5em 1em;
}

section#portfolio .card-work img {
  width: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 8px;
}

section#portfolio .card-work .description h4 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

section#portfolio ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--primary-color);
  flex-direction: row;
  flex-wrap: wrap;
}
section#portfolio li {
  background: var(--background3);
  padding: 4px 12px;
  border-radius: 24px;
}

.dribbble-work {
  margin-top: 6rem;
}

.dribbble-logo {
  fill: #0077B5;
}

@media only screen and (max-width: 600px) {
  section#portfolio {
    padding: 4em 0;
  }
}

/* CONTACT */

section#contact {
  color: var(--lightgray);
  background-color: var(--background3);
  padding: 4em 0;
}

section#contact .card {
  background: var(--background-linear);
  padding: 1.5rem 2rem;
  transition: all 0.2s ease-in-out;
  border-radius: 16px;
  border: 1px solid transparent;
}

section#contact *:hover,
section#contact *:visited {
  text-decoration: none;
}

section#contact .card .content {
  z-index: 10;
}

section#contact .card span:first-child {
  font-size: 1.5em;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-color);
  display: block;
}

section#contact .card span:last-child {
  color: var(--text-secondary-color);
  font-size: 0.75em;
  font-weight: 500;
  margin: 0;
  display: block;
}

section#contact .card i {
  color: #2e324870;
  font-size: 3.5em;
  position: absolute;
  transition: all 0.2s ease-in-out;
}

section#contact .card:hover {
  background-color: var(--card-bg-1);
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

section#contact .card:hover i {
  color: #2e3248;
}

section#contact .card:hover i.dribbble {
  color: #EA4C89;
}

section#contact .card:hover i.linkedin {
  color: #0077B5;
}

section#contact .card:hover i.github {
  color: #E4E4E4;
}

section#contact .card img {
  opacity: .2;
  filter: grayscale();
  transition: all 0.2s ease-in-out;
}

section#contact .card:hover img {
  opacity: 1;
  transform: scale(1.1);
  filter: none;
}

section#contact .card.active {
  background-color: var(--card-bg-1);
  color: var(--text-color);
}

section#contact .card.active i {
  color: var(--primary-color);
}

section#contact a {
  display: block; /* to make the anchor the same width as the div */
}

@media only screen and (max-width: 600px) {
  section#contact {
    padding: 4em 0 2em;
  }
}

/* FOOTER */

footer {
  background-color: var(--background2);
  padding: 2em 2em;
}

footer p {
  color: var(--text-color);
  font-size: 0.75em;
  margin: 0;
}


/* 3D Hover Effect */
.hover-in{
	transition: .3s ease-out;
}
.hover-out{
	transition: .3s ease-in;
}

.shine {
  border-radius: 16px;
  opacity: .1;
}

.project__card {
  position: relative;
  transition: box-shadow .3s ease;
  box-shadow: 0 10px 30px transparent;
}