:root {
  --purple-color: rgba(110, 13, 201);
  --regular-white: white;
  --orangish: #fdbd40;
  --sky-blue: #5caab4;

  /* @link https://utopia.fyi/clamp/calculator?a=320,1536,32—51|26—45|20—39|18—35|17—31|16—27 */

  /* headers 1-6 */
  --fluid-32-51: clamp(2rem, 1.6875rem + 1.5625vw, 3.1875rem);
  --fluid-26-45: clamp(1.625rem, 1.3125rem + 1.5625vw, 2.8125rem);
  --fluid-20-39: clamp(1.25rem, 0.9375rem + 1.5625vw, 2.4375rem);
  --fluid-18-35: clamp(1.125rem, 0.8454rem + 1.398vw, 2.1875rem);
  --fluid-17-31: clamp(1.0625rem, 0.8322rem + 1.1513vw, 1.9375rem);
  --fluid-16-27: clamp(1rem, 0.8191rem + 0.9046vw, 1.6875rem);
  /* paragraph */
  --fluid-16-22: clamp(1rem, 0.9013rem + 0.4934vw, 1.375rem);
}

body {
  background-color: rgb(0, 0, 0);
  color: white;
  font-family: sans-serif;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
}

main * {
  margin-block: 1rem;
}

h2,
h3,
h4,
h5,
h6,
main p {
  padding: 0 3%;
}

h1 {
  font-size: var(--fluid-32-51);
}

h2 {
  font-size: var(--fluid-26-45);
}

p {
  font-size: var(--fluid-16-22);
}

.bold {
  font-weight: bold;
}

.mobile-hidden {
  display: none;
}

.wrapper {
  grid-area: main;
  text-align: left;
  margin: auto;
  min-width: 36ch;
}

h2 {
  color: var(--orangish);
}

section {
  margin-top: 3rem;
}

header {
  grid-area: header;
  display: grid;
  height: 20rem;
  background-image: url("../images/sun-and-moon-conversation-2.jpg");
  background-size: cover;
  align-items: end;
  justify-content: center;
  color: black;
}

nav {
  grid-area: nav;
}

.club-name {
  font-family: "Abril Fatface";
  margin: 1rem auto;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: .5em;
  width: fit-content;
  position: relative;
  top: -3.5rem;
}

nav {
  display: flex;
  height: 2rem;
  background-color: var(--purple-color);
  text-transform: capitalize;
}

nav ul {
  min-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .2rem 1.75rem;
  list-style: none;
}

nav a {
  font-size: var(--fluid-16-22);
  color: white;
  text-decoration: none;
}

img {
  object-fit: cover;
  /* Required to prevent the image from stretching, use the object-position property to adjust the visible area */
  aspect-ratio: 1/1;
}

.position1 {
  object-position: top;
}

blockquote {
  background-color: var(--purple-color);
  margin: 3rem auto;
  padding: .75rem;
  font-family: "Abril Fatface";
  font-size: var(--fluid-16-27);
  letter-spacing: .06em;
}

footer {
  grid-area: footer;
  background-color: var(--purple-color);
  margin-top: 4rem;
  padding-bottom: 1rem;
}

footer p {
  padding: .5rem;
}

#group-location {
  min-width: 100%;
  height: 20rem;
}

.designer {
  text-align: center;
}