/*********** Colour Variables ***********/
:root {
  --Primary01: #002D3A;
  --Primary02: #003848;
  --Primary03: #004356;
  --Primary04: #004E64;
  --Primary05: #005972;
  --Primary06: #006480;
  --Primary07: #016F8E;
  --Grey01: #151718;
  --Grey02: #2A2C2E;
  --Grey03: #3F4245;
  --Grey04: #54585B;
  --Grey05: #696E72;
  --Grey06: #7E8488;
  --Grey07: #939A9F;
  --AccentCool01: #009B90;
  --AccentCool02: #24A99F;
  --AccentCool03: #48B7AF;
  --AccentCool04: #6DC5BF;
  --AccentCool05: #91D4CF;
  --AccentCool06: #B6E2DF;
  --AccentCool07: #DAF0EF;
  --AccentWarm01: #D25A00;
  --AccentWarm02: #E16D16;
  --AccentWarm03: #F0802C;
  --AccentWarm04: #FF9442;
  --AccentWarm05: #FFAE70;
  --AccentWarm06: #FFC89E;
  --AccentWarm07: #FFE2CD;
  --LGrey01: #98A1A4;
  --LGrey02: #A6AEB0;
  --LGrey03: #B5BBBD;
  --LGrey04: #C3C9CA;
  --LGrey05: #D2D6D7;
  --LGrey06: #E0E3E4;
  --LGrey07: #EFF1F1;
  --AccentBright01: #F0C200;
  --AccentBright02: #FFD109;
  --AccentBright03: #FFD82C;
  --AccentBright04: #FFDE4F;
  --AccentBright05: #FFD672;
  --AccentBright06: #FFED95;
  --AccentBright07: #FFF3B9;
  --AccentGold01: #816523;
  --AccentGold02: #A68435;
  --AccentGold02: #C8A34B;
  --AccentGold04: #D8D257;
  --AccentGold05: #E9C164;
  --AccentGold06: #F3D898;
  --AccentGold07: #FEF0CC;
}
/*********** Whole Page settings ***********/
html,
body,
header,
.view-cover {
  /* height: 100vh; */
}
html {
  scroll-behavior: smooth;
}
body {
  position: relative;
}

/*********** Fonts ***********/
body {
  font-family: 'Comfortaa', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--AccentCool01);
}

h3.card-header-title {
  color: var(--AccentCool06);
}

/*********** Navigation ***********/
@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
     background: var(--Primary02) !important;
  }
}
/* Navbar animation */
.navbar {
  background-color: rgba(0, 45, 58, 0.8); }

.top-nav-collapse {
  background-color: var(--Primary02); }

/* Adding color to the Navbar on mobile */
@media only screen and (max-width: 768px) {
  .navbar {
    background-color: var(--Primary02); } }

/*********** Header ***********/
.front-page-img {
  background-image: url("../img/background.jpg");
  min-height: 100vh;
}

.front-page-container {
  height: 45vh;
}

.front-page-button {
  padding: 0;
}
/* user for sub header, colour updated to logo */
.header-h2 {
  font-family: 'Comfortaa', cursive;
  font-weight: bold;
  color: var(--AccentCool02);
}

.subpage-jumbotron-img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.subpage-jumbotron {
  min-height: 40vh;
}

.subpage-notice {
  background-color: var(--LGrey06);
}

/*********** Parallax ***********/
.parallax {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Remove parallax scrolling for mobiles to avoid stupid stuff */
@media(max-width:568px) {
  .parallax {
    background-attachment: scroll;
  }
}

/*********** Images ***********/
.project_img {
  max-height: 550px;
}

/*********** Effects ***********/
/* .border-3 {
    border-width:3px !important;
} */

/* details and summary formatting */
.summary-gradient {
  background-image: linear-gradient(to left, var(--Primary02), var(--AccentCool07));
}

details summary {
  color: var(--Primary02);
  font-size: 1.2em;
  font-family: 'Frank Ruhl Libre', serif;
}


/*********** Color Overwrites ***********/
.primary01 {
  background-color: var(--Primary02);
}
.primary02 {
  background-color: var(--Primary02);
}
.grey03 {
  background-color: var(--Grey03);
}
.grey02 {
  background-color: var(--Grey02);
}
.btn-default {
  background-color: var(--AccentCool02) !important;
}
.article-gradient {
  background-image: linear-gradient(to top left, var(--Primary05), var(--AccentCool02));
}


/*********** Form hCaptcha Widget ***********/
@media(max-width:768px) {
  #hCaptchaWidget {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
  }
}
@media(max-width:568px) {
  #hCaptchaWidget {
    transform:scale(0.67);
    -webkit-transform:scale(0.67);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
  }
}

/*********** Footer ***********/
.page-footer {
  background-color: var(--Primary02) !important;
}
.footer-copyright {
  background-color: var(--Primary01) !important;
}
.footer-copyright p {
  margin-bottom: 0;
}


/*********** Random ***********/
.expand-icon {
  display: inline-block;
  transform: rotate(-45deg);
}