{{ define "main" }}
  <div class="landing-page">
      <div class="hero-section">
        <h1>Welcome to {{ .Site.Title }}</h1>
		{{ .Content }}
        <div class="call-to-action">
          <a href="/blog" class="button">View Blog →</a>
        </div>
      </div>
  </div>
  <style>
    .landing-page {
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
      padding-bottom: 2rem;
      padding-left: 2rem;
      padding-right: 2rem;

    }
    
    .hero-section {
      margin: 4rem 0;
      text-align: justify;
    }
    
    .hero-section h1 {
      font-size: 3rem;
      margin-bottom: 3rem;
      color: var(--accent);
      text-align: center;
    }
    
    .hero-subtitle {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.8;
    }
    
    .hero-content {
      margin: 3rem 0;
      font-size: 1.1rem;
      line-height: 1.6;
    }
    
    .call-to-action {
      margin-top: 3rem;
      text-align: center;
    }
    
    .call-to-action .button {
      display: inline-block;
      padding: 1rem 2rem;
      background: var(--accent);
      color: var(--background);
      text-decoration: none;
      border-radius: 4px;
      font-weight: bold;
      transition: all 0.2s ease;
    }
    
    .call-to-action .button:hover {
      background: var(--accent);
      opacity: 0.8;
      transform: translateY(-2px);
    }
    
    @media (max-width: 600px) {
      .hero-section h1 {
        font-size: 2rem;
      }
      
      .hero-subtitle {
        font-size: 1rem;
      }
      
      .landing-page {
        padding: 1rem;
      }
    }
  </style>
{{ end }}