/* CSS Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Enable light color scheme */
:root {
  color-scheme: light;
}

/* Body base styles */
body {
  background-color: #EAECEF;
  color: #0F172A;
  font-family: "Courier New", Courier, "Lucida Console", Monaco, monospace;
  min-height: 100svh;
  margin: 0;
  padding: 0;
}

/* Logo styling */
.logo {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 35px;
  right: 40px;
}

/* Main container */
main {
  max-width: 820px;
  margin: 0 auto;
  padding: 160px 20px 60px;
}

/* Letter container */
.letter {
  background-color: #F7F7F7;
  padding: 60px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: left;
  font-size: 16px;
  line-height: 1.8;
  position: relative;
  word-break: break-word;
}

/* Mobile styles */
@media (max-width: 768px) {
  /* Adjust main container padding for mobile */
  main {
    padding: 30px 16px 40px;
  }
  
  /* Letter container adjustments */
  .letter {
    padding: 40px 24px;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }
  
  /* Logo adjustments */
  .logo {
    width: 35px;
    height: 35px;
    top: 20px;
    right: 20px;
  }
  
  /* Typography adjustments */
  .letter {
    font-size: 15px;
    line-height: 1.7;
  }
  
  .greeting {
    font-size: 16px;
    margin-bottom: 16px;
  }
  
  /* Paragraph spacing */
  .letter p {
    margin-bottom: 16px;
  }
  
  /* Contact section */
  .contact {
    margin-top: 32px;
    font-size: 13px;
  }
}

/* Extra small devices */
@media (max-width: 400px) {
  main {
    padding: 30px 12px 30px;
  }
  
  .letter {
    padding: 32px 20px;
  }
  
  .logo {
    width: 30px;
    height: 30px;
    top: 16px;
    right: 16px;
  }
}

/* Greeting */
.greeting {
  margin-bottom: 20px;
}

/* Opening paragraph */
.opening {
  font-weight: 500;
  margin-bottom: 20px;
}

/* Regular paragraphs */
.letter p {
  margin-bottom: 20px;
}

.letter p:last-child {
  margin-bottom: 0;
}

/* Signature line */
.signature {
  margin-top: 20px;
  font-style: normal;
  opacity: 0.9;
}

/* Contact section */
.contact {
  margin-top: 40px;
  font-size: 14px;
  opacity: 0.8;
}

/* Links */
.letter a {
  color: #2563EB;
  text-decoration: none;
  font-weight: 500;
}

.letter a:hover {
  text-decoration: underline;
}