:root {
  /*pallete 1 */
  --darkest-color: #08084D;
  --less-dark-color: #5B5BB3;
  --mid-color: #7C7CCC; 
  --less-light-color: #A3A3E6;
  --lightest-color: #FCFCFF;
  --container-bg: #FCFCFF; /* lighter than lightest */
  --font-family: sans-serif, Helvetica, Arial;
  --padding: 10px;
  --font-size-read: 14px;
  --font-size-large: 18px;
  --font-size-small: 12px;
  --font-size-title: 24px;
  --premium-color: #6ee59c;
  --premium-color-hover: #bef4d3;
  --login-color: #6ee59c;
  --login-color-hover: #bef4d3;
  --link-color-lightbg: #5B5BB3;
  --link-color-lightbg-hover: #A3A3E6;
  --link-color-darkbg: #A3A3E6; /*#c98682; */
  --link-color-darkbg-hover: #d7d7f4;
  --solved-color:  #6b9080;
  --attempted-color: #b41735;
  --coffee-dark: #5B5BB3;
  --coffee-light: #d7d7f4;
  --link-block-dark: #626631;
--link-block-dark-hover: #313419;
  --link-block-light: #dbddb9;
  --question-overview-dark: #316645;
  --question-overview-light: #b9ddc7;
  --attn-dark-color:#aa5551;
  --attn-light-color:#eedddc;
  --tip-dark-color: #996d56;
  --tip-light-color: #f2e7e1;
  --disabled-link-color: #d7d7f4;
  --topic-color: #3C8028; /*#53192c;*/
  --seen-color:#626631;
  --medium-color:#BF886B;
  --easy-color: #223726;
  --hard-color: #8B293B;

  
}







.hint {
  color: #FFF;
}
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  .attention::before {
    font-family: "Font Awesome 5 Free"; font-weight: 300; content: "\f06a";
    padding: 5px;
  }

/* Whole document: */
body{
  font-family: Helvetica;
  font-size: 12pt;
}
/* Headers */
h1,h2,h3,h4,h5,h6{
  font-size: 16pt;
}


.vAttn {
  border-left: 6px solid var(--attn-dark-color); /* #b41735;*/
}

.vLink {
  border-left: 6px solid var(--link-block-dark);
}


.vTerminology {
    border-left: 6px solid var(--link-color-lightbg); /* #4a4e69;*/
  }
  
/* .vTerminology {
  border-left: 6px solid var(--link-color-lightbg); 
} */

.vTip {
  border-left: 6px solid var(--tip-dark-color); /*#03045e;*/
}

.vcoffee {
  border-left: 6px solid var(--coffee-dark); /* #6b9080;*/
}



.bgAttn {
  border-radius: 5px;
  background: var(--attn-light-color); /*#f4e1e5;*/
  padding: 15px;
}

.bgLink {
  border-radius: 5px;
  background: var(--link-block-light);
  padding: 10px;
}

.bgTerminology {
  border-radius: 5px;
  background: transparent!important; /* #f2e9e4;*/
  padding: 10px;
}

.bgTip {
  border-radius: 5px;
  background: var(--tip-light-color);
  padding: 10px;
}

.bgcoffee {
  border-radius: 5px;
  background: var(--coffee-light); /* #eaf4f4;*/
  padding: 15px;
}

/*-----Body Links-------*/

.book .book-body .page-wrapper .page-inner section.normal a {
  color:var(--link-color-lightbg)!important; /* #3f88ca;*/
}

.book .book-body .page-wrapper .page-inner section.normal a:hover {
color: var(---link-color-lightbg-hover)!important; /*#1f5386; /* darker color when hovering */
text-decoration: none;
}

/* let everythig fall back to this. 
 This should be equivalent to link on light 
 */
a:active {
  text-decoration: none;
  color:var(--link-color-lightbg)!important;
}


a:link {
  text-decoration: none;
  color:var(--link-color-lightbg)!important;
}



a:visited {
  text-decoration: none;
  color:vvar(--link-color-lightbg)!important;
} 


a:hover {
  color: var(--link-color-lightbg-hover)!important;
}


.easy-bubble {
  background-color: transparent; /*(--container-bg);*/
  color: var(--easy-color);
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-size: var(--font-size-read);
  display: inline-block;
  vertical-align: middle;
}


.hard-bubble {
  background-color: transparent; /* var(--container-bg);*/
  color: var(--hard-color);
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}



.medium-bubble {
  background-color: transparent; /* var(--container-bg);*/
  color: var(--medium-color);
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-size: var(--font-size-read);
  display: inline-block;
  vertical-align: middle;
}


.seen-bubble {
  background-color: transparent; /*(--container-bg);*/
  color: var(--seen-color);
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-size: var(--font-size-read);
  display: inline-block;
  vertical-align: middle;
}

.link-bubble {
  background-color: transparent; /*(--container-bg);*/
  color: var(--link-color-lightbg);
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-size: var(--font-size-read);
  display: inline-block;
  vertical-align: middle;
}

.link-bubble::before{
   font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0c1"; /*<i class="fa-solid fa-tag"*/
  padding: 5px;
  
}

.topic-bubble {
  background-color: transparent;
  color: var(--topic-color);
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 2px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}

.topic-bubble::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b"; /*<i class="fa-solid fa-tag"*/
  padding: 5px;
}

.easy-bubble::before, .medium-bubble::before, .hard-bubble::before  {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f11b"; /*<i class="fa-solid fa-tag"*/
  padding: 5px;
}

.seen-bubble::before{
   font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f06e"; /*<i class="fa-solid fa-tag"*/
  padding: 5px;
  
}