/* starting variables for the site - Vercel inspired */
:root {
  --white: #ffffff;
  --platinum: #fafafa;
  --windsurfing: #0070f3;
  --marina: #0066cc;
  --gray: #666666;
  --onyx: #000000;
  --charcoal: #111111;
  --corners: 8px;
  --corners-sm: 4px;
  --base-font-size: 1rem;
  
  /* Vercel color system */
  --vercel-bg: #ffffff;
  --vercel-fg: #000000;
  --vercel-gray-50: #fafafa;
  --vercel-gray-100: #f4f4f5;
  --vercel-gray-200: #e4e4e7;
  --vercel-gray-300: #d4d4d8;
  --vercel-gray-400: #a1a1aa;
  --vercel-gray-500: #71717a;
  --vercel-gray-600: #52525b;
  --vercel-gray-700: #3f3f46;
  --vercel-gray-800: #27272a;
  --vercel-gray-900: #18181b;
  --vercel-accent: #0070f3;
  --vercel-success: #00a86b;
  --vercel-error: #e60000;
  --vercel-warning: #f5a623;
  
  /* Light/Dark mode variables */
  --ld-bkgd: light-dark(var(--vercel-bg), var(--vercel-gray-900));
  --ld-text: light-dark(var(--vercel-fg), var(--white));
  --ld-projects: light-dark(var(--vercel-gray-50), var(--vercel-gray-800));
  --ld-blue: light-dark(var(--vercel-accent), var(--vercel-accent));
  --ld-border: light-dark(var(--vercel-gray-200), var(--vercel-gray-700));
  --ld-muted: light-dark(var(--vercel-gray-500), var(--vercel-gray-400));
}
/* set the box sizing to border-box for layouts */
html {
  box-sizing: border-box;
  color-scheme: light dark;
}
html:has(#mode-switcher #light:checked) {
  color-scheme: light;
}

html:has(#mode-switcher #dark:checked) {
  color-scheme: dark;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}
