@import url(https://db.onlinewebfonts.com/c/aea32164a7c4d321c486643396b191ca?family=Profaisal-Elite-Tahreer);
@import url(https://db.onlinewebfonts.com/c/1e4cd3b720ccabd5a5de545481339e3b?family=Merriweather);

body {
  background: black url("background.png") repeat fixed center;
  background-size: cover;
}

.logo {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(400px, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
}
details {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / span 3;
}
details::details-content {
  grid-row: 2; /* position in the second row */
  grid-column: 1 / -1; /* cover all three columns */
  padding: 1rem;
  border-bottom: 2px solid dodgerblue;
}
details:not([open])::details-content {
  display: none;
}
summary {
  grid-row: 1; /* First subgrid row */
  display: grid;
  padding: 1rem; /* Some breathing room */
  border-bottom: 2px solid dodgerblue;
  cursor: pointer; /* Update the cursor when hovered */
  z-index: 1;
}

/* Style the <summary> element when <details> is [open] */
details[open] summary {
  font-weight: bold;
}
/* First item in first column */
details:nth-of-type(1) summary {
  grid-column: 1 / span 1;
}
/* Second item in second column */
details:nth-of-type(2) summary {
  grid-column: 2 / span 1;
}
/* Third item in third column */
details:nth-of-type(3) summary {
  grid-column: 3 / span 1;
}
summary {
  grid-column: var(--n) / span 1;
  font-family: 'Profaisal-Elite-Tahreer';
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

h1 {
	  text-align: center;
	  font-weight: bold;
	  font-family: 'Profaisal-Elite-Tahreer';
	  font-size: 28px;
}

p {
	text-align: justify;
	font-family: 'Merriweather';
	font-size: 16px;
    line-height: 1.8;
}