@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root{
  --bg:#090a0d;
  --fg:#f6f7fb;
  --muted:#b7bfcc;
  --soft:#e1e7f0;
  --accent:#66e6c8;
  --accent-2:#ff9a78;
  --accent-3:#8ab4ff;
  --neon-cyan:#3ffcff;
  --neon-aqua:#7dffe8;
  --neon-green:#72f0aa;
  --neon-blue:#74bdff;
  --neon-violet:#b66cff;
  --surface:rgba(18,21,27,0.72);
  --surface-strong:rgba(246,247,251,0.075);
  --border:rgba(246,247,251,0.15);
  --border-strong:rgba(246,247,251,0.24);
  --shadow:0 22px 60px rgba(0,0,0,0.38);
  --font:"Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:"Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --line:1.74;
  --max:980px;
  --bg-image:url("../images/blackboard.jpg");
}

*{
  box-sizing:border-box;
}

html{
  font-size:19px;
  scroll-behavior:smooth;
}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--fg);
  background:var(--bg);
  line-height:var(--line);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  position:relative;
  isolation:isolate;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--bg-image) center/cover no-repeat;
  opacity:0.31;
  filter:saturate(0.78) contrast(1.05);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,10,13,0.66), rgba(9,10,13,0.93) 72%),
    linear-gradient(135deg, rgba(102,230,200,0.08), transparent 36%, rgba(255,154,120,0.07) 70%, transparent),
    linear-gradient(rgba(246,247,251,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,247,251,0.028) 1px, transparent 1px);
  background-size:auto, auto, 48px 48px, 48px 48px;
  background-repeat:no-repeat, no-repeat, repeat, repeat;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.82), transparent 78%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.82), transparent 78%);
}

::selection{
  color:#07100d;
  background:var(--accent);
}

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
  padding:60px 0 42px;
  position:relative;
  z-index:1;
}

.hero-header{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  align-items:center;
  gap:30px;
  padding:26px 0 44px;
}

#profile-pic{
  width:120px;
  height:120px;
  display:block;
  object-fit:cover;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
  outline:8px solid rgba(246,247,251,0.055);
}

.header-text{
  min-width:0;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1,
h2,
h3{
  font-family:var(--serif);
  font-weight:800;
  line-height:1.12;
  letter-spacing:0;
}

h1{
  max-width:760px;
  margin-bottom:14px;
  font-size:3.15rem;
  color:var(--fg);
  text-shadow:0 0 22px rgba(125,255,232,0.16);
}

h2{
  margin-bottom:0;
  color:#f4ffff;
  font-size:1.04rem;
  line-height:1.35;
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(125,255,232,0.18);
}

h2::after{
  content:"";
  display:block;
  width:44px;
  height:2px;
  margin-top:0.7rem;
  border-radius:999px;
  background:linear-gradient(90deg, #f4ffff, var(--accent));
  box-shadow:0 0 12px rgba(125,255,232,0.28);
}

h3{
  color:var(--neon-aqua);
  text-shadow:0 0 12px rgba(125,255,232,0.18);
}

p{
  margin-bottom:1rem;
}

p:last-child,
li:last-child{
  margin-bottom:0;
}

.muted{
  color:var(--muted);
}

.hero-header .muted{
  max-width:700px;
  margin-bottom:0;
  font-size:1.12rem;
  line-height:1.65;
}

a{
  color:var(--neon-aqua);
  text-decoration:none;
  text-underline-offset:0.22em;
  text-shadow:none;
  transition:color 160ms ease, text-decoration-color 160ms ease, background-color 160ms ease;
}

a:hover{
  color:var(--neon-green);
  text-decoration:underline;
  text-decoration-thickness:1px;
}

a:focus-visible{
  outline:3px solid rgba(114,240,170,0.42);
  outline-offset:4px;
  border-radius:4px;
}

section{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:36px;
  padding:32px 0;
  border-top:1px solid var(--border);
}

section:first-of-type{
  border-top-color:var(--border-strong);
}

.section-body{
  min-width:0;
  color:var(--soft);
  font-size:1.08rem;
}

.section-body > :first-child{
  margin-top:0;
}

.section-body > :last-child{
  margin-bottom:0;
}

ul{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

li{
  position:relative;
  padding:0.82rem 0 0.82rem 1.3rem;
  border-top:1px solid rgba(246,247,251,0.095);
}

li:first-child{
  padding-top:0;
  border-top:0;
}

li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.43rem;
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(135deg, #efffff, var(--accent));
  box-shadow:0 0 14px rgba(125,255,232,0.24);
}

li:first-child::before{
  top:0.6rem;
}

.contact{
  display:grid;
  gap:0.9rem;
}

.contact-icons{
  display:flex;
  flex-wrap:wrap;
  gap:0.78rem;
  align-items:center;
  margin-bottom:0.35rem;
}

.contact-icon{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(246,247,251,0.20);
  border-radius:50%;
  background:rgba(246,247,251,0.075);
  color:var(--neon-aqua);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 18px rgba(125,255,232,0.10);
  text-shadow:none;
  transition:transform 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.contact-icon i{
  font-size:1.25rem;
  line-height:1;
}

.contact-icon.work-email{
  color:#c2c7d0;
  box-shadow:0 0 16px rgba(185,190,200,0.12);
}

.contact-icon.gmail-email{
  color:#ff7b70;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 16px rgba(255,107,95,0.16);
}

.contact-icon.linkedin{
  color:#6fb2ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 16px rgba(88,166,255,0.14);
}

.contact-icon.instagram{
  color:var(--neon-violet);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 16px rgba(182,108,255,0.14);
}

.contact-icon:hover{
  color:var(--neon-green);
  border-color:rgba(114,240,170,0.72);
  background:rgba(114,240,170,0.08);
  box-shadow:
    0 0 10px rgba(114,240,170,0.34),
    0 0 24px rgba(114,240,170,0.18);
  transform:translateY(-2px);
  text-decoration:none;
}

.contact p{
  margin:0;
}

.counter-section{
  display:block;
  padding:24px 0 18px;
}

.flag-counter{
  display:flex;
  justify-content:center;
  padding:10px 0 0;
}

img{
  max-width:100%;
  height:auto;
}

.flag-counter img{
  display:block;
  border:0;
  border-radius:8px;
  box-shadow:0 12px 34px rgba(0,0,0,0.28);
}

footer{
  display:flex;
  justify-content:flex-end;
  padding-top:26px;
  border-top:1px solid var(--border);
}

code,
kbd,
pre{
  font-family:var(--mono);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}

code,
kbd{
  padding:0.15em 0.4em;
}

pre{
  overflow:auto;
  padding:1rem;
}

@media (max-width:760px){
  html{
    font-size:18px;
  }

  .container{
    width:min(var(--max), calc(100% - 32px));
    padding:34px 0 30px;
  }

  .hero-header{
    grid-template-columns:1fr;
    justify-items:start;
    gap:22px;
    padding:18px 0 34px;
  }

  #profile-pic{
    width:100px;
    height:100px;
    outline-width:6px;
  }

  h1{
    font-size:2.45rem;
    line-height:1.08;
  }

  section{
    grid-template-columns:1fr;
    gap:14px;
    padding:25px 0;
  }

  h2{
    font-size:1rem;
  }

  .section-body{
    font-size:1rem;
  }

  li{
    padding-left:1.08rem;
  }

  footer{
    justify-content:flex-start;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:0.001ms !important;
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
  }
}