styles.css

@font-face {
    font-family: 'heading';
    src: url('res/fonts/heading.ttf');
    font-display: swap;  /* Optimize font loading */
  }
  
    body {
      margin: 0;
      font-family: monospace;
      background-color: black;
      color: white;
    }
    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
    }
    .header {
      text-align: center;
      padding: 40px 20px;
    }
    .header h1 {
      font-size: 2.5rem;
      color: #f87171;
      margin-bottom: 10px;
      font-family: 'heading';
    }
    .header h2 {
      color: #9ca3af;
      font-weight: normal;
      font-size: 1.125rem;
    }
    .social-links {
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .social-links a {
      text-align: center;
      padding: 16px;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      transition: background-color 0.2s;
      text-decoration: none;
      color: white;
    }
    .social-links a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    .projects {
      margin-bottom: 40px;
    }
    .projects h2 {
      font-size: 1.5rem;
      margin-bottom: 24px;
      color: #f87171;
    }
    .projects .project-card {
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 20px;
      transition: background-color 0.2s;
      margin-bottom: 20px;
      text-decoration: none;
      color: white;
      display: block;
      padding-top: 1px;
    }
    .projects .project-card:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    .projects .project-card h3 {
      font-size: 1.25rem;
      margin-bottom: 12px;
      color: #f87171;
      transition: color 0.2s;
    }
    .projects .project-card:hover h3 {
      color: #fca5a5;
    }
    .projects .project-card p {
      color: #9ca3af;
      font-size: 0.875rem;
      margin-bottom: 16px;
    }
    .projects .project-card .view-project {
      font-size: 0.875rem;
      color: #f87171;
      transition: color 0.2s;
    }
    .projects .project-card:hover .view-project {
      color: #fca5a5;
    }
    .footer {
      border-top: 1px solid #374151;
      padding: 20px;
      text-align: center;
      color: #9ca3af;
    }