body{
  background:
    radial-gradient(circle at 12% 0%, rgba(37,99,235,0.06), transparent 35%),
    radial-gradient(circle at 100% 15%, rgba(124,58,237,0.05), transparent 42%),
    var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* =========================
   DESIGN TOKENS / VARIABLES
   ========================= */ 
  :root{
    --ink:#171A1D;
    --paper:#F5F1EA;
    --paper-strong:#EEE6D8;
    --accent:#D45A2D;
    --accent-soft:#E8A075;
    --teal:#214E48;
    --teal-soft:#DDEAE6;
    --muted:#6E655D;
    --line: rgba(23,26,29,0.12);
    --shadow: rgba(26,24,22,0.12);
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#F5F1EA; --paper:#171A1D; --paper-strong:#201F1D; --teal:#B9D9D2; --teal-soft: rgba(185,217,210,0.14); --line: rgba(245,241,234,0.12); --muted:#C9C0B4; --shadow: rgba(0,0,0,0.28);
    }
  }
  :root{
  --ink:#111827;
  --paper:#F7F8FA;
  --paper-strong:#EEF1F5;

  --accent:#2563EB;
  --accent-soft:#93B4F5;

  --teal:#315A68;
  --teal-soft:#E7F0F3;

  --muted:#64748B;
  --line:rgba(17,24,39,0.11);
  --shadow:rgba(15,23,42,0.12);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F8FAFC;
    --paper:#111827;
    --paper-strong:#1A2332;

    --accent:#60A5FA;
    --accent-soft:#93C5FD;

    --teal:#9CC4D0;
    --teal-soft:rgba(156,196,208,0.12);

    --muted:#AAB5C5;
    --line:rgba(248,250,252,0.12);
    --shadow:rgba(0,0,0,0.28);
  }
}

:root[data-theme="dark"]{
  --ink:#F8FAFC;
  --paper:#111827;
  --paper-strong:#1A2332;

  --accent:#60A5FA;
  --accent-soft:#93C5FD;

  --teal:#9CC4D0;
  --teal-soft:rgba(156,196,208,0.12);

  --muted:#AAB5C5;
  --line:rgba(248,250,252,0.12);
  --shadow:rgba(0,0,0,0.28);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: rgba(37, 115, 235, 0.06);
}

::-webkit-scrollbar-track {
  background: rgba(37, 115, 235, 0.08);
  border-radius: 999px;
  border: 1px solid rgba(37, 115, 235, 0.06);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2573EB 0%, #3a7df2 100%);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(37, 115, 235, 0.12), 0 0 10px rgba(37, 115, 235, 0.22);
  min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1c63d9 0%, #2d78f0 100%);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #2573EB rgba(37, 115, 235, 0.08);
}

html {
  overflow-y: scroll;
}

html.has-custom-scrollbar {
  scrollbar-width: none;
}

html.has-custom-scrollbar::-webkit-scrollbar {
  display: none;
}

.page-scrollbar-track {
  position: fixed;
  top: 8px;
  right: 3px;
  bottom: 8px;
  z-index: 9999;
  width: 14px;
  border: 1px solid rgba(37, 115, 235, 0.12);
  border-radius: 999px;
  background: rgba(37, 115, 235, 0.08);
  cursor: pointer;
  touch-action: none;
}

.page-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 1px;
  width: 10px;
  min-height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, #2573EB 0%, #3a7df2 100%);
  box-shadow: 0 0 0 1px rgba(37, 115, 235, 0.12), 0 0 10px rgba(37, 115, 235, 0.22);
  cursor: grab;
  touch-action: none;
}

.page-scrollbar-thumb:active {
  cursor: grabbing;
}

.page-scrollbar-thumb:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#animationToggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border: 1px solid rgba(37, 115, 235, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #1d4ed8;
  font: 600 10px/1 'Space Grotesk', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 13px;
  box-shadow: 0 10px 22px rgba(37, 115, 235, 0.12);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#animationToggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(37, 115, 235, 0.16);
  background: rgba(255, 255, 255, 0.96);
}

body.animations-disabled *,
body.animations-disabled *::before,
body.animations-disabled *::after {
  animation: none !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
}

body.animations-disabled .card-body {
  max-height: none !important;
}

/* =========================
   BASE / PAGE LAYOUT
   ========================= */
body{
  margin:0;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(37,99,235,0.06),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      var(--paper) 0%,
      #F1F4F8 100%
    );
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:900px;
  margin:0 auto;
  padding:0 24px;
}

/* =========================
   HERO SECTION
   ========================= */
