/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Load the Otto font */
  @font-face {
    font-family: 'Otto';
    src: url('otto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  /* Load Angstridden font for Daisy */
@font-face {
    font-family: 'Angstridden';
    src: url('angstridden.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Load Madelican font for Niamh */
@font-face {
    font-family: 'Madelican';
    src: url('madelican.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


  
  /* Body styling */
  body {
    font-family: 'Georgia', serif;
    background-color: #0a0a0a; /* dark background */
    color: #f0f0f0; /* light text */
    text-align: center;
    padding: 40px;
  }
  
  /* Header */
  header {
    margin-bottom: 40px;
  }
  
  h1 {
    font-size: 3em;
    color: #b00; /* deep red */
    text-shadow: 0 0 10px rgba(255,0,0,0.6);
  }
  
  p {
    margin-top: 10px;
    font-size: 1.2em;
    color: #ccc;
  }
  
  /* Character links container */
  .character-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 300px;
    margin: 0 auto;
  }
  
  /* Generic character link styling */
  .character-links a {
    text-decoration: none;
    color: #eee;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    transition: all 0.3s ease;
  
    width: 100%;           
    height: 80px;          /* fixed box height */
    display: flex;         
    justify-content: center; 
    padding: 0 15px;       
    box-sizing: border-box;
  
      /* default font size */
    overflow: hidden;       /* prevents text from stretching box */
  }
  
  /* Hover effect for all links */
  .character-links a:hover {
    background: #b00;
    color: white;
    box-shadow: 0 0 15px rgba(255,0,0,0.7);
  }
  
  /* Specific character button styles */
  
  /* Claire with Otto font and bigger font size */
  .claire-btn {
    font-family: 'Otto', serif;
    font-size: 3.5em;        /* bigger than default, box still 80px */
    align-items: center;   
    letter-spacing: 0.01em;
  }
  
  /* Daisy example: smaller font, keep box same height */
  .daisy-btn {
    font-family: 'Angstridden', serif;
    font-size: 3.2em;
    align-items: center;   
    letter-spacing: 0.05em; /* adjust this value to spread letters more or less */
  }
  
  /* Niamh example */
  .niamh-btn {
    font-family: 'Madelican', serif;
    font-size: 2.2em;
  }
  
  /* January example */
  .january-btn {
    font-family: 'Georgia', serif;
    font-size: 1.2em;
  }
  
  /* Veronica example */
  .veronica-btn {
    font-family: 'Georgia', serif;
    font-size: 1.4em;
  }
  
  /* Footer */
  footer {
    margin-top: 60px;
    font-size: 0.9em;
    color: #777;
  }