body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
}

/* HEADER */

header {
  background-color: #d4a96a;
  color: white;
  text-align: center;
  padding: 20px;
}

/* NAVIGATION */

nav {
  background-color: #222;
  text-align: center;
  padding: 12px;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
}

nav a:hover {
  color: #d7a5ff;
}

h3 {
    width: 63.333%;
    text-align:center;
    /*/color: #4a3f2f;*/
    background-color:black;
    color:Gold;
    border-radius:30px;
    }

/*h3:first-line{*/
/*    font-size:22px;*/
/*    background-color:black;*/
/*    border-radius:300px;*/
/*    color:white;*/
/*    content:"";*/
/*    margin-right:4px;*/
/*    width:auto;*/
/*    padding-left:10px;*/
/*    padding-right:10px;*/
/*    padding-top:4px;*/
/*    padding-bottom:4px;*/
/*    }*/

/* HERO SECTION */

.hero {
  background-color: #6f2c91;
  background-image:url(https://codehs.com/uploads/67e634c1fa58310f8fbbc7b74fa759ca);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color: white;
  text-align: center;
  padding: 80px 20px;
  position:relative;
  background-attachment:fixed;
  
}

.hero:before {
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 10px;
  position:relative;
}

.hero p {
    position:relative;
    }

/* CONTENT */

.content-section {
  max-width: 1000px;
  margin: 30px auto;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
}

.content-section h2 {
  color: #4b1463;
  text-align: center;
}



.content-section p {
  line-height: 1.6;
  text-align: center;
}

.calendar-box{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
    }
    
.calendar-wrapper {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.calendar-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}    
    
    
    
/* IMAGE PLACEHOLDER */

.image-placeholder {
  height: 300px;
  width:100%;
  background-image:url(https://codehs.com/uploads/67e634c1fa58310f8fbbc7b74fa759ca);
  object-fit:fill;
  background-position:center;
  background-repeat:no-repeat;
  /* border: 3px dashed #999; */
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0px 0;
  font-size: 20px;
  color: #666;
}


/*.image-colorguard {*/
 /* height: 150px;
  width:50%;
  background-image:url(https://codehs.com/uploads/72c09b211246e7e0da7b5e3ef0582bf2);
  object-fit:fill;
  background-position:center;
  background-repeat:no-repeat;
  /* border: 3px dashed #999; */
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0px 0;
  font-size: 20px;
  color: #666;
}

.2025-xmas-parade {
  height: 300px;
  width:100%;
  background-image:url(https://codehs.com/uploads/2fb8e0de099be36d7074bca614158498);
  object-fit:fill;
  background-position:center;
  background-repeat:no-repeat;
  /* border: 3px dashed #999; */
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0px 0;
  font-size: 20px;
  color: #666;
}

#cg-picture{
    width: 63.333%;
    max-width: 550px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

#dtm-picture{
    width: 63.333%;
    max-width: 550px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

#rfltm-picture{
     width: 63.333%;
    max-width: 550px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

#raidtm-picture{
     width: 63.333%;
    max-width: 550px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

#xmas_parade{
    width: 100%;
    max-width: 474px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

#dodgeball-fun{
    width: 100%;
    max-width: 474px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

#anniston-qualification{
    width: 100%;
    max-width: 474px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.image-drill_team {
  height: 300px;
  width:100%;
  background-image:url(https://codehs.com/uploads/a8763ab2209ce967629c8f1710cc58d9);
  object-fit:fill;
  background-position:center;
  background-repeat:no-repeat;
  /* border: 3px dashed #999; */
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0px 0;
  font-size: 20px;
  color: #666;
}


.image-rifle_team {
  height: 300px;
  width:100%;
  background-image:url(https://codehs.com/uploads/07474bca3ea269b90361b247c10e7fb9);
  object-fit:fill;
  background-position:center;
  background-repeat:no-repeat;
  /* border: 3px dashed #999; */
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0px 0;
  font-size: 20px;
  color: #666;
}


.image-raiders_team {
  height: 300px;
  width:100%;
  background-image:url(https://codehs.com/uploads/e421509c58ed98d4d858bc0b9fb8e59e);
  object-fit:fill;
  background-position:center;
  background-repeat:no-repeat;
  /* border: 3px dashed #999; */
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0px 0;
  font-size: 20px;
  color: #666;
}

.event-card{
    display:flex;
    flex-direction:column;
    align-content:center;
    align-items:center;
    padding-top: 30px;
    padding-bottom:30px;
    }
    

.event-card p {
    align-content:center;
    align-items:center;
    padding-top:-2px;
    padding-bottom: 40px;
}


.caption {
    align-content:center
    align-items:center;
  font-size: 14px;
  color: #666;
}

/* DOCUMENTS */

.documents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.doc-card{
    display:flex;
    flex-direction:column;
    align-content:center;
    align-items:center;
    padding-top: 30px;
    padding-bottom:30px;
    }
    
.doc-card h3 {
    align-content:center;
    align-items:center;
}

.doc-card a {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;

  background-color: #4b1463;
  color: grey;
  text-decoration: none;
  border-radius: 5px;
  align-content:center;
  align-items:center;
}

.doc-card a:hover {
  background-color: #6f2c91;
}

/* FOOTER */

footer {
  background-color: #222;
  color: white;
  text-align: center;
  padding: 25px;
  margin-top: 40px;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #d7a5ff;
  text-decoration: none;
  margin: 0 10px;
}