.hero-shell{
  width:100vw;
  margin-left:calc(50% - 50vw);

  background:
    linear-gradient(
      90deg,
      rgba(247,248,250,0.98) 0%,
      rgba(247,248,250,0.96) 52%,
      rgba(238,242,247,0.96) 100%
    );

  border-bottom:1px solid var(--line);
}

/*
.hero{
  min-height:100svh;
  height:auto;

  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,0.92fr);

  align-items:stretch;

  max-width:1440px;
  margin:0 auto;

  padding:0 32px;
}
*/
.hero-copy{
  display:flex;
  align-items:center;

  padding:64px 32px 64px 0;

  min-width:0;
}

.header-text{
  max-width:620px;
  margin-left:80px;
}

.hero-visual{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:100svh;
  height:100svh;

  padding:0 0 0 32px;

  overflow:hidden;
}

.portrait{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  border-radius:0;
}

/* =========================
   SECTION TITLE + BADGE
   ========================= */
.section-heading-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  line-height: 1;
}

.hero-badge {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: translateY(-1px);
  margin-top:-12px
}

.hero-badge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #2573EB 0deg 300deg,
    rgba(255,255,255,0.2) 300deg 360deg
  );
  box-shadow: 0 0 12px rgba(37, 115, 235, 0.35);
  animation: spin-loader 1.2s linear infinite;
  animation-play-state: paused;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
}

.section-heading-row.in-view .hero-badge-ring {
  animation-play-state: running;
}

.hero-badge-orb {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2573EB;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.95),
    0 0 6px rgba(37,115,235,0.4);
}

/* =========================
   TYPOGRAPHY / HEADINGS
   ========================= */
.kicker{
    font-family:'Orbitron',sans-serif;

  color:var(--accent);

  font-size:12px;
  margin-bottom:18px;

  letter-spacing:0.14em;
  text-transform:uppercase;
}

h1{
  font-family:'Orbitron',sans-serif;
  font-weight:700;

  /*
    Kicsit kisebb, hogy kényelmesen kiférjen a négyzetes hero helyen.
  */
  font-size:clamp(24px,0.95vw,38px);

  line-height:1.15;

  margin:0 0 0px;

  letter-spacing:0.05em;

  /*
    Kicsit szélesebb blokkolás, hogy a sorhossz és a magasság komolyabban igazodjon.
  */
  display:inline-block;
  min-height:1.2em;
  white-space:pre-line;
  transition:height 0.15s ease;
}

h1.typewriter::after {
  content:"";
  display:inline-block;
  width:0.11em;
  height:0.9em;
  margin-left:0.08em;
  vertical-align:-0.08em;
  background:var(--accent);
  animation:cursor-blink 0.8s steps(1) infinite;
}

@keyframes cursor-blink {
  50% { opacity:0; }
}

.lede{
  font-size:clamp(16px,1.35vw,20px);

  max-width:39ch;

  color:var(--ink);
  opacity:0.72;

  line-height:1.6;

  margin:0;
}

  @media (max-width: 900px){
    .hero{height:auto; min-height:100vh; grid-template-columns:1fr; padding:0 24px;}
    .hero-copy{padding:64px 0 32px;}
    .header-text{margin-left:0;}
    .hero-visual{height:auto; min-height:56vh; padding:0 0 24px; border-left:none; border-top:1px solid var(--line);}
    .portrait{width:100%; height:56vh; min-height:56vh; border-radius:20px;}
    h1{max-width:100%; letter-spacing:-0.05em;}
    .lede{max-width:100%;}
  }

