/* ### Images ### */
/* object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
https://www.w3schools.com/css/css3_object-fit.asp*/
.image-container img {
  width: 100%;
  height: auto;
  object-fit: scale-down;
  border-radius: 2%; /* See ISSUE comment on index page */
}

/* ### Fonts ### */
p, .accordion-body, .form-label ,.accordion-header {
    font-family: poppins;
}

h2,h3,h4,h5,h6 .navbar, .nav-link {
    font-family: rubik;
    font-style:oblique;
}

h1, .navbar-brand {
    font-family: rubik;
    font-weight: 700; 
}

/* ### Nav Bar ### */
.navbar {
    background-color: #7A9F35 ;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
}

.navbar-logo {
  display: inline; /*same as d-inline-block*/
  height: 75px;
  width: auto;  /*used to maintain aspect ratio. No effect with this logo.*/
  padding-right: 6px;
  padding-bottom: 10px;
  /*padding-left: 50px; #commented left padding out as positoning when viewed on small device seems unbalanced*/
}

/*persistent link colour*/
 .nav-link {
  color: #f4bb20;
}
/*colour when hovering over link */
.nav-link:hover {
  color: #8F62D6; 
}

/*active state (for the current page)*/
/*remember, this works due to nesting structure*/
.navbar-nav .nav-link.active {
  color: #68479c; 
}

/* ### Footer ### */
footer {
    background-color: #7A9F35 ;
    padding-top: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

/*adds colour social media icons*/
i {
    color: #f4bb20;
}

/* ### not in use ### */

/*added this while testing a custom button. 
leaving for reference on making the button circular*/
.button-custom{
  width: 40px;     /*height and width must be equal*/
  height: 40px;
  border-radius: 50%;
  margin-top: 10px;
}