/* CSS Variables for Reusability */
:root {
  --font-primary: 'NTR', 'Arial', sans-serif;
  --font-secondary: 'Schoolbell', cursive;
  --color-primary: #ff3c9d;
  --color-secondary: #815981;
  --color-background: #fffbcc;
  --color-border: #ffb6c1;
  --color-heading: #d271ff;
  --box-shadow: 0 4px 15px rgba(77, 0, 83, 0.4);
  --page-width: 900px;
  --border-radius: 15px;
  --font-size-base: 18pt;
  --font-size-heading: 3.5rem;
  --font-size-subheading: 1.9rem;
  --font-size-body: 1rem;
}


/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  background-color: var(--color-background);
  padding: 40px 20px 0 20px;
  background-image: url(background.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
}

/* Link Styles */
a {
  text-decoration: none;
  color: var(--color-primary);
}

/* Header Styles */
header {
  padding: 20px 15px;
  max-width: var(--page-width);
  margin: 40px auto;
  text-align: center;
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  /* border: 3px dashed var(--color-border); */
}

header h1 {
  font-size: var(--font-size-heading);
  color: var(--color-primary);
  text-shadow: 2px 2px #ffaee3;
  font-family: var(--font-secondary);
  font-weight: 400;
}


/* Main Content Styles */
main {
  margin: 40px auto;
  max-width: var(--page-width);
  background: #fff;
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  /* border: 3px dashed var(--color-border); */
}

section {
  margin-bottom: 20px;
}

section h2 {
  font-size: var(--font-size-subheading);
  font-family: var(--font-secondary);
  text-align: center;
  margin-bottom: 10px;
  color: var(--color-heading);
}

p {
  font-size: var(--font-size-body);
  line-height: 1.8;
  margin: 10px 0 20px 0;
}

/* List Styles */
ul {
  list-style-type: disc;
  font-size: var(--font-size-body);
  margin-left: 30px;
}

li {
  margin-bottom: 15px;
}

/* Footer Styles */
footer {
  text-align: center;
  margin: 40px auto;
  max-width: var(--page-width);
  padding: 20px;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  /* border: 3px dashed var(--color-border); */
}

footer p {
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  header {
    padding: 5px 5px;
    margin: 10px auto;
  }
  header h1 {
    font-size: 2rem; /* Adjust to a smaller size */
  }
  section h2 {
    font-size: 1.2rem; /* Adjust to a smaller size */
  }
  main {
    padding: 20px;
  }
}