/* =========================
   CASE STUDIES / CARDS
   ========================= */
  .case-card{
    border:1px solid var(--line); border-radius:18px; padding:26px 24px; margin-bottom:16px;
    background:rgba(255,255,255,0.18); box-shadow:0 10px 24px rgba(23,26,29,0.02);
  }
  .case-card .tag{
    font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--accent); font-weight:700; margin-bottom:10px; letter-spacing:0.12em; text-transform:uppercase;
  }
  .case-card h3{font-family:'orbitron',sans-serif; font-size:19px; font-weight:600; margin:0 0 16px;}
  .case-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;}
  @media (max-width:640px){ .case-grid{grid-template-columns:1fr;} }
  .case-field b{
    display:block; font-family:'Space Grotesk',sans-serif; font-size:12.5px;
    color:var(--muted); margin-bottom:6px; font-weight:600;
  }
  .case-field p{margin:0; font-size:15px; opacity:0.75; font-style:italic;}
  section{padding:56px 0; border-top:1px solid var(--line);}
  h2{font-family:'Orbitron',sans-serif; font-weight:600; font-size:26px; margin:0 0 12px; letter-spacing:-0.04em;}
  .section-intro{max-width:58ch; opacity:0.78; margin-bottom:36px; font-size:16px; line-height:1.7;}

  .card{border:1px solid var(--line); border-radius:16px; margin-bottom:12px; overflow:hidden; background:rgba(255,255,255,0.12);}
  .card-head{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:20px 22px; cursor:pointer; user-select:none;
  }
  .card-head h3{font-family:'Orbitron',sans-serif; font-size:18px; font-weight:600; margin:0;}
  .card-head .idea-num{font-size:13px; color:var(--muted); font-family:'Space Grotesk',sans-serif; flex-shrink:0;}
  .chev{width:18px; height:18px; flex-shrink:0; transition:transform .25s ease; color:var(--accent);}
  .card.open .chev{transform:rotate(45deg);}
  .card-body{
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .card-body-inner{padding:0 22px 24px; font-size:15.5px; opacity:0.85; max-width:60ch;}
  .card.open .card-body{max-height:260px;}

/* =========================
   META BOX / FOOTER
   ========================= */
  .meta-box{
    border-left:3px solid var(--accent); padding:20px 24px; background: linear-gradient(90deg, rgba(37,99,235,0.08), rgba(255,255,255,0));
    font-size:15.5px; border-radius:0 18px 18px 0;
  }
  .meta-box p{margin:0 0 12px;}
  .meta-box p:last-child{margin-bottom:0;}
  .meta-box b{color:var(--teal);}

  footer{padding:64px 0 96px; border-top:1px solid var(--line);}
  footer p{max-width:50ch; opacity:0.8;}
  .cta{
    display:inline-block; margin-top:18px; padding:13px 26px;
    border:1px solid var(--ink); border-radius:999px;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
    color:var(--ink); text-decoration:none; background:linear-gradient(135deg, rgba(212,90,45,0.08), rgba(33,78,72,0.08));
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(23,26,29,0.08); }

  @media (prefers-reduced-motion: reduce){
    .chev, .card-body{transition:none;}
  }




.skills-section{
  box-sizing:border-box;
  width:calc(100% - 32px);
  margin:48px auto;
  padding:36px 32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 16px 40px rgba(15,23,42,0.06);
}

  .skill-list{ display:flex; flex-direction:column; gap:30px; }

.skill-row{ display:flex; flex-direction:column; gap:12px; }

.skill-label{
  font-family:'Space Grotesk',sans-serif;
  font-size:16px; font-weight:600;
  letter-spacing:0.02em;
}

.skill-track{
  position:relative;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.skill-line{
  position:absolute;
  left:0; right:0; top:50%;
  height:3px; transform:translateY(-50%);
  background:var(--line);
  border-radius:999px;
}

.skill-fill{
  position:absolute;
  left:0; top:50%;
  height:3px; transform:translateY(-50%);
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #22D3EE 0%, var(--accent) 55%, #7C3AED 100%);
  box-shadow:0 0 10px rgba(37,99,235,0.45);
  transition:width 2.4s cubic-bezier(.25,.9,.3,1);
  transition-delay:calc(var(--row-delay, 0) * 1s);
}

.skill-row:nth-child(1) .skill-fill{ --row-delay:0.05; }
.skill-row:nth-child(2) .skill-fill{ --row-delay:0.2; }
.skill-row:nth-child(3) .skill-fill{ --row-delay:0.35; }
.skill-row:nth-child(4) .skill-fill{ --row-delay:0.5; }
.skill-row:nth-child(5) .skill-fill{ --row-delay:0.65; }
.skill-row:nth-child(6) .skill-fill{ --row-delay:0.8; }

.skills-section.in-view .skill-row .skill-fill{
  width:calc((var(--level) - 1) / 4 * 100%);
}

.skill-dot{
  position:relative;
  width:22px; height:22px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--line);
  transition:all 1.7s cubic-bezier(.25,.9,.3,1);
  transition-delay:calc(var(--row-delay, 0) * 1s);
  z-index:1;
}

.skills-section.in-view .skill-row[style*="--level"] .skill-dot{
  transition-delay:calc(var(--row-delay, 0) * 1s + var(--i) * 0.14s);
}

.skills-section.in-view .skill-row .skill-dot{
  --passed: clamp(0, calc(var(--level) - 1 - var(--i)), 1);
}

/* dot fill state driven by comparing --i to --level via JS class (simpler & more reliable than pure CSS) */
.skill-dot.filled{
  border-color:transparent;
  background:linear-gradient(135deg, #22D3EE, var(--accent));
  box-shadow:0 0 0 3px rgba(37,99,235,0.15), 0 0 10px rgba(37,99,235,0.5);
}
.skill-dot.active{
  width:26px; height:26px;
  background:linear-gradient(135deg, var(--accent), #7C3AED);
  box-shadow:0 0 0 4px rgba(124,58,237,0.15), 0 0 16px rgba(124,58,237,0.6);
}

@media (prefers-reduced-motion: reduce){
  .skill-fill, .skill-dot{ transition:none; }
}

.skill-description{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:14px;
  font-style:italic;
  font-weight:400;
  color:var(--muted);
  line-height:1.5;
  max-width:60ch;
  margin-top:2px;
}


.skill-label-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.skill-info{
  width:18px; height:18px;
  border-radius:50%;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--accent);
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;
  font-style:italic;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}

.skill-info:hover,
.skill-info:focus-visible{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 10px rgba(37,99,235,0.45);
}
.skill-popup-overlay{
  position:fixed; inset:0;
  background:rgba(10,14,20,0.6);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:10000;
}
.skill-popup-overlay.open{ display:flex; animation:popup-fade .2s ease; }

@keyframes popup-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}

.skill-popup{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,248,250,0.98));
  border:1px solid var(--line);
  border-radius:20px;
  max-width:500px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  padding:26px 28px 28px;
  box-shadow:
    0 24px 60px rgba(15,23,42,0.35),
    0 0 0 1px rgba(37,99,235,0.08),
    0 0 40px rgba(37,99,235,0.18);
  animation:popup-in .25s cubic-bezier(.25,.9,.3,1);
}

