:root {
  /* M3 Color tokens - Light theme */
  --md-sys-color-primary: #006495;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cbe6ff;
  --md-sys-color-on-primary-container: #001e31;
  --md-sys-color-surface: #fdfcff;
  --md-sys-color-on-surface: #1a1c1e;
  --md-sys-color-surface-variant: #dfe2eb;
  --md-sys-color-outline: #74777f;
  
  /* Typography */
  --md-sys-typescale-display-large-size: 3.5rem;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-medium-size: 0.875rem;
  
  /* Spacing */
  --md-sys-spacing-track: 4px;
  --spacing-small: calc(var(--md-sys-spacing-track) * 4);
  --spacing-medium: calc(var(--md-sys-spacing-track) * 6);
  --spacing-large: calc(var(--md-sys-spacing-track) * 8);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  min-height: 100vh;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-large);
}

.header {
  margin-bottom: var(--spacing-large);
}

.portfolio-link {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-small);
  font-weight: 500;
  transition: color 0.2s ease;
}

.portfolio-link:hover {
  color: var(--md-sys-color-primary-container);
}

.h1-container {
  margin: var(--spacing-large) 0;
}

h1 {
  font-size: var(--md-sys-typescale-display-large-size);
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--spacing-medium);
  line-height: 1.2;
}

.sub {
  font-size: var(--md-sys-typescale-headline-medium-size);
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
  margin: var(--spacing-large) 0 var(--spacing-medium);
}

p {
  font-size: var(--md-sys-typescale-body-large-size);
  margin-bottom: var(--spacing-medium);
  color: var(--md-sys-color-on-surface);
}

/* List styling */
p br {
  line-height: 2;
}

/* Button styling */
.modern-button {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  padding: var(--spacing-medium) var(--spacing-large);
  border-radius: 20px;
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: var(--spacing-large);
}

.modern-button:hover {
  background-color: var(--md-sys-color-primary);
  opacity: 0.9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

footer {
  text-align: center;
  padding: var(--spacing-large) 0;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  border-top: 1px solid var(--md-sys-color-outline);
  margin-top: var(--spacing-large);
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --md-sys-typescale-display-large-size: 2.5rem;
    --md-sys-typescale-headline-medium-size: 1.5rem;
  }

  .container {
    padding: var(--spacing-medium);
  }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #8dcdff;
    --md-sys-color-on-primary: #003351;
    --md-sys-color-primary-container: #004b74;
    --md-sys-color-on-primary-container: #cbe6ff;
    --md-sys-color-surface: #1a1c1e;
    --md-sys-color-on-surface: #e2e2e5;
    --md-sys-color-surface-variant: #43474e;
    --md-sys-color-outline: #8d9199;
  }
}

/* Elevation and Surface treatments */
.content {
  background-color: var(--md-sys-color-surface);
  border-radius: 28px;
  padding: var(--spacing-large);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Accessibility improvements */
:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

::selection {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.material-link {
    color: #2196F3;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.material-link:hover {
    color: #1976D2;
}

.material-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.material-link:hover::after {
    transform: scaleX(1);
}