@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200;0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;0,8..60,800;0,8..60,900;1,8..60,200;1,8..60,300;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700;1,8..60,800;1,8..60,900&display=swap');





::backdrop,
:root {
   --font-sans: 'Source Sans 3', sans-serif;
   --font-mono: 'Source Code Pro', monospace;
   --font-serif: 'Source Serif 4', serif;
   --standard-border-radius: 5px;
   --bg: #fff;
   --accent-bg: #f5f7ff;
   --text: #212121;
   --text-light: #585858;
   --border: #898EA4;
   --accent: #0d47a1;
   --code: #d81b60;
   --preformatted: #444;
   --marked: #ffdd33;
   --disabled: #efefef
}


html {
   font-family: var(--font-sans);
   scroll-behavior: smooth
}

body {
   background-color: #ffffff;
   font-family: var(--font-serif);
   color: black;
   min-height: 100vh;
}


a:link,
a:visited {
   color: inherit;
}

/* underline effect adopted from tufte.css */
a {
   text-decoration: none;
   background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor);
   background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor);
   -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
   -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
   background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
   background-repeat: no-repeat, no-repeat, repeat-x;
   text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
   background-position: 0% 93%, 100% 93%, 0% 93%;
}

a:hover {
   color: #516A90;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

   a:link {
      background-position-y: 87%, 87%, 87%;
   }
}


input,
progress,
select,
textarea {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none
}


li {
   margin-bottom: 15px;
}


pre,
code {
   font-family: var('--font-mono');
   white-space: pre-wrap !important;
}

.div-container {
   width: auto;
   margin: auto 10px;
   padding-bottom: 100px;
   max-width: 800px;
}
.div-logo {
   padding: 10px 5px;
}
.div-main {
   padding: 10px 5px;
   border-radius: 10px;
   /* background colour adopted from tufte.css */
   background-color: rgba(255, 255, 248, 0.5);
   box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.025);
}

.div-footnote{
   color: #2f2f2f;
   font-size: 0.8em;
   padding: 7px;

}

.div-footnote-left{
   padding-right: 20px;
   float: left;
}

.div-footnote-right{
   float: right;
   text-align: right;
}



.highlight {
   display: inline-block;
   background: linear-gradient(
       100deg,
       #ffffaf00 1%,
       #ffffaf 2.5%,
       #ffffaf80 5.7%,
       #ffffaf1a 93%,
       #ffffafb4 95%,
       #ffffaf00 98%
     ),
     linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%);
 }
 
 .green-highlight {
   display: inline-block;
   background: linear-gradient(
       100deg,
       #b8ffaf00 1%,
       #b8ffaf 2.5%,
       #b8ffaf80 5.7%,
       #b8ffaf1a 93%,
       #b8ffafb4 95%,
       #b8ffaf00 98%
     ),
     linear-gradient(182deg, #b8ffaf00, #b8ffaf4d 8%, #b8ffaf00 15%);
 }
 
 .pink-highlight {
   display: inline-block;
   background: linear-gradient(
       100deg,
       #ffafd400 1%,
       #ffafd4 2.5%,
       #ffafd480 5.7%,
       #ffafd41a 93%,
       #ffafd4b4 95%,
       #ffafd400 98%
     ),
     linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%);
 }
 
 .blue-highlight {
   display: inline-block;
   background: linear-gradient(
       100deg,
       #afd7ff00 1%,
       #afd7ff 2.5%,
       #afd7ff80 5.7%,
       #afd7ff1a 93%,
       #afd7ffb4 95%,
       #afd7ff00 98%
     ),
     linear-gradient(182deg, #afd7ff00, #afd7ff4d 8%, #afd7ff00 15%);
 }

 

 

/* Larger than phablet */
@media (min-width: 550px) {
   .div-main {
      padding: 40px 55px;
   }
}

button {
   cursor: pointer;
}

img.responsive {
   width: calc(100% - 15px);
   height: auto;
   margin: 5px;
   border-radius: 12px;

 }

 p{line-height: 1.5;}
 li{line-height: 1.8;}
/* Loader Animation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.div-loader img {
   animation: spin 6s linear infinite;
}

/* .div-loader {
    border: 10px solid #f0f0f0;
    border-top: 10px solid #516A90;
    border-radius: 30%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
} */

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */



/* 
html {
    box-sizing: border-box;
}
*/



/* Screen Shortcuts
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}