@keyframes popup-in{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.skill-popup::before{
  content:"";
  position:absolute; inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg, #22D3EE, var(--accent) 45%, #7C3AED);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.5;
  pointer-events:none;
}

.skill-popup-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}

.skill-popup-badge{
  position:relative;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.skill-popup-ring{
  position:absolute; inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, #2573EB 0deg 300deg, rgba(255,255,255,0.2) 300deg 360deg);
  box-shadow:0 0 10px rgba(37,115,235,0.4);
  animation:spin-loader 1.2s linear infinite;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
}
.skill-popup-orb{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 2px rgba(255,255,255,0.95), 0 0 6px rgba(37,115,235,0.4);
}

.skill-popup-kicker{
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  flex:1;
}

.skill-popup-close{
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.skill-popup-close:hover{ background:var(--line); color:var(--ink); }

.skill-popup-body{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  white-space:pre-line;
  min-height:1.4em;
}

.skill-popup-body.typewriter::after{
  content:"";
  display:inline-block;
  width:0.5em;
  height:1em;
  margin-left:2px;
  vertical-align:-0.15em;
  background:var(--accent);
  animation:cursor-blink 0.8s steps(1) infinite;
}
.skill-popup-body.typewriter.done::after{
  display:none;
}


.intro-split{
  width: min(75vw, 1200px);
  max-width: 1200px;
  margin: 64px auto 0;
  margin-bottom: 64px;
  padding: 56px 52px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.intro-split-text{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.intro-split-text h2{
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:clamp(24px, 3vw, 32px);
  line-height:1.25;
  margin:0;
  color:var(--ink);
}

.intro-split-visual{
  display:flex;
  justify-content:center;
  min-width:0;
}

.intro-portrait-ring{
  position:relative;
  width:min(260px, 40vw);
  height:min(260px, 40vw);
  aspect-ratio:1 / 1;
  flex-shrink:0;
  border-radius:50%;
  padding:5px;
  background:linear-gradient(135deg, #22D3EE, var(--accent) 55%, #7C3AED);
  box-shadow:0 16px 40px rgba(37,99,235,0.22);
}

.intro-portrait-ring::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid var(--line);
  pointer-events:none;
}

.intro-portrait{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--paper);
  object-position:top center;

}

@media (max-width:760px){
  .skills-section{
    width:calc(100% - 8px);
    margin:32px auto;
    padding:28px 20px;
  }

  .intro-split{
    width: min(100%, calc(100% - 24px));
    max-width: none;
    padding: 36px 20px;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
    border-radius: 22px;
  }
  .intro-split-text{ align-items:center; }
  .eyebrow{ justify-content:center; }
  .intro-portrait-ring{
    width: min(220px, 64vw);
    height: min(220px, 64vw);
  }
}

.justify {
  text-align: justify;
  text-justify: inter-word;
}