/* main.css — simplified custom rules + color variables preserved */

/* color variables (kept from your original theme) */
:root{
  --teal: #4DACC2;
  --lightBlue: #A5C9D7;
  --cream: #E0DBC8;
  --lightOrange:#F2B481;
  --napoleon: #404146;
  --gray: #CDD3D1;
  --tealTransparent: rgba(77,172,194,.6);
}

/* defaults */
body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-color: var(--cream);
  color: var(--napoleon);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin: 0;
  padding: 0;
}

/* small utility for container shadows consistent with the new layout */
.shadow-md {
  box-shadow: 0 8px 24px rgba(64,65,70,0.06);
}

/* Icon hover animated replacements */
.linkedin-icon img,
.email-icon img,
.github-icon img {
  display:block;
  transition: transform .25s ease;
}

.linkedin-icon:hover img,
.email-icon:hover img,
.github-icon:hover img {
  transform: scale(1.15);
}

/* simple responsive image helper */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* buttons (minor theme adjustments) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content:center;
  padding: .75rem 1.2rem;
  border-radius: 9999px;
}

.school-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}


/* smaller screens spacing */
@media (max-width: 640px) {
  header nav ul { display:none; }
}

/* make iframe & video cards fit */
iframe { width: 100%; height: 280px; border: 0; }
video { width: 100%; height: auto; }

/* subtle card borders */
.card {
  border: 1px solid rgba(64,65,70,0.06);
  border-radius: 12px;
  background: white;
  padding: 1rem;
}

/* Typing Effect */
.typewriter {
  width: 15ch; 
  overflow: hidden;
  border-right: 3px solid var(--napoleon);
  white-space: nowrap;
  animation: typing 3s steps(15), blink .7s step-end infinite;
}

/* typing keyframes */
@keyframes typing {
  from { width: 0; }
  to { width: 15ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* a11y focus */
a:focus, button:focus {
  outline: 3px solid rgba(77,172,194,0.18);
  outline-offset: 2px;
}

/* small utilities used in pages */
.kicker { font-size: .9rem; color: #6b6b6b; letter-spacing: .02em; }
section { margin-top: 1.25rem; }

.gallery img { border-style: outset; }
.resume-section { display:flex; gap: 1rem; align-items:flex-start; }

/* timeline from original CSS (kept) */
.timeline { display:flex; flex-direction:column; gap:20px; padding-left:40px; position:relative; }
.timeline::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background:#ddd; z-index:-1; }

/* keep other small baseline rules to avoid layout jumps */
p, li { color: var(--napoleon); line-height:1.45; }
h1, h2, h3, h4 { font-family: "DM Sans", "Radley", sans-serif; color:var(--napoleon); margin:0; }