/*HOME PAGE*/
 /* The start of my CSS was made by using a responsive page to a single main page */
 /* I have added the main background, size, colour and image to the index/home page */
 body {
  background-image: url(images/tree2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
 }


 html {
  height: 100%;
}

 /* The size of page used was 1024px wide, large enough for laptops */
 /*Was .container*/
 .container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  margin-inline: auto;
}

img {  
  display: center;
  max-width: 100%;
}


 /*
@media screen and (min-width: 300px) {
  #body {
    background-color: lightyellow;
  }
  }
  @media screen and (min-width: 400px) {
    #body {
      background-color: pink;
    }
    }
    @media screen and (min-width: 600px) {
      #body {
        background-color: blue;
      }
p {
  font-size: 2em
}
      }*/

 /* Main header and text size added*/
header {
    min-height: 300px;
    text-align: center;
    /*background-color: limegreen;*/
}


 /* TEXT FOR Anchor LINK WITHIN HOME PAGE*/
a {
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  /* text-decoration: none; */
}

 /* NAVIGATIONAL A LINK TEXT WITHIN HOME PAGE */ 
  nav a {
      text-decoration: none;
      font-size: 20px;
      padding-left: 20px;
      padding-right: 20px;
  }

  /* A NAV BAR ADDED TO HOME PAGE - CENTERED WITH SEE-THROUGH COLOR*/
nav a:hover {
  background-color: #bbb;
  color: rgb(0, 255, 21);
}

 /* CHANGES TO THE NAV BAR LEARNT IN W3Schools */ 
.navbar {
  background-color: #333;
  position: relative;
  z-index: 999; 
}

 /*MAIN NAVBAR COLOURS*/
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: rgba(21, 100, 173, 0.958);
  text-align: center;
}

.navbar li {
  display: inline-block;
}

.navbar li a {
  color: white;
  display: block;
  padding: 10px 20px;
  text-decoration: none;
}

 /* Style the dropdown menu */
.navbar ul ul {
  position: absolute;
  top: 100%;
  display: none;
}

.navbar ul ul li {
  display: block;
}

.navbar li:hover ul {
  display: block;
}

 /* BACKGROUND COLOUR OF DROPDOWN LINKS ON HOVER */
.navbar ul ul li a:hover {
  background-color: #555;
}

 /* MAIN TEXT STYLE FOR HOME PAGE */
