/*
Threme Name: Inclusify Digital (website)
Threme URI: https://www.inclusify.digital
Author: Paul Wroe
Author URI: https://www.inclusify.digital
Description: A simple WordPress threme including Bootstrap 5 via CDN.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-bootstrap-threme
Tags: bootstrap, minimal, starter
*/
html {
  font-size:18px !important;
}
 
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

body {
  margin:0;
  padding:0;
  font-size:1rem;
}

/*
  Text
*/
p { font-size: 1rem; }

p.lead {
  font-size:1.75rem;
  font-weight:normal;
}

/* Smaller size for mobile (less than 768px wide) */
@media (max-width: 767.98px) {

  h1 { font-size: 1rem; }

  h2 { font-size: 1rem; }

  h3 { font-size: 1.15rem !important; }

  p { font-size: 1rem; }

  p.lead { font-size: 1.15rem; }

}

/*
  Links
*/
a {
  color:black;
  text-decoration:underline;
}

/*
  Headings
*/
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;      /* modern */
  word-break: break-word;       /* fallback */
}

p.lead {
  overflow-wrap: anywhere;      /* modern */
  word-break: break-word;       /* fallback */
}
h1, .h1 {
  font-family: "Titillium Web", sans-serif;
    font-size:3rrem;
    font-weight:bold;
    margin-bottom:1rrem;  
}

h2, .h2 {
  font-family: "Titillium Web", sans-serif;
}

h3, .h3 {
  font-family: "Titillium Web", sans-serif;
  font-size:2.5rem;
  padding:0 0 0.15rem 0;
}

h4, .h4 {
  font-family: "Titillium Web", sans-serif;
  font-size:1.35rem;
  padding:0 0 0.15rem 0;
}

/*
  SR Only
*/
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/*
  Main Nav
*/
#main-nav ul li a {
  color:#333333;
  font-size:1.15rem;
  padding:6px 12px;
  border-radius:24px;
  margin:0 4px;
  text-transform:lowercase;
}

/* testing */
#main-nav ul li:first-child a {
   color:white; 
  background-color:#000; 
}

#main-nav ul li a:hover {
  color:white; 
  background-color:#000;
}

/*
  Colours
*/
.bg-yellow {
  background-color: #DBFE71 !important;
}

.text-yellow {
  color: #DBFE71 !important;
}

.bg-light-yellow {
  background-color: #f4ffd3 !important;
}

.text-light-yellow {
  color: #f4ffd3 !important;
}

.bg-dark {
  background-color:black !important;
}

.text-dark {
  color:black !important;
}

/*
  Header
*/
.header {
  padding:5rem 0;
}

/*
  Buttons
*/
.btn.btn-primary {
  background-color:black;
  color:white;
  border:2px solid black;

}

.btn.btn-primary:hover {
  background-color:transparent !important;
  color:black !important;
  border:2px solid black;
}

.btn.btn-secondary {
  background-color:transparent;
  color:black;
  border:2px solid black;

}

.btn.btn-success {
  background-color:black !important;
  color:white;
  border:2px solid white;
}

.btn.btn-success:hover {
  background-color:transparent;
  color:white;
  border:2px solid white;
}

.btn.btn-secondary:hover {
  background-color:black !important;
  color:white;
  border:2px solid black;
}


/*
  Footer
*/
#footer input[type="text"]::placeholder,
#footer textarea::placeholder {
  color: black;
  opacity: 1;
}

/* WebKit (Chrome, Safari, newer Edge) */
#footer input[type="text"]::-webkit-input-placeholder,
#footer textarea::-webkit-input-placeholder {
  color: black;
  opacity: 1;
}

/* Firefox */
#footer input[type="text"]::-moz-placeholder,
#footer textarea::-moz-placeholder {
  color: black;
  opacity: 1;
}

/* Internet Explorer 10-11 */
#footer input[type="text"]:-ms-input-placeholder,
#footer textarea:-ms-input-placeholder {
  color: black;
}

/* Microsoft Edge (legacy) */
#footer input[type="text"]::-ms-input-placeholder,
#footer textarea::-ms-input-placeholder {
  color: black;
}






/*
  Privacy policy
*/
.transition {
  transition: transform 0.3s ease;
}

.rotate {
  transform: rotate(180deg);
}

/*
  Page Nav 
*/
#page-nav ul li a {
  color: black !important;
}