* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* @font-face {
    font-family: "American Typewriter";
    src: url("fonts/AmericanTypewriter.woff2") format("woff2"), url("fonts/AmericanTypewriter.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "American Typewriter";
    src: url("fonts/AmericanTypewriter-Bold.woff2") format("woff2"), url("fonts/AmericanTypewriter-Bold.woff")
      format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  } */
@font-face {
  font-family: "American Typewriter";
  src: url(./fonts/American\ Typewriter\ Regular.ttf);
}
@font-face {
  font-family: "American Typewriter Bold";
  src: url(./fonts/American\ Typewriter\ Bold.ttf);
  font-weight: bold;
}

body {
  /* font-family: "American Typewriter", "Courier New", Courier, monospace; */
  font-weight: normal; /* Regular weight for body text */
  line-height: 1.6;
  color: #000;
  background-color: #fff;
  /* max-width: 1200px; */
  margin: 0 auto;
  /* padding: 20px; */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "American Typewriter";
}

#content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  grid-template-rows: repeat(3, minmax(200px, auto));
  /* grid-auto-columns: minmax(100px, auto); */
  /* max-width: 960px; */
  /* margin: 0 auto; */
  /* grid-gap: 20px; */
  /* column-gap: 50px; */

  width: 100%;
  grid-template-areas:
    "header nav nav nav aside"
    ".   intro intro intro ."
    ".   intro intro intro .";

  max-width: 1600px;
  margin: 0 auto;
}

/* #content div{ */
/* border: 1px solid black; */
/* padding: 10px; */
/* background-color: slateblue; */
/* } */
#content:nth-child(3) {
  padding: 0px;
}
.one {
  grid-area: header;
  padding: 11px 0px 0px 11px;
}

.one a {
  font-family: "American Typewriter", "Courier New", Courier, monospace;
  /* font-weight: bold; */
  /* font-size: 16px; Increased from 14px to 16px */
  /* text-transform: uppercase; */
  letter-spacing: 0.03em; /* Increased letter spacing */
  /* text-decoration: none; */
  color: #000000; /* Ensured pure black */
  /* display: inline-block; */
}

.two {
  grid-area: nav;
  /* display: flex; */
  align-items: center;
}

.three {
  grid-area: aside;
  padding: 11px 11px 0px 0px;
}
.three a {
  text-align: right;
}
.four {
  grid-area: intro;
  /* display: flex;
  flex-direction: column;
  align-items: left;
   */
}

.two,
.four {
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
}

/* .three,.four{
  padding: 12px 0px 0px 12px;
  padding-right: 0px;
  } */

/* footer{
  grid-area: footer;
  background: #333 !important;
} */
ul {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
  font-weight: normal;
}
.three {
  text-align: right;
}
.text {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: light;
  font-size: 18px;
}
.tag {
  font-size: 14px;
}
a:hover {
  text-decoration: none;
  color: red;
}
.main-nav a:hover {
  text-decoration: underline;
  text-decoration-color: red;
}
/* .main-nav li {
margin-bottom: 5px;
} */

footer {
  /* background-color: blue; */
  margin-top: auto;
}
.footer-container {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  /* padding-top: 20px; */
}
h1,
h2,
h3 {
  /* font-size: 2.0rem; */
  /* font-family: "American Typewriter Bold"; */
  font-weight: bold;
  margin: 0 0 0.05rem;
}
h3 {
  font-weight: 800;
  margin: 0 0 5px;
}
.header-a,
.one {
  /* font-size:1.8rem; */
  font-size: 1.125rem;
  
}
.two a {
  font-size: 1.125rem;
}
/* .one,.two,.three,.four{
      padding: 12px 0px 0px 12px;
      padding-right: 0px;
    } */
p {
  padding-bottom: 20px;
}

/* grid-gap: 30px; */
h2 {
  /* font-family: "American Typewriter Bold"; */
  font-weight: bold;
}
@media screen and (max-width: 880px) {
  #content {
    grid-template-areas:
      "header header header aside aside"
      "nav nav nav nav nav"
      "intro intro intro intro intro";
  }
}
.two,
.three {
  flex: 1;
}
.three {
  padding-right: 12px;
}
.four {
  /* border: 1px solid red; */
  padding: 60px 0px;
}
.chat-button {
  padding-right: 12px;
}
.copyright {
  padding-left: 12px;
}
.header-container {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  width: 100%;
}
.header-a {
  padding: 0px;
}
.two{
  padding: 11px 12px 0px 0px;
}
.four ul{
  font-size: 18px;
}