styles.css

/* Base Size */
html {
  font-size: 15px;
}

/* BODY styles */
body {
  margin: 0;
  background-color:#fbfbfb;
  color: #451b16;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Source Sans Pro';
}

/** HEADER styles **/
/* header background */
.custom-header-wrapper {
  background: radial-gradient(circle, rgba(255, 255, 255) 0%, rgb(121, 179, 253) 100%);
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/* header image padding */
.custom-header {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/** NAVBAR styles **/
/* navbar styles */
.custom-navbar {
  background-color: #451b16;
  color: #fbfbfb;
  font-weight: bold;
  font-size: 1.5rem;
}
/* link styles */
.nav-link {
  color: #fbfbfb;
  text-shadow: 1px 1px 2px green;
}
/* active link styles */
.nav-link:active,
.nav-link:hover {
  color: green; 
}
/* toggler styles */
.custom-toggler {
  position: relative;
  border: none;
}
/* hamburger styles */
.navbar-toggler-icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(242, 242, 242, 242)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/** CONTENT styles **/
/* background cloud image */
.custom-background {
  background-image: url('images/clouds.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 2rem;
  padding-bottom: 3rem;
}
/* box styles */
.custom-content  {
  background-color: #fbfbfb;
  border-radius: 1rem;
  padding: 1rem;
}
/* section title div */
.custom-section-title  {
  color:#451b16;
  background-color: #fbfbfb;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  padding-top: 0.8rem;
  border-top: solid 0.1rem #451b16;
  border-bottom: solid 0.1rem #451b16;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/** VIDEO styles **/
/* i-frame Vimeo video */
.container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  border: solid 0.1rem #451b16;
  border-radius: 0.5rem;
  box-shadow: 4px 4px 5px rgb(138, 139, 138);
  
}
/* responsive style to fit the iframe in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: solid 0.1rem #451b16;
}

/** TEXT styles **/
/* wraps text around image and floats image to the left */
@media (min-width: 768px) {
  .custom-wrap-text {
    text-align: justify; }
  .custom-wrap-img  {
    float: left;
    margin-right: 2rem; }
}
@media (max-width: 768px) {
    .custom-wrap-img  {
      margin-bottom: 1rem; }
}
/* h1 text styles */
h1 {
  color: green;
  text-shadow: 1px 1px 2px #000;
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  padding-bottom: 1rem;
}
h1.custom-h1-greenbg {
  color: #fbfbfb;
  text-shadow: 1px 1px 2px #000;
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  padding-bottom: 1rem;
}
/* h2 text styles */
h2 {
  color: #451b16;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
/* h3 text styles */
h3  {
  color: green;
  text-shadow: 1px 1px 2px #000;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  padding-bottom: 0.5rem;
}
/* h4 text styles */
h4  {
  color: green;
  font-weight: bold;
  font-size: 1.2rem;
}
/* h5 text styles (for FAQ) */
h5  {
  color: #451b16;
  font-weight: 800;
}
/* bold text in green */
b.custom-b-green  {
  color: green;
}
/* Link styles in text */
.in-text-link  {
  text-decoration: none;
  color: green;
  font-weight: bold;
}
.in-text-link:hover,
.in-text-link:active  {
  font-size: 1.3rem;
}
.in-text-link-facebook  {
  text-decoration: none;
  color: #4267B2;
  font-weight: bold;
}
.in-text-link-facebook:hover,
.in-text-link-facebook:active  {
  font-size: 1.3rem;
}
.in-text-link-greenbg  {
  text-decoration: none;
  color: #451b16;
  font-weight: bold;
}
.in-text-link-greenbg:hover,
.in-text-link-greenbg:active  {
  font-size: 1.3rem;
}


/** ABOUT styles **/
/* for sign-off image */
.custom-signoff  {
  width: 235px;
  height: 28px;
}

/** CARD styles **/
/* HOME card styles */
.custom-card-home {
  width: 100%;
  max-width: 20rem;
  background-color: #451b16;
  color: #fbfbfb;
  margin: auto;
  margin-bottom: 1rem;
  box-shadow: 4px 4px 5px rgb(138, 139, 138);
  border: solid 0.2rem #451b16;

}
/* main card style on hover */
.custom-card-home:hover,
.custom-card-home:active  {
  transform: scale(1.05);
}
/* card body styles for home */
.custom-card-body-home {
  position: absolute;
  bottom: 0;
  background-color: #451b16;
  color: #fbfbfb;
  opacity: 0.9;
  border-top-left-radius: 2rem;
}
/* card title styles for home */
.custom-card-title-home {
  font-size: 1.5rem;
  font-weight: bold;
}
/* card text styles */
.custom-card-text-home {
  font-size: 1rem;
  color: #fbfbfb;
}
/* card button styles for home */
.custom-btn-home {
  background-color: #451b16;
  color: #fbfbfb;
  border: 0.15rem solid #fbfbfb;
}
/* card button styles for active and hover home */
.custom-btn-home:hover,
.custom-btn-home:active {
  background-color: green;
  color: #fbfbfb;
  font-weight: bold;
}

/* WELCOME card styles */
/* main card style */
.custom-card-welcome {
  background-color: rgba(0, 128, 0, 0.095);
  color: #451b16;
  width: 100%;
  max-width: 30rem;
  margin: auto;
  margin-bottom: 1rem;
  border: 0.15rem solid #451b16;
  box-shadow: 4px 4px 5px rgb(138, 139, 138);
}
/* main card style on hover */
.custom-card-welcome:hover,
.custom-card-welcome:active  {
  transform: scale(1.05);
}
/* card title styles for animals */
.custom-card-title-welcome {
  font-size: 1.5rem;
  font-weight: bold;
}
/* card button styles for animals */
.custom-btn-welcome {
  background-color: #451b16;
  color: #fbfbfb;
  border: 0.15rem solid #fbfbfb;
  font-weight: bold;
  position: absolute;
  bottom: 0.15rem;
  right: 0.15rem;
}
/* card button styles for active and hover animals */
.custom-btn-welcome:hover,
.custom-btn-welcome:active {
  background-color: green;
  color: #fbfbfb;
  border: 0.15rem solid #fbfbfb;
  font-weight: bold;
}


/** ANIMALS card styles **/
/* main card style */
.custom-card-animals {
  background-color: #451b16;
  color:#fbfbfb;
  width: 100%;
  max-width: 15rem;
  margin: auto;
  margin-bottom: 1rem;
  text-align: center;
  border: 0.15rem solid #451b16;
  box-shadow: 4px 4px 5px rgb(138, 139, 138);
}
/* main card style on hover */
.custom-card-animals:hover,
.custom-card-animals:active  {
  transform: scale(1.05);
}
/* card title styles for animals */
.custom-card-title-animals {
  font-size: 1.5rem;
  font-weight: bold;
}
/* card button styles for animals */
.custom-btn-animals {
  background-color: #fbfbfb;
  color: #451b16;
  border: 0.15rem solid #451b16;
  font-weight: bold;
  position: absolute;
  bottom: 0.15rem;
  right: 0.15rem;
}
/* card button styles for active and hover animals */
.custom-btn-animals:hover,
.custom-btn-animals:active {
  background-color: green;
  color: #fbfbfb;
  border: 0.15rem solid #fbfbfb;
  font-weight: bold;
}

/* SHOP card styles */
.custom-card-shop {
  width: 100%;
  max-width: 20rem;
  background-color: #451b16;
  color: #fbfbfb;
  margin: auto;
  margin-bottom: 1rem;
  box-shadow: 4px 4px 5px rgb(138, 139, 138);
}
/* main card style on hover */
.custom-card-shop:hover,
.custom-card-shop:active  {
  transform: scale(1.05);
}
/* card body styles for shop */
.custom-card-body-shop {
  position: absolute;
  bottom: 0;
  background-color: #451b16;
  color: #fbfbfb;
  opacity: 0.8;
  border-top-left-radius: 2rem;
}
/* card title styles for shop */
.custom-card-title-shop {
  font-size: 1.5rem;
  font-weight: bold;
}
/* card text styles for shop */
.custom-card-text-shop {
  font-size: 1rem;
  color: #fbfbfb;
}
/* card button styles for shop */
.custom-btn-shop {
  background-color: #451b16;
  color: #fbfbfb;
  border: 0.15rem solid #fbfbfb;
}
/* card button styles for active and hover shop */
.custom-btn-shop:hover,
.custom-btn-shop:active {
  background-color: green;
  color: #fbfbfb;
  font-weight: bold;
}

/** HELP styles **/
/* card styles */
.custom-card-help {
  background-color: #451b16;
  color:#fbfbfb;
  width: 100%;
  max-width: 20rem;
  margin: auto;
  margin-bottom: 1rem;
  text-align: center;
  border: 0.15rem solid #451b16;
  box-shadow: 4px 4px 5px rgb(138, 139, 138);
}
/* main card style on hover */
.custom-card-help:hover,
.custom-card-help:active  {
  transform: scale(1.05);
}

/** DONATE styles **/
/* card style for donate */
.custom-card-donate  {
  color: #451b16;
  border: 0.15rem solid #451b16;
  text-align: center;
  box-shadow: 4px 4px 5px rgb(138, 139, 138);
}
/* card header style for donate */
.custom-card-header-donate  {
  background-color: rgba(0, 128, 0, 0.095);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  border: 0;
}
/* card donate button style for givealittle and paypal */
.custom-donate-button  {
  width: 100%; 
  max-width: 10rem; 
  height: auto;
}
/* card donate button on hover */
.custom-donate-button:hover,
.custom-donate-button:active  {
  transform: scale(1.05);
}
/* green content box for donate */
.custom-content-green  {
  /* background-color:	#198754; */
  background-color: #459a37;
  color:#fbfbfb;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #451b16;
}

/** FAQ styles **/
/* accordion */
.accordion  {
--bs-accordion-color: #451b16; 
--bs-accordion-bg: rgba(0, 128, 0, 0.055); 
--bs-accordion-border-color: #451b16; 
--bs-accordion-btn-color: #451b16;
} 

/** FORM styles **/
.custom-form  {
  color:#451b16;
}

/** FOOTER styles **/
.custom-footer {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  color: #451b16;
  text-align: center;
  margin-top: 2rem;
}