/* Basic page set to our font size and font family. Link to the font family in CodePen under Settings - CSS - External stylesheets and pens. */
body {
  font-size: var(--base-font-size);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--ld-bkgd);
  color: var(--ld-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.badge {
  display: inline-block;
  background: var(--vercel-gray-100);
  color: var(--vercel-gray-700);
  border: 1px solid var(--ld-border);
  padding: 0.375rem 0.75rem;
  border-radius: var(--corners);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.badge:hover {
  background: var(--vercel-gray-200);
  border-color: var(--vercel-gray-300);
}

        .hero-meta {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
            font-size: 0.875rem;
        }

        .hero-meta span {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--ld-projects);
            border: 1px solid var(--ld-border);
            padding: 0.5rem 1rem;
            border-radius: var(--corners);
            color: var(--ld-muted);
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .hero-meta span:hover {
            border-color: var(--vercel-accent);
            color: var(--ld-text);
            box-shadow: 0 2px 8px rgba(0, 112, 243, 0.1);
        }

        .hero-meta span:first-child::before {
            content: "📍";
            font-size: 1rem;
        }

        .hero-meta span:last-child::before {
            content: "✅";
            font-size: 1rem;
        }
        
        .hero-meta span:last-child {
            background: rgba(0, 168, 107, 0.1);
            border-color: var(--vercel-success);
            color: var(--vercel-success);
        }
        .hero-description {
            margin-bottom: 2rem;
        }

        .hero-description p {
            margin-bottom: 1rem;
        }

        .hero-description p:first-child {
            font-size: 1.125rem;
            font-weight: 500;
        }

        /* Tech Stack */
        .tech-stack {
            margin-bottom: 0.2rem;
        }

        .tech-stack h3 {
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tech-tag {
            background: var(--ld-projects);
            border: 1px solid var(--ld-border);
            padding: 0.375rem 0.75rem;
            border-radius: var(--corners);
            font-size: 0.875rem;
            color: var(--ld-muted);
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .tech-tag:hover {
            border-color: var(--vercel-accent);
            color: var(--vercel-accent);
        }

/* make sure images don't exceed the width of the window */
img {
  max-width: 100%;
  border-radius: var(--corners);
}
h1 {
  font-size: calc(var(--base-font-size) * 2.9);
  margin: 0;
  background: linear-gradient(135deg, var(--ld-blue) 0%, #4f46e5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
}
h2 {
  font-size: var(--base-font-size);
  text-transform: uppercase;
  color: var(--ld-blue);
  letter-spacing: 0.25em;
  margin: 0;
}
h3 {
  margin: 0;
}
p {
  line-height: 1.5;
}
a {
  color: var(--ld-blue);
}
a:hover {
  color: var(--marina);
}
/* svg and icon styling */
.icons {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
}

ul svg,
.icons i {
  width: 36px;
  height: 36px;
}

.social {
  fill: var(--ld-blue);
  color: var(--ld-blue);
  stroke: var(--ld-blue);
  transition: all 0.2s ease;
}

.social:hover {
  fill: var(--marina);
  color: var(--marina);
  stroke: var(--marina);
  transform: translateY(-2px);
}
/* mobile layout for bio */
.main-article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
}
.main-article img {
  object-fit: cover;
  object-position: top;
  height: 175px;
  width: 300px;
  overflow: hidden;
  margin: 0 auto;
}
/* projects */
main {
  margin-top: 5rem;
  margin-bottom: 3rem;
  text-align: center;
}
.projects {
  display: flex;
  flex-flow: column nowrap;
  gap: 3rem;
}
.project {
  background-color: var(--ld-projects);
  padding: 2rem;
  border-radius: var(--corners);
  border: 1px solid var(--ld-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.project:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--vercel-gray-300);
}
.project ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1rem;
}
.project li {
  background: var(--vercel-gray-100);
  color: var(--vercel-gray-700);
  border: 1px solid var(--ld-border);
  padding: 0.375rem 0.75rem;
  border-radius: var(--corners);
  font-size: calc(var(--base-font-size) * 0.875);
  font-weight: 500;
  transition: all 0.2s ease;
}

.project li:hover {
  background: var(--vercel-accent);
  color: white;
  border-color: var(--vercel-accent);
}
.project img {
  grid-row: 1/2;
}
.img-border {
  border: 1px solid var(--onyx);
}

/* footer */
footer {
  text-align: center;
}
.footer-text {
  color: var(--ld-text);
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.footer-text h3 {
  font-size: calc(var(--base-font-size) * 0.85);
}
.footer-text-box ul {
  font-size: calc(var(--base-font-size) * 0.85);
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer-text-box li {
  line-height: 2;
}
.h2-footer {
  margin: 1rem 0;
}
.footer-text .social {
  fill: var(--ebony);
}
.footer-text .social:hover {
  fill: var(--marina);
}
fieldset:focus-within {
  border: none;
   outline: none;
}

@layer switch {
.radio-switch {
	border: none;
	padding: 0;
	white-space: nowrap;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
  padding: 0.5rem;
  position: relative;
}

.radio-switch legend {
	font-size: 2px;
	opacity: 0;
	position: absolute;
}

.radio-switch label {
	display: inline-block;
	line-height: 2;
  font-size: 0.875rem;
	position: relative;
	z-index: 2;
	font-weight: 500;
	color: var(--ld-muted);
	transition: color 0.2s ease;
	cursor: pointer;
	padding: 0.25rem 0.75rem;
	border-radius: calc(var(--corners) - 2px);
}

.radio-switch input {
	opacity: 0;
	position: absolute;
}

.radio-switch input:checked + label {
	color: var(--ld-text);
	font-weight: 600;
}

.radio-switch label:first-of-type {
	padding-right: 5em;
}

.radio-switch label:last-child {
	margin-left: -4.25em;
	padding-left: 5em;
}

.radio-switch:focus-within {
	outline: 2px solid var(--vercel-accent);
	outline-offset: 2px;
}

.radio-switch label:first-of-type:before,
.radio-switch label:first-of-type:after {
	content: "";
	height: 2em;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	vertical-align: middle;
	border: none;
}

.radio-switch label:first-of-type:before {
	background: var(--vercel-bg);
	border-radius: 100%;
	position: absolute;
	right: -.075em;
	transform: translateX(0em);
	transition: transform .2s ease-in-out;
	width: 2em;
	z-index: 2;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.radio-switch label:first-of-type:after {
	background: var(--vercel-gray-300);
	border-radius: 1em;
	margin: 0 1em;
	transition: background .2s ease-in-out;
	width: 4em;
}

.radio-switch input:first-of-type:checked ~ label:first-of-type:after {
	background: var(--vercel-accent);
}

.radio-switch input:first-of-type:checked ~ label:first-of-type:before {
	transform: translateX(-2em);
}

.radio-switch input:last-of-type:checked ~ label:last-of-type {
	z-index: 1;
}

/*
  Modern typography
*/
body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
}
@media (min-width: 750px) {
  :root {
    --base-font-size: 1.125rem;
  }
  .hero-meta {
    justify-content: flex-start;
  }
  h1 {
    margin-left: -3px;
  }
  .wrapper {
    padding: 2rem;
  }
  .main-article {
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: 1fr;
    align-items: center;
    text-align: left;
  }
  .main-article img {
    max-height: 400px;
    margin: 0 0 0 auto;
    object-fit: contain;
    object-position: none;
    height: auto;
    width: auto;
    overflow: auto;
  }
  .icons {
    justify-content: flex-start;
  }
  footer {
    text-align: left;
  }
  .footer-text {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-text .icons {
    grid-column: 1/4;
  }
}
@media (min-width: 850px) {
  main {
    text-align: left;
  }
  .project {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .project img {
    grid-row: auto;
  }
  .project ul {
    justify-content: flex-start;
  }
}