main {
    height: auto;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

 /* HEADERS AVAILABLE */

h1 {
    font-size: 40px;
    color: lightblue;
    font-family: 'sans-serif';
    text-align: center;
}

h2 {
    font-size: 25px ;
    color: yellow;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    text-decoration-line: underline;
}

 h3 {
    font-size: 25px;
    color: yellow;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    text-decoration-line: underline;
}

h4 {
  font-size: 15px;
  color: rgb(0, 255, 132);
  font-family:Arial, sans-serif;
  text-align: center;
  text-decoration-line: none;
}

h5 {
  font-size: 20px;
  color: rgb(0, 255, 132);
  font-family:'Arial Narrow', Arial, sans-serif;
  text-align: center;
  text-decoration-line: none;
}

 /* Paragraph and background for all pages*/
 p {
    font-size: 14px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(162, 21, 35, 0.876);
}

 /* WELCOME FOR HOME PAGE */
#welcome
p {
    font-size: 22px;
    background-color: #636262b8;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

 /* CLUB MEETING INFO FOR HOME PAGE */
#clubmeeting
p {
    font-size: 20px;
    background-color: #636262b8;
    background-color: yellow;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 
 /* DIG MEETING INFO FOR HOME PAGE */
#digmeeting
p {
    font-size: 20px;
    background-color: #636262b8;
    color: yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 


 /* Minutes test */ 
#meetingminutestest

p {
    font-size: 20px;
    background-color: #636262b8;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 



 /* DIG MEETING INFO FOR HOME PAGE */
#jim
p {
    font-size: 20px;
    background-color: #636262b8;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

#shield
p {
    font-size: 20px;
    background-color: #1f7ec68b;
    color: yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

 #cake
 p {
     font-size: 20px;
     background-color: #636262b8;
     color: white;
     font-family: sans-serif;
     text-align: center;
     
 } 

 #newland
 p {
     font-size: 20px;
     background-color: #636262b8;
     color: white;
     font-family: sans-serif;
     text-align: center;
     
 } 

 /* FREE RECOVERY INFO ON HOME PAGE */ 
#recovery
      p {
          font-size: 20px;
          color: white;
          font-family: Arial, Helvetica, sans-serif;
          text-align: center;
          background-color: #636262b8;
    }

 /* START OF SLIDESHOW FOR FREE RECOVERY SERVICE ON HOMEPAGE */
* {box-sizing:border-box}

 /* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

 /* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

 /* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

 /* TEXT WITHIN SLIDESHOW */
.text {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

 /* NUMBER TEXT (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

 /* DOTS/ INDICATORS */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

 /* FADING ANIMATION
 */
.fade {
  animation-name: fade;
  animation-duration: 2.0s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}  
/*END OF SLIDESHOW FOR HOME PAGE*/


  /* FOOTER P TEXT FOR HOME AND ALL PAGES WITHIN HOMEPAGE */ 
 footer p {
  font-size: 15px;
  text-align: center;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
}

 /* FOOTER BACKGROUND COLOUR FOR HOME & ALL PAGES */
footer {
  background-color: rgba(26, 156, 176, 0.646);
}

  /* GALLERY */ 
 /* GALLERY PAGE sizing */

* {
  box-sizing: border-box;
}
body {
 /* background-color: #f1f1f1;*/
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
}



 /* CENTERING WEBSITE */
.main {
  max-width: 1000px;
  margin: auto;
}

 /* MARGIN BETWEEN EACH COLUMN */
.row {
  margin: 10px -16px;
}

 /* PADDING BETWEEN EACH COLUMN */
.row,
.row > .column {
  padding: 8px;
}

 /* GALLERY WITH FOUR EQUAL COLUMNS THAT FLOAT NEXT TO EACH */
.column {
  float: left;
  width: 25%;
  display: none; /* Hide all elements by default */
}

 /* CLEAR FLOATS AFTER ROWS */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

 /* CONTENT BACKGROUND & PADDING */
.content {
  background-color: rgb(129, 88, 88);
  padding: 10px;
}

 /* CONTENT BACKGROUND & PADDING */
.contentminutes {
  background-color: rgb(26, 126, 76);
  padding: 10px;
}

 /* CONTENT BACKGROUND & PADDING */
.contentconst {
  background-color: rgb(129, 88, 88);
  padding: 10px;
}

 /* CONTENT BACKGROUND & PADDING */
.contentrules {
  background-color: rgb(129, 88, 88);
  padding: 10px;
}




 /* CONTENT BACKGROUND & PADDING */
 .contentabc {
  
  background-color: rgb(129, 88, 88);
  padding: 5px;
}

 /* CONTENT BACKGROUND & PADDING */
 .contentabcd {
  
  background-color: rgb(129, 30, 88);
  padding: 5px;
}

.contentabcde {

  background-color: rgb(0, 187, 255);
  padding: 5px;
}

.contentab {

  background-color: rgb(0, 187, 255);
  padding: 5px;
}


 /* THE "SHOW" CLASS IS ADDED TO FILTERED ELEMENTS */
.show {
  display: block;
}

 /* STYLING THE GALLERY BUTTONS */
.btn {
  border: blueviolet;
  outline: brown;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #ff000000;
  color: white;
}

*{
  box-sizing: border-box
}

 /*ARTICLE PAGE*/
 /* TEXT FOR EDWARD PENNIES WITHIN ARTICLES */
#edwardpennies
{
    font-size: 25px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: rgba(109,199, 118, 0.85);    
} 

 /* TEXT FOR TRADEWEIGHTS WITHIN ARTICLES */
#tradeweights
{
    font-size: 25px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: rgba(109,199, 118, 0.85); 
} 

/* TEXT FOR EMPERORS WITHIN ARTICLES */
#romanemperors
{
    font-size: 25px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: rgba(109,199, 118, 0.85);    
} 

 /* JIMS PAGE */
 #rare_event
 p {
     font-size: 22px;
     background-color: #636262b8;
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     text-align: left;
 } 

 .img_caption
{
  font-size: 18px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: yellow;

}

 /* CLUB MEMBERSHIP */

/* JOHNRHODESEMAILCONTACT */
#johnrhodes
p {
    font-size: 22px;
    background-color: #636262b8;
    color: yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 


 /*GET IN TOUCH IN CLUB MEMBERSHIP*/
.contact-container
{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Outfit';
  background:linear-gradient(#ffdad5,#904759);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.contact-left{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}
.contact-left-title h2{
  font-weight: 600 ;
  color: #a363aa;
  font-size: 40px;
  margin-bottom: 5px;
}
.contact-left-title hr{
  border: none;
  width: 120px;
  height: 5px;
  background-color: #a363aa;
  border-radius: 10px;
  margin: 20px;
}
.contact-inputs{
  width: 400px;
  height: 50px;
  border: none;
  outline: none;
  padding-left: 25px;
  font-weight: 500;
  color: #666;
  border-radius: 50px;
}
.contact-left textarea{
  height: 140px;
  padding-top: 15px;
  border-radius: 20px;
}
.contact-inputs:focus{
  border: 2px solid #ff994f;
}
.contact-inputs::placeholder{
  color: #a9a9a9;
}
.contact-left button{
  display: flex;
  align-items: center;
  padding: 15px 30px;
  font-size: 16px;
  color: #fff;
  gap: 10px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(270deg,#ff994f,#fa6d86);
  cursor: pointer;
}
.contact-left button img{
  height: 15px;
}
.contact-right img{
  width: 400px;
}
@media (max-width:800px){
    .contact-inputs{
      width: 80vw;
    }
    .contact-right{
      display: none;
    }
}

 /* ABOUT US */
 /* TEXT/COLOURS FOR ABOUT US PAGE*/
 #aboutus 
 p {   
      font-size: 20px;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      background-color: rgba(128, 128, 128, 0.778);
 }

 #findofyear123 
 p {   
      font-size: 20px;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      background-color: rgba(128, 128, 128, 0.778);
 }

 #goldfindofyear123 
 p {   
      font-size: 20px;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
      background-color: rgba(128, 128, 128, 0.778);
 }

 /*COMMITTEE MEMBERS TEXT WITHIN MEET THE TEAM */
#committee
p {
    font-size: 18px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    img {
      border-radius: 50%;
    }
    background-color: hwb(140 31% 68% / 0.757);
}

 /*DIG MARSHALLS TEXT WITHIN MEET THE TEAM */
#marshalls
p {
    font-size: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    img {border-radius: 10%;}
    background-color: #4e514fc1;
    width: fit-content;
} 

/* MORE OF MEET THE TEAM NEW.... */ 
 /* MEET THE TEAM NEW PAGE sizing */

 * {
  box-sizing: border-box;
}
body {
 /* background-color: #f1f1f1;*/
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

 /* CENTERING WEBSITE */
.main {
  max-width: 1000px;
  margin: auto;
}

 /* MARGIN BETWEEN EACH COLUMN */
.row {
  margin: 10px -16px;
}

 /* PADDING BETWEEN EACH COLUMN */
.row,
.row > .column {
  padding: 8px;
}

 /* GALLERY WITH FOUR EQUAL COLUMNS THAT FLOAT NEXT TO EACH */
.column {
  float: left;
  width: 25%;
  display: none; /* Hide all elements by default */
}


 /* CLEAR FLOATS AFTER ROWS */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

 /* CONTENT BACKGROUND & PADDING FOR COMMITTEE */
.contentcom {
  background-color: rgb(106, 88, 129);
  padding: 10px;
}

 /* CONTENT BACKGROUND & PADDING FOR COMMITTEE */
 .contentmar {
  background-color: rgb(93, 129, 88);
  padding: 10px;
}

 /* THE "SHOW" CLASS IS ADDED TO FILTERED ELEMENTS */
.show {
  display: block;
}

 /* STYLING THE GALLERY BUTTONS */
 .btn {
  border: blueviolet;
  outline: brown;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #ff000000;
  color: white;
}

*{
  box-sizing: border-box
}

 /* MEET THE FLO WITHIN MEET THE TEAM*/
#meettheflo
{
    font-size: 25px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: rgba(109,199, 118, 0.85); 
} 

 /* *MEMBERS AREA */
 /* FIND OF THE YEAR (MAIN PAGE) - IN MEMBERS AREA */
#findofyear
p {
    font-size: 22px;
    background-color: rgba(109,199, 118, 0.85);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    border: none;
} 

 #Goldoftheyear
 p {
     font-size: 22px;
     background-color: rgba(109,199, 118, 0.85);
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     text-align: left;
     border: none;
     
 } 

 #Findoftheyear
 p {
     font-size: 22px;
     background-color: rgba(109,199, 118, 0.85);
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     text-align: left;
     border: none;
     
 }
 /* RICHARD'S FUNFACT IN MEMBERS AREA PAGE*/
#funfacts
p {
    font-size: 25px;
    background-color: rgba(109,199, 118, 0.85);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

 /*DIARY DATES*/
 /*TEXT AND B/G FOR DIARY DATES WITHIN MEMBERS AREA*/
#diarydates
p {
    font-size: 20px;
    background-color: rgba(9, 145, 131, 0.54);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

 /* XMAS DIG 2024 TEXT/ XMAS DIGS WITHIN MEMBERS AREA */

#xmasdig2025
 p {
     font-size: 25px;
     background-color: rgba(109,199, 118, 0.85);
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     text-align: center;
 } 

 #xmasdig2024
 p {
     font-size: 25px;
     background-color: rgba(109,199, 118, 0.85);
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     text-align: center;
 } 


 /* CHRISTMAS CLUB XMAS DIGS WITHIN MEMBERS AREA */
#christmasclub
p {
    font-size: 25px;
    background-color: rgba(109,199, 118, 0.85);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;  
} 

/* XMAS SLIDESHOW WITHIN MEMBERS AREA PAGE */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

/* HIDE IMAGES MY DEFAULT - XMAS SLIDESHOW*/
.mySlides {
  display: none;
}

/* NEXT & PREV BUTTONS - XMAS SLIDESHOW*/
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* POSITION OF THE "NEXT BUTTON" TO THE RIGHT - XMAS SLIDESHOW*/
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* BACKGROUND COLOUR WITH A BIT OF SEE-THROUGH - XMAS SLIDESHOW */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* CAPTION TEXT - XMAS SLIDESHOW*/
.text {
  color: yellow;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* NUMBER TEXT (1/6 etc) - XMAS SLIDESHOW */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* THE DOTS/BULLETS/INDICATORS - XMAS SLIDESHOW */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: hsla(217, 35%, 47%, 0.887);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #e34f4a;
}

/* FADING ANIMATION - XMAS SLIDESHOW */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* END OF XMAS SLIDESHOW */


 /* FOR SALE/ WANTED */ 
 /* TEXT FOR FOR SALE WITHIN MEMBERSAREA */
#forsale 
    p {
      font-size: 22px;
      background-color: #636262b8;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
  } 

 /* MERCHANDISE FOR SALE */
 /* TEXT FOR FINDOFTHEMONTH WITHIN MEMBERSAREA */
#findofthemonth
{ 
    font-size: 25px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    }

 /* FIND OF THE YEAR */
#findoftheyearcompetition

  p {
    font-size: 22px;
    background-color: #636262b8;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;   
} 

#villains
p {
    font-size: 25px;
    background-color: rgba(109,199, 118, 0.85);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

 /* CLUB MINUTES */
#CBAMD_Minutes
p {
    font-size: 20px;
    background-color: #636262b8;
    color: yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

 /* CBAMD CONSTITUTION */
#CBAMD_Constitution
p {
    font-size: 20px;
    background-color: #636262b8;
    color: yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

 /* CLUB RULES */
#CBAMD_Rules
p {
    font-size: 20px;
    background-color: #636262b8;
    color: yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
} 

       /* iframe {
            border: 10px solid black;
            width: 100%;} /* takes precedence over the width set with the HTML width attribute */


/* PASSWORD */