@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
    font-size: 12pt; 
    line-height:20pt;
    /* Primary colours */
    --c5-prime: #63718d;
    --c4-prime: #676f82;
    --c4d-prime: #5c6568;
    --c3-prime: #b7d1e2;
    --c3d-prime: #93BAD3;
    --c3p-prime: #B7BCE2;
    --c3p2prime: #B7E2DE;
    --c2-prime: #d7dee4;
    --c1-prime: #e8ecef;
    /* other colours */
    --black: #171717;
    --white: #FFFFFF;
    
    /* breadcrumb */
    --bs-breadcrumb-divider: '>';
    --bs-breadcrumb-divider-color: var(--black) !important;
}
body{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:   "wdth" 100;
    color: var(--black);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; 
    font-weight: 400;
    font-style: normal;
}
p{
    font-size:1.2rem;
    line-height:1.4rem;
    margin-top:10px!important;
    margin-bottom:25px!important;
}
h1,h2,h3,h4,h5{
    font-family: "Pacifico", cursive;
    font-weight: 500;
    font-style: normal;
}
h1{    
    font-size:3rem;
    line-height:3.5rem;
    margin-bottom:30px;
    margin-top:10px;
}
h2{    
    font-size:2.7rem;
    line-height:3.1rem;
    margin-bottom:30px;
    margin-top:10px;
}
h3{    
    font-size:2.4rem;
    line-height:2.8rem;
    margin-bottom:30px;
    margin-top:10px;
}
h4{    
    font-size:2.1rem;
    line-height:2.5rem;
    margin-bottom:30px;
    margin-top:10px;
}
h5{    
    font-size:1.8rem;
    line-height:2.2rem;
    margin-bottom:30px;
    margin-top:10px;
}
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}
.bttButton, .bttButton:hover{
    background-color:var(--white)!important;    
    color:var(--c5-prime)!important;
    border: 2px solid var(--c5-prime);
    padding:6px;
    font-size:1rem!important;
}
.ClearFloat{ clear:both;}
.IconStyle{
    color:var(--white);
}
.HeaderBarStyle{
    background-color:var(--c5-prime); 
    color:var(--white)!important;
    font-family: "Pacifico", cursive;
    font-weight: 500;
    font-style: normal; 
    color:var(--white)!important;
    text-decoration:none!important;
    font-size:2rem;
    border:none;
    padding:5px 5px 15px 5px;
}
/* generic link */
a{
    color:var(--black);
    text-decoration:none;
    border-bottom:2px solid;
}
a:hover{
    background-color:var(--c4-prime);
    color:var(--white);
}
a:focus{
    background-color: var(--c4-prime);
    color: var(--white);
    text-decoration: none;  
    border: 0px;
}
/* /generic link */
/* nav bar */
.NavBarStyle{
   background-color:var(--c3-prime); 
   color:var(--black)!important;
}
.navbar-toggler, .navbar-toggler-icon {color:var(--black)!important;}
.navbar-brand{
  font-family: "Pacifico", cursive;
  font-weight: 500;
  font-style: normal; 
  color:var(--black)!important;
  text-decoration:none!important;
  font-size:1.8rem;
  border:none;
}
.nav-item a{padding-left:20px!important; padding-right:20px!important; font-weight:600; color:var(--black)!important;}
.nav-item a:hover,.nav-item a:active{background-color: var(--c3d-prime);}
.nav-item a:focus{    
    background-color: var(--c4-prime)!important;
    color: var(--white)!important;
    text-decoration: none;  
    border: 0px;}
.nav-item .active{background-color: var(--c3p-prime);}

.breadcrumb{
    font-style: normal; 
    font-size:1.2rem;
    font-weight:500;
    margin:20px 0px 20px 0px;
    padding:0px;
    color:var(--c5-prime)!important;
}
.breadcrumb a{ padding: 0px 5px; 0px 5px;}
.breadcrumb .active{color:#575859!important}
/* /nav bar */
/* Skip to content */
.stc-container {
    background-color:var(--black);
    color:var(--white);
}
.stc-container a{ 
    color:var(--white);
    font-size:18px;
    font-weight:600;
}
.stc-container a:hover{ color:var(--white);}
.skip-to-content {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(1px 1px 1px 1px);
}
.skip-to-content:focus {
    position: static;
    width: auto;
    height: auto;    
    display:inline-block;
    padding:10px;
    background-color:var(--black);
}
/* /Skip to content */
/* cards */
.card-header{
    background-color:var(--c5-prime);    
}
.card-header a, .card-header{
    color:var(--white)!important;
    border:none;
    font-family: "Pacifico", cursive;
    font-weight: 500;
    font-style: normal;
    display:block;
}
.card-header a:hover{
    background-color:transparent !important;
}
.card-header a:active{
    background-color:var(--white)!important;
    color:var(--c5-prime)!important; 
}
.card-header a:focus{
    background-color:var(--white)!important;
    color:var(--c5-prime)!important; 
}
.card-header a:focus .IconStyle{
     background-color:var(--white)!important;
    color:var(--c5-prime)!important;   
}
.HpCardList {}
.HpCardList li {
    font-family: "Pacifico";
    font-style: normal;
    font-weight:normal;
    line-height:2.8rem;
    font-size:1.4rem;
    margin-left:0px;
    padding-left:0px;
}
.HpCardList li a{border:none!important;}
.HpCardFooterLink{
   background-color:var(--c3-prime);  
}
.HpCardFooterLink a{
    border:none;
}
.HpCardFooterLink a .IconStyle{
    color:var(--black);
}
.HpCardFooterLink a:focus .IconStyle{
    color:var(--white);
}
.cb-Main {
     font-weight: 500;
    font-style: normal; 
    font-size:1.1rem;
}
.cb-Main a {
     color:var(--black);
    padding:5px !important; 
    text-decoration:none!important;
    border-bottom:none;
}
.cb-Main a .IconStyle, .cb-Main a{
    color:var(--black);
}
.cb-Main a:focus .IconStyle, .cb-Main a:focus{
    color:var(--white);
}
.cb-Main a:hover .IconStyle, .cb-Main a:hover{
    color:var(--white);
}
/* / cards */

/* footer */
.footerStyleCon{
    background-color:var(--c5-prime); 
    color:var(--white)!important;
    font-family: "Pacifico", cursive;
    font-weight: 500;
    font-style: normal; 
    text-decoration:none!important;
    font-size:1rem;}
.FooterStyle{}
.footerText{}
/* /footer */
/* Recipie page */
.ingredientsList li{    
    margin:0px;
    padding:0px;
    font-size:1.2rem!important;
    line-height:1.4rem!important;
    margin-top:10px!important;
    margin-bottom:10px!important;
}
.recipieJumpTo {margin:25px 0px 25px 0px; padding:0px;}
.recipieJumpTo li {
     margin:0px;
    padding:0px;
    font-size:1.2rem!important;
    line-height:1.4rem!important;
    margin-top:10px!important;
    margin-bottom:10px!important;   
    list-style-type:none;
}
.recipieJumpTo li a{border-bottom:none; padding:0px 10px 0px 10px;}