/* 
      .--..--..--..--..--..--.
    .' \  (`._   (_)     _   \
  .'    |  '._)         (_)  |
  \ _.')\      .----..---.   /
  |(_.'  |    /    .-\-.  \  |
  \     0|    |   ( O| O) | o|
   |  _  |  .--.____.'._.-.  |
   \ (_) | o         -` .-`  |
    |    \   |`-._ _ _ _ _\ /
    \    |   |  `. |_||_|   |
    | o  |    \_      \     |     -.   .-.
    |.-.  \     `--..-'   O |     `.`-' .'
  _.'  .' |     `-.-'      /-.__   ' .-'
.' `-.` '.|='=.='=.='=.='=|._/_ `-'.'
`-._  `.  |________/\_____|    `-.'
   .'   ).| '=' '='\/ '=' |
   `._.`  '---------------'
           //___\   //___\
             ||       ||
             ||_.-.   ||_.-.
            (_.--__) (_.--__)
       

 Insert all your glorious CSS styles below! */


/* Color Palette */
:root {
  --blue: #3B9AE1;
  --red: #FF6B6B;
  --gray: #F5F5F5;
  --dark: #1B1B2F;
  --white: #FFFFFF;
}

/* Background */
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(to bottom right, var(--dark), var(--blue));
  background-attachment: fixed;
  color: var(--dark);
  text-align: center;
  line-height: 1.6;
  padding: 20px;
}

/* Fluid Type Scale */
:root {
  --step--2: clamp(0.64rem, 0.57rem + 0.29vw, 0.78rem);
  --step--1: clamp(0.8rem, 0.71rem + 0.34vw, 0.98rem);
  --step-0: clamp(1rem, 0.88rem + 0.43vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.54vw, 1.56rem);
  --step-2: clamp(1.56rem, 1.38rem + 0.66vw, 1.95rem);
  --step-3: clamp(1.95rem, 1.72rem + 0.82vw, 2.44rem);
}

/* Fonts */
h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--step-3);
  color: var(--red);
  letter-spacing: 1px;
  margin-bottom: 0.3em;
}


.intro {
  color: var(--white);
  font-size: var(--step-0);
  max-width: 650px;
  margin: 0 auto;
}

h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--step-1);
  color: var(--blue);
  margin-top: 1em;
}

p {
  font-size: var(--step-0);
  color: #333;
  max-width: 600px;
  margin: 0.5em auto;
}

/* Flexbox */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.member {
  background: var(--white);
  border-radius: 15px;
  padding: 20px;
  flex: 1 1 250px;
  max-width: 300px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.member:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
}

.member img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 3px solid var(--red);
}

.member h2,
.member p {
  color: var(--dark);
}