* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Special Elite', 'Times New Roman', Times, serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fdf6e3;
}

a {
  color: #ff50c5;  /* Example: pink */
  text-decoration: none;
}

a:hover,
a:focus {
  color: #FF1493;  /* Darker pink on hover/focus */
  text-decoration: underline;
}

h2 {
  color: white;
}

header {
  background: url(images/paper014.png);
  color: white;
  padding: 1rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headerimg {
  width: 90%;
  display: block;
  margin: auto;
  transform: rotate(0.003turn);
}

#menu-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  display: none;
  margin: 1rem auto;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#menu-toggle.open {
  transform: rotate(90deg);
}

nav.mobile-nav {
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

nav.mobile-nav.open {
  display: block;
  opacity: 1;
  max-height: 500px; /* just enough space for menu */
}

nav.mobile-nav {
  position: relative; /* needed for pseudo-elements */
  background: #ff50c5;
  color: white;
  padding: 1rem;
  display: none;
  overflow: visible;
}

nav.mobile-nav::before,
nav.mobile-nav::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px; /* adjust as needed */
  background-color: var(--torn-background-color);
  z-index: 1;
  pointer-events: none;
}

nav.mobile-nav::before {
  top: 0;
  clip-path: var(--torn-top-clip-path);
  -webkit-clip-path: var(--torn-top-clip-path);
  transform: rotate(180deg); /* optional flip */
  background-color: #ff50c5!important;
}

nav.mobile-nav::after {
  bottom: 0;
  clip-path: var(--torn-bottom-clip-path);
  -webkit-clip-path: var(--torn-bottom-clip-path);
}


/* Responsive visibility */
@media (max-width: 768px) {
  #menu-toggle {
    display: block;
  }
}


nav {
  background: #ff50c5;
  color: white;
  padding: 1rem;
  display: none; 
}

nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}

nav ul li {
  margin: 0.5rem 0;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav.open {
  display: block;
}

.sticky {
  display: none;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
}

main {
  flex: 1;
  padding: 1rem;
}

aside {
  background: url(images/paper014.png);
  padding: 1rem;
  width: 250px;
  background-repeat: repeat-y;
}

footer {
  background: url(images/paper014.png);
  color: white;
  text-align: center;
  padding: 1rem;
}

.faq-section {
  color: black;
  font-family: 'Special Elite', 'Times New Roman', serif;
  position: relative;
}

.faq-section::after {
  content: "";
  display: block;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: rotate(180deg);
}


.faq-section h4 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #111;
  text-shadow: 1px 1px #ccc;
}

.faq-section ul.help {
  list-style: none;
  padding: 0;
}

.faq-section ul.help li {
  background-size: 100% 100%;  /* Stretch image to fill entire list item */
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  color: #ff50c5;   
  border-radius: 8px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  height: 65px;
  
  display: flex;              /* enable flexbox */
  justify-content: center;    /* center horizontally */
  align-items: center;        /* center vertically */
  text-align: center; 
  transition: transform 0.3s ease;
}

.faq-section ul.help li:nth-child(even) {
  transform: rotate(1.5deg);
}

.faq-section ul.help li:nth-child(3n + 1) {
  background-image: url('images/list-bg-1.png');
}

.faq-section ul.help li:nth-child(3n + 2) {
  background-image: url('images/list-bg-2.png');
}

.faq-section ul.help li:nth-child(3n) {
  background-image: url('images/list-bg-1.png');
}

.faq-section ul.help li:nth-child(odd) {
  transform: rotate(.5deg);
}

.faq-section ul.help li a {
  text-decoration: none;
  color: white;  /* Or pink, or any color that contrasts */
  font-weight: bold;
}


main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}

.main-content {
  display: flex;
  flex-direction: column;   /* stack paragraphs vertically */
  gap: 1.5rem;              /* space between paragraphs */
  max-width: 700px;         /* limit width for readability */
  margin: 2rem auto;        /* center horizontally with margin */
  padding: 0 1rem;          /* some side padding */
}


.goh-profile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 800px;
}

.gohimg {
  width: 50%;
  height: auto;
  border-radius: 8px;
}

.goh-text {
  flex: 1;
}

@media (max-width: 768px) {
  .goh-profile {
    flex-direction: column;
    text-align: center;
  }

  .goh-text {
    text-align: center;
  }
}



/* Optional blockquote (answers) styling */
blockquote {
  background: #fff;
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(-0.5deg);
  border-radius: 4px;
}

