.header {
	display: flex;
	justify-content: space-between;
	padding: 1.5rem;
}

.header .links {
	display: flex;
	justify-content: end;
	gap: 1rem;
}
* {
  margin: 0;
  padding:0;
}



.hero {
	background: linear-gradient(rgba(0,0,0, .6), #3C096C52), url("https://themastermindsite.com/wp-content/uploads/2019/07/wingers-in-the-3-2-3-formation-9v9.jpg");
	background-size: cover;
	min-heigh: 400px;
	height: 90vh;
	color: white;
	display: flex;
	align-items: center;
	padding: 2rem;
}

.hero .content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hero .button-container {
	margin-top: 1rem;
}

.hero .button {
	color: white;
	text-decoration: none;
	border: 1px solid white;
	display: inline;
	padding: 10px 20px;
	text-align: center;
}


 .grid .button-container {
	margin-top: 1rem;
   margin-bottom: 1rem;
}

.grid .button {
	color: black;
	text-decoration: none;
	border: 1px solid black;
	display: inline;
	padding: 10px 20px;
	text-align: center;
}

/* goalie.html */

    
    .goalie .header {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
    }
    
    .goalie .header .links {
        display: flex;
        justify-content: end;
        gap: 1rem;
    }
    
      
    .goalie .hero {
      display: flex;
      margin-bottom: 2rem;
      justify-content: center;
      align-items: center;
      background: linear-gradient(#0B090A, #FF0054), url('https://s3-alpha-sig.figma.com/img/b8d5/df5e/4be09ca5d727d7d0a4dc29ae39968a64?Expires=1730678400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jh-v9wqX-YofNambyVX5XmkbU5PgMX7AaXfYwKooQv8OzhZaR8qd1ZrcQ3URiHabsEGydQM6U9p7hHbLyGcrHuf0oDndVAZHQUzCdlQLj~KdqCFmvue5Vf3BnjXinfTu52Qi4MriddiL-jZsaZkV2cle1Dw47yAEvooCKcb1JE3aZ4G-cSkHwS88aKmD1U5q-DSuRTiV3B9yUWJKoRL-NTX~gUrnVgwaj-ZROMQd6zEq9YgYU~trzcA4aIse3kU0Yk8ls6o89Ww8299KldQJLUNYN1dM6wHyw2bY8lBjaQS3PCE6IXAim8wZ7Rxg6-IrHStivtLOv2oSADuwszrIvQ__');
      background-size: cover;
      background-position: center;
      color: White;
      height: 50vh;
      }
    
    
    .goalie .gap {
       margin-bottom: 2rem;
    }

    /* outsideback.html */

    .outsideback .header .links {
        display: flex;
        justify-content: end;
        gap: 1rem;
    }
    .outsideback .header {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
    }
    
     .outsideback * {
      margin: 0;
      padding:0;
      }
        
    .outsideback .hero {
      display: flex;
      margin-bottom: 2rem;
      justify-content: center;
      align-items: center;
      background: linear-gradient(#0B090A, #FF0054), url('https://s3-alpha-sig.figma.com/img/b8d5/df5e/4be09ca5d727d7d0a4dc29ae39968a64?Expires=1730678400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jh-v9wqX-YofNambyVX5XmkbU5PgMX7AaXfYwKooQv8OzhZaR8qd1ZrcQ3URiHabsEGydQM6U9p7hHbLyGcrHuf0oDndVAZHQUzCdlQLj~KdqCFmvue5Vf3BnjXinfTu52Qi4MriddiL-jZsaZkV2cle1Dw47yAEvooCKcb1JE3aZ4G-cSkHwS88aKmD1U5q-DSuRTiV3B9yUWJKoRL-NTX~gUrnVgwaj-ZROMQd6zEq9YgYU~trzcA4aIse3kU0Yk8ls6o89Ww8299KldQJLUNYN1dM6wHyw2bY8lBjaQS3PCE6IXAim8wZ7Rxg6-IrHStivtLOv2oSADuwszrIvQ__');
      background-size: cover;
      background-position: center;
      color: White;
      height: 50vh;
      }
    
    .outsideback .gap {
       margin-bottom: 2rem;
    }

    /* centerback.html */

    .centerback .header .links {
        display: flex;
        justify-content: end;
        gap: 3rem;
    }
    .centerback .header {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
    }
     .centerback * {
      margin: 0;
      padding:0;
      }
        
    .centerback .hero {
      display: flex;
      margin-bottom: 1rem;
      justify-content: center;
      align-items: center;
      background: linear-gradient(#0B090A, #FF0054), url('https://s3-alpha-sig.figma.com/img/b8d5/df5e/4be09ca5d727d7d0a4dc29ae39968a64?Expires=1730678400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jh-v9wqX-YofNambyVX5XmkbU5PgMX7AaXfYwKooQv8OzhZaR8qd1ZrcQ3URiHabsEGydQM6U9p7hHbLyGcrHuf0oDndVAZHQUzCdlQLj~KdqCFmvue5Vf3BnjXinfTu52Qi4MriddiL-jZsaZkV2cle1Dw47yAEvooCKcb1JE3aZ4G-cSkHwS88aKmD1U5q-DSuRTiV3B9yUWJKoRL-NTX~gUrnVgwaj-ZROMQd6zEq9YgYU~trzcA4aIse3kU0Yk8ls6o89Ww8299KldQJLUNYN1dM6wHyw2bY8lBjaQS3PCE6IXAim8wZ7Rxg6-IrHStivtLOv2oSADuwszrIvQ__');
      background-size: cover;
      background-position: center;
      color: White;
      height: 50vh;
      }
    
    
    .centerback .gap {
       margin-bottom: 2rem;
    }

    /* defensivecentermid.html */

    .defensivecentermid .header .links {
        display: flex;
        justify-content: end;
        gap: 3rem;
    }
    
    .defensivecentermid .header {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
    }
     .defensivecentermid * {
      margin: 0;
      padding:0;
      }
        
    .defensivecentermid .hero {
      display: flex;
      margin-bottom: 1rem;
      justify-content: center;
      align-items: center;
      background: linear-gradient(#0B090A, #FF0054), url('https://s3-alpha-sig.figma.com/img/b8d5/df5e/4be09ca5d727d7d0a4dc29ae39968a64?Expires=1730678400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jh-v9wqX-YofNambyVX5XmkbU5PgMX7AaXfYwKooQv8OzhZaR8qd1ZrcQ3URiHabsEGydQM6U9p7hHbLyGcrHuf0oDndVAZHQUzCdlQLj~KdqCFmvue5Vf3BnjXinfTu52Qi4MriddiL-jZsaZkV2cle1Dw47yAEvooCKcb1JE3aZ4G-cSkHwS88aKmD1U5q-DSuRTiV3B9yUWJKoRL-NTX~gUrnVgwaj-ZROMQd6zEq9YgYU~trzcA4aIse3kU0Yk8ls6o89Ww8299KldQJLUNYN1dM6wHyw2bY8lBjaQS3PCE6IXAim8wZ7Rxg6-IrHStivtLOv2oSADuwszrIvQ__');
      background-size: cover;
      background-position: center;
      color: White;
      height: 50vh;
      }
    .defensivecentermid .gap {
       margin-bottom: 2rem;
    }

    /* attackingcentermid.html */

    .attackingcentermid .header .links {
        display: flex;
        justify-content: end;
        gap: 3rem;
    }
    
    .attackingcentermid .header {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
    }
     .attackingcentermid * {
      margin: 0;
      padding:0;
      }
        
    .attackingcentermid .hero {
      display: flex;
      margin-bottom: 1rem;
      justify-content: center;
      align-items: center;
      background: linear-gradient(#0B090A, #FF0054), url('https://s3-alpha-sig.figma.com/img/b8d5/df5e/4be09ca5d727d7d0a4dc29ae39968a64?Expires=1730678400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jh-v9wqX-YofNambyVX5XmkbU5PgMX7AaXfYwKooQv8OzhZaR8qd1ZrcQ3URiHabsEGydQM6U9p7hHbLyGcrHuf0oDndVAZHQUzCdlQLj~KdqCFmvue5Vf3BnjXinfTu52Qi4MriddiL-jZsaZkV2cle1Dw47yAEvooCKcb1JE3aZ4G-cSkHwS88aKmD1U5q-DSuRTiV3B9yUWJKoRL-NTX~gUrnVgwaj-ZROMQd6zEq9YgYU~trzcA4aIse3kU0Yk8ls6o89Ww8299KldQJLUNYN1dM6wHyw2bY8lBjaQS3PCE6IXAim8wZ7Rxg6-IrHStivtLOv2oSADuwszrIvQ__');
      background-size: cover;
      background-position: center;
      color: White;
      height: 50vh;
      }
    .attackingcentermid .gap {
       margin-bottom: 2rem;
    }

    /* wings.html */

    .wings .header .links {
        display: flex;
        justify-content: end;
        gap: 3rem;
    }
    
    .wings .header {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
    }
     .wings * {
      margin: 0;
      padding:0;
      }
        
    .wings .hero {
      display: flex;
      margin-bottom: 1rem;
      justify-content: center;
      align-items: center;
      background: linear-gradient(#0B090A, #FF0054), url('https://s3-alpha-sig.figma.com/img/b8d5/df5e/4be09ca5d727d7d0a4dc29ae39968a64?Expires=1730678400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jh-v9wqX-YofNambyVX5XmkbU5PgMX7AaXfYwKooQv8OzhZaR8qd1ZrcQ3URiHabsEGydQM6U9p7hHbLyGcrHuf0oDndVAZHQUzCdlQLj~KdqCFmvue5Vf3BnjXinfTu52Qi4MriddiL-jZsaZkV2cle1Dw47yAEvooCKcb1JE3aZ4G-cSkHwS88aKmD1U5q-DSuRTiV3B9yUWJKoRL-NTX~gUrnVgwaj-ZROMQd6zEq9YgYU~trzcA4aIse3kU0Yk8ls6o89Ww8299KldQJLUNYN1dM6wHyw2bY8lBjaQS3PCE6IXAim8wZ7Rxg6-IrHStivtLOv2oSADuwszrIvQ__');
      background-size: cover;
      background-position: center;
      color: White;
      height: 50vh;
      }
    .wings .gap {
       margin-bottom: 2rem;
    }

    /* forward.html */

    .forward .header .links {
        display: flex;
        justify-content: end;
        gap: 2rem;
    }
    
    .forward .header {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
    }
     .forward * {
      margin: 0;
      padding:0;
      }
        
    .forward .hero {
      display: flex;
      margin-bottom: 1rem;
      justify-content: center;
      align-items: center;
      background: linear-gradient(#0B090A, #FF0054), url('https://s3-alpha-sig.figma.com/img/b8d5/df5e/4be09ca5d727d7d0a4dc29ae39968a64?Expires=1730678400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jh-v9wqX-YofNambyVX5XmkbU5PgMX7AaXfYwKooQv8OzhZaR8qd1ZrcQ3URiHabsEGydQM6U9p7hHbLyGcrHuf0oDndVAZHQUzCdlQLj~KdqCFmvue5Vf3BnjXinfTu52Qi4MriddiL-jZsaZkV2cle1Dw47yAEvooCKcb1JE3aZ4G-cSkHwS88aKmD1U5q-DSuRTiV3B9yUWJKoRL-NTX~gUrnVgwaj-ZROMQd6zEq9YgYU~trzcA4aIse3kU0Yk8ls6o89Ww8299KldQJLUNYN1dM6wHyw2bY8lBjaQS3PCE6IXAim8wZ7Rxg6-IrHStivtLOv2oSADuwszrIvQ__');
      background-size: cover;
      background-position: center;
      color: White;
      height: 50vh;
      }
    .forward .gap {
       margin-bottom: 2rem;
    }