/* LESS Variables */
/* CSS Variables */
:root {
  --font-base: clamp(16px, 1vw, 20px);
  --font-btn: clamp(12px, 1vw, 14px);
  --font-h1: clamp(38px, 4vw, 58px);
  --font-h2: clamp(28px, 2vw, 42px);
  --font-h3: clamp(14px, 1vw, 20px);
  --font-h4: clamp(18px, 2vw, 26px);
  --vh: 100%;
}
html {
  font-size: var(--font-base);
}
/* Basics */
body {
  font-family: 'Figtree', sans-serif;
  background: #29007A;
  color: #ffffff;
  line-height: 1.3;
  font-weight: 300;
}
@media (max-width: 992px) {
  body {
    line-height: 1.25;
  }
}
* {
  scroll-margin-top: 168px;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: 'Lexend', sans-serif;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
h1 {
  font-size: var(--font-h1);
  line-height: 1.4;
}
h2 {
  font-size: var(--font-h2);
  font-weight: 600;
}
h3 {
  font-size: var(--font-h3);
  font-weight: 400;
  margin-bottom: 56px;
}
h3:before {
  content: '';
  background-image: url(/static/app/img/graphics/bracket.svg);
  width: var(--font-h3);
  height: var(--font-h3);
  background-repeat: no-repeat;
  background-size: auto 100%;
  display: inline-block;
  margin-right: 7px;
  vertical-align: middle;
  margin-top: -2px;
}
h4 {
  font-size: var(--font-h4);
  font-weight: 500;
}
h5 {
  font-size: var(--font-h3);
  font-weight: 400;
}
.icon {
  font-size: var(--font-h2);
}
b,
strong {
  font-weight: 600;
}
svg {
  shape-rendering: geometricPrecision;
  /* crisp edges */
  text-rendering: optimizeLegibility;
  /* better font rendering */
}
a {
  text-decoration: none;
  color: inherit;
}
.textlink {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.textlink:hover {
  color: #FB3535;
}
@media (max-width: 992px) {
  .textlink {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
}
h1 .textlink {
  text-decoration-thickness: 4px;
  text-underline-offset: 15px;
  text-decoration-color: currentColor;
}
.btn {
  padding: 7px 14px;
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--font-btn);
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
  display: inline-block;
}
.btn.large {
  padding: 7px 28px;
  font-size: var(--font-base);
  line-height: 1.5;
}
.btn.huge {
  font-size: var(--font-h3);
  padding: 14px 56px;
}
.btn.red {
  background-color: #FB3535;
}
.btn.red::before {
  background-color: #29007A;
}
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #FB3535;
  z-index: -1;
  transition: width 0.2s ease;
  /* controls speed & smoothness */
}
.btn:hover::before {
  width: 100%;
}
ul,
ol {
  list-style: disc outside;
  padding-left: 1.5em;
  margin: 1em 0;
  display: flex;
  flex-direction: column;
}
ul li,
ol li {
  margin: 0;
}
ul li::marker,
ol li::marker {
  font-size: 1.5em;
  /* Bullet size (affects thickness) */
  font-weight: bold;
  /* Makes it thicker */
}
/* Structure */
header {
  position: fixed;
  top: 42px;
  right: 42px;
  left: 42px;
  z-index: 9;
}
@media (max-width: 1450px) {
  header {
    top: 14px;
    right: 14px;
    left: 14px;
  }
}
header nav {
  padding: 14px 14px 14px 28px;
  border-radius: 9999px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* Pushes first child left, second child right */
  align-items: center;
  /* Optional: vertically center if needed */
}
header nav #logo,
header nav span {
  color: #29007A;
  font-weight: 700;
  font-size: var(--font-h4);
}
header nav #logo svg,
header nav span svg {
  width: 200px;
}
footer {
  padding: 140px 0;
}
section {
  padding: 140px 0;
  overflow: hidden;
}
.wrapper {
  margin: 0 auto;
  width: 85%;
  max-width: 1600px;
  box-sizing: border-box;
}
@media (max-width: 1450px) {
  .wrapper {
    width: unset;
    padding: 0 14px;
    margin: 0;
  }
}
/* Structuring elements */
.card {
  padding: 28px;
  transition: transform 0.2s ease-in-out;
  /* animate changes to transform */
}
.card:after {
  transition: transform 0.2s ease-in-out;
  /* animate changes to transform */
}
.card:hover {
  transform: translateY(-7px);
}
.card:hover:after {
  transform: scale(1.2) translateY(-33px);
}
.card.bordered {
  background: transparent;
  border: 2px solid #ffffff;
}
.card.rounded {
  border-radius: 28px;
}
.card.rounded-bottom-left {
  border-radius: 0 0 0 28px;
}
.card.rounded-top-left {
  border-radius: 28px 0 0 0;
}
.card.blue {
  background: #4100FF;
}
.card.lila {
  background: #A97DFF;
}
.card.darkblue {
  background: #29007A;
}
.card.white {
  background: #ffffff;
  color: #29007A;
}
.card.purple {
  background: #7A00FF;
}
.card svg:not(.apexcharts-svg),
.card img {
  max-height: 28px;
  padding-bottom: 14px;
}
.card h4,
.card h3 {
  margin: 14px 0 0;
}
.card small {
  text-transform: uppercase;
  font-weight: 500;
}
.card .kpi {
  font-size: var(--font-h1);
  font-weight: 500;
}
.card .btns {
  margin: 2em -2px -2px -2px;
  font-size: 0;
}
.card .btns > .btn {
  margin: 2px;
  display: inline-block;
}
mark {
  display: inline-block;
  height: var(--font-h4);
  width: var(--font-h4);
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: var(--font-btn);
  font-weight: 500;
  border-radius: 999999px;
  text-align: center;
  line-height: var(--font-h4);
  position: absolute;
  right: 0;
  top: 7px;
}
mark.inline {
  display: inline-block;
  position: relative;
  vertical-align: super;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-row-gap: 56px;
  grid-column-gap: 56px;
  align-content: start;
  grid-auto-columns: 1fr;
}
.grid > * {
  grid-column-start: auto;
  grid-column-end: auto;
}
.grid .gr-w-3 {
  grid-column-end: span 3;
}
.grid .gr-w-6 {
  grid-column-end: span 6;
}
.grid .gr-w-8 {
  grid-column-end: span 8;
}
.grid .gr-w-4 {
  grid-column-end: span 4;
}
.grid .gr-w-12 {
  grid-column-end: span 12;
}
.grid .gr-w-1 {
  grid-column-end: span 1;
}
.grid .gr-w-2 {
  grid-column-end: span 2;
}
.grid .gr-o-8 {
  grid-column-start: 9;
}
.grid .gr-o-3 {
  grid-column-start: 4;
}
.grid .gr-o-2 {
  grid-column-start: 3;
}
@media (max-width: 992px) {
  .grid {
    grid-column-gap: 28px;
  }
  .grid .gr-w-2,
  .grid .gr-w-3,
  .grid .gr-w-4,
  .grid .gr-w-8 {
    grid-column-end: span 12;
  }
  .grid .gr-o-8,
  .grid .gr-o-3,
  .grid .gr-o-2 {
    grid-column-start: 1;
    margin: 56px 0 56px 0;
  }
}
.column {
  display: grid;
  grid-row-gap: 28px;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
}
.row > * {
  flex: 0 0 auto;
}
/* Design elements */
.fill-white path {
  fill: #ffffff;
}
.fill-aqua path {
  fill: #5FD3C9;
}
.fill-purple path {
  fill: #7A00FF;
}
.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}
.rotate-180 {
  transform: rotate(180deg);
}
.rotate-270 {
  transform: rotate(270deg);
}
.diamond {
  position: relative;
  margin-bottom: 70px;
}
.diamond:after {
  content: "";
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  height: 56px;
  background-image: url("/static/app/img/graphics/diamond.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  /* scale height, keep aspect ratio */
  background-position: center center;
}
.diamond.highlight :after {
  border-color: #ffffff;
}
.scroll-fill {
  font-size: 3rem;
  font-weight: bold;
  color: black;
  /* base color */
  background: linear-gradient(to right, #A97DFF 50%, #ffffff 50%);
  background-size: 200% 100%;
  /* wide gradient: red + black */
  background-position: 0 0;
  /* start shifted left, only black visible */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.2s ease-out;
}
.rotate {
  cursor: pointer;
  font-family: monospace;
  background: rgba(255, 255, 255, 0.2);
}
/* Section specifics */
#intro {
  height: calc(var(--vh, 1vh) * 90);
  min-height: calc(var(--font-h1) * 10);
  display: flex;
  align-items: center;
  background-image: url("/static/app/img/graphics/bracket-light-purple.svg"), url("/static/app/img/graphics/bracket-purple.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: auto 100%, auto 100%;
  background-position: left center, right center;
  padding: 0;
}
@media (max-width: 1450px) {
  #intro {
    min-height: calc(var(--vh, 1vh) * 50);
  }
}
#experience {
  background: #4100FF;
}
#experience .card.white .btn {
  background: #29007A;
}
#side {
  background-color: #5FD3C9;
  background-image: url("/static/app/img/graphics/bracket-blue.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left center;
}
#side .grid .grid {
  grid-column-gap: 0;
}
#side .card {
  padding: 14px 28px;
  transition: none;
}
#side .card.darkblue {
  box-shadow: #29007A 200px 0;
}
#side .card.lila {
  box-shadow: #A97DFF 200px 0;
}
#side .card.purple {
  box-shadow: #7A00FF 200px 0;
}
#side .card.blue {
  box-shadow: #4100FF 200px 0;
}
@media (max-width: 992px) {
  #side .grid .gr-w-4 {
    grid-column-end: span 10;
  }
  #side .grid .gr-o-8 {
    grid-column-start: 4;
  }
}
#skills {
  background-image: url("/static/app/img/graphics/donut.svg");
  background-repeat: no-repeat;
  background-size: auto 60vh;
  background-position: right bottom;
}
#skills ul li {
  position: relative;
}
#skills span {
  font-style: italic;
}
#skills svg {
  max-height: 28px;
}
#personal {
  background-image: url("/static/app/img/graphics/donut-2.svg");
  background-repeat: no-repeat;
  background-size: auto 60vh;
  background-position: right top;
  background-color: #A97DFF;
}
#worked {
  background-color: #7A00FF;
}
#worked .logos {
  text-align: center;
}
#worked .logos img {
  max-height: 30px;
  max-width: 120px;
  display: inline-block;
  margin: 28px 42px;
}
#worked .logos p {
  display: inline-block;
  margin: 28px 42px;
  vertical-align: bottom;
}
#contact {
  background: #5FD3C9;
}
#contact .btn {
  margin: 0 auto;
}
#legal h3 {
  margin: 56px 0 0 0;
}
footer .icons a + a {
  margin-left: 14px;
}
/*# sourceMappingURL=style.css.map */