.centerimg {
	  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gohimg {
display: inline-block;
  padding: 5px;
}
.contact-list {
  display: grid;
  grid-template-columns: 1fr; /* 1 column by default */
  gap: 1rem;
  margin: 0 auto;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

.contact-label {
  flex: 1;
  margin: 0;
  font-weight: bold;
}

.contact-email {
  flex: 1;
  margin: 0;
  text-align: right;
}

.contact-email a {
  text-decoration: none;
}

.contact-email a:hover {
  text-decoration: underline;
}

/* Wide screens: 2 columns */
@media (min-width: 600px) {
  .contact-list {
    grid-template-columns: 1fr 1fr; /* two equal columns */
  }
}


/* Torn effects */


/*
 Torn left edge banner FOR SMALL ITEMS such as sidebars!

 License: GPL 3.0
 License URL: https://www.gnu.org/licenses/gpl-3.0.en.html

 Structure:
 <div class="torn_container torn_left torn_right">
	<div></div>
	<div>Torn Edge Banner</div>
 </div>
*/

body {
	--torn-shadow-offset-x: -2px;
	--torn-shadow-offset-y: 2px;
	--torn-shadow-background-color: rgba(0, 0, 0, 0.25);
	--torn-background-color: #FFFFF6;
	--torn-left-width: 3px;
	--torn-right-width: 3px;
 --torn-top-clip-path: polygon(0% 100%, 7% 84%, 14% 97%, 21% 78%, 29% 100%, 36% 57%, 43% 71%, 50% 49%, 57% 26%, 64% 73%, 71% 99%, 79% 86%, 86% 92%, 93% 41%, 100% 6%, 100% -1px, 0% -1px);
  --torn-bottom-clip-path: polygon(0% 0%, 7% 16%, 14% 3%, 21% 22%, 29% 0%, 36% 43%, 43% 29%, 50% 51%, 57% 74%, 64% 27%, 71% 1%, 79% 14%, 86% 8%, 93% 59%, 100% 94%, 100% 101%, 0% 101%);
}

/* Default clip paths (odd items) */
.torn_containerTINY:nth-of-type(odd) {
	--torn-left-clip-path: polygon(94% 0%, 16% 7%, 27% 14%, 18% 21%, 0% 29%, 43% 36%, 29% 43%, 51% 50%, 74% 57%, 27% 64%, 1% 71%, 14% 79%, 8% 86%, 59% 93%, 94% 100%, calc(100% + 1px) 100%, calc(100% + 1px) 0%);
	--torn-right-clip-path: polygon(54% 0%, 68% 7%, 88% 14%, 18% 21%, 22% 29%, 7% 36%, 98% 43%, 37% 50%, 14% 57%, 23% 64%, 16% 71%, 37% 79%, 89% 86%, 31% 93%, 5% 100%, -10% 100%, -10% 0%);
}

/* Alternate clip paths (even items) */
.torn_containerTINY:nth-of-type(even) {
	--torn-left-clip-path: polygon(39% 0%, 53% 7%, 18% 13%, 89% 20%, 92% 27%, 60% 33%, 97% 40%, 10% 47%, 30% 53%, 23% 60%, 23% 67%, 36% 73%, 93% 80%, 61% 87%, 89% 93%, 16% 100%, calc(100% + 1px) 100%, calc(100% + 1px) 0%);
	--torn-right-clip-path: polygon(5% 0%, 96% 7%, 87% 13%, 41% 20%, 40% 27%, 4% 33%, 15% 40%, 39% 47%, 32% 53%, 62% 60%, 63% 67%, 78% 73%, 80% 80%, 6% 87%, 50% 93%, 73% 100%, -10% 100%, -10% 0%);
}

/* Torn edge rendering logic stays the same */
.torn_containerTINY {
	float: left;
	clear: both;
	margin-bottom: .2em;
	position: relative;
}

.torn_containerTINY > div:first-child {
	margin-left: var(--torn-shadow-offset-x);
	margin-top: var(--torn-shadow-offset-y);
	top: 0;
	right: calc(0px - var(--torn-shadow-offset-x));
	bottom: calc(0px - var(--torn-shadow-offset-y));
	position: absolute;
	z-index: 1;
	filter: blur(var(--torn-shadow-blur));
	background-color: var(--torn-shadow-background-color);
}

.torn_containerTINY > div:nth-child(2),
.torn_containerTINY > div:nth-child(2) > span {
	vertical-align: middle;
	background-color: var(--torn-background-color);
	display: inline-block;
	position: relative;
	z-index: 2;
	padding: 0.4em;
	text-decoration: none;
}

/* Left torn effect */
.torn_leftTINY > div:nth-child(2)::before,
.torn_leftTINY > div:first-child::before {
	content: '';
	position: absolute;
	left: calc(0em - var(--torn-left-width));
	top: 0;
	width: var(--torn-left-width);
	bottom: 0;
	background-color: var(--torn-background-color);
	clip-path: var(--torn-left-clip-path);
	-webkit-clip-path: var(--torn-left-clip-path);
}

/* Right torn effect */
.torn_rightTINY > div:nth-child(2)::after,
.torn_rightTINY > div:first-child::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 0;
	right: calc(0px - var(--torn-right-width));
	bottom: 0;
	background-color: var(--torn-background-color);
	clip-path: var(--torn-right-clip-path);
	-webkit-clip-path: var(--torn-right-clip-path);
}

.torn_rightTINY > div:nth-child(2)::after {
	left: calc(100% - 0.5px);
}

.torn_containerTINY a {
  text-decoration: none;
    font-weight: bold;
  color: inherit; /* optional: keeps the color consistent */
}

.torn_containerTINY span {
  text-decoration: none;
    font-weight: bold;
}

.torn_container--gray {
  --torn-background-color: #444; /* dark gray */
  color: white;
}

.torn_container--gray > div:nth-child(2),
.torn_container--gray > div:nth-child(2) > span {
  background-color: var(--torn-background-color);
  color: white;
}






/* Responsive layout */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  aside {
    display: none;
  }

  #menu-toggle {
    display: block;
  }

  nav.mobile-nav {
    display: none;
  }

  nav.mobile-nav.open {
    display: block;
    position: sticky;
    top: 60px; /* approx. height of header */
    z-index: 1000;
  }

  .sticky {
    display: inline;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .headerimg {
    width: 100%;
    display: block;
    margin: auto;
  }
}