:root {
  --content: #43256E;
  --bonesdale-blue: #025a87;
  --bonesdale-darkblue: #004773;
  --bonesdale-yellow: #eeb95a;
  --bonesdale-darkyellow: #bf8f31;
  --bonesdale-red: #ac0515;
  --bonesdale-darkred: #780000;
  --trans: rgba(2, 90, 135, 0.85);
  } 

body {
  background-color: var(--trans);
  position: relative;
  color: white;
  font-family: georgia;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    background-color: white;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid grey;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ffd6da;
    border: 1px solid #e8a5ab;
}

.header {
  background-color: var(--bonesdale-blue);
    position: relative;
    box-sizing: border-box;
}

.header-content { display: flex; }

.icon { float: left;margin-right:15px; }

.header-text { float: right; }

.header-text h1 {
  color: var(--bonesdale-yellow);
  font-family: 'Lexend', helvetica, sans-serif;
}

.header-text h1 a:visited, a:hover, a:link {
  color: var(--bonesdale-yellow);
  text-decoration: none !important;
}

.list{
    display: none;
}

.footer {
  background-color: var(--bonesdale-blue);
  text-align: center;
  box-sizing: border-box;
}

.footer p {
  color: var(--bonesdale-yellow);
}

.content {
  background-color:white;
  padding: 15px;
}

.left {
  padding: 15px;
  margin-bottom: 15px;
  background-color:var(--bonesdale-blue);
  border: 2px solid var(--bonesdale-red);
}

.right {
  padding: 15px;
  margin-bottom: 15px;
  background-color:var(--bonesdale-blue);
  border: 2px solid var(--bonesdale-red);
}

.flex { display:flex; }

.warning { text-align:center;padding: 15px;margin-bottom: 15px !important;background-color:var(--bonesdale-yellow);border: 2px dashed var(--bonesdale-red);width:90%;border-radius:25px;margin: 0 auto; }
.warning h1, .warning h2, .warning h3, .warning p { color: var(--bonesdale-red); }

/* Scrollbar Styling */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background-color: var(--bonesdale-blue);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid var(--bonesdale-darkblue);
}

body::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--bonesdale-red);
    border: 1px solid var(--bonesdale-darkred);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--bonesdale-blue);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid var(--bonesdale-darkblue);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--bonesdale-red);
    border: 1px solid var(--bonesdale-darkred);
}

::-moz-selection { /* Code for Firefox */
  color: var(--bonesdale-red);
  background: var(--bonesdale-yellow);
}

::selection {
  color: var(--bonesdale-red);
  background: var(--bonesdale-yellow);
}

.yellow p::-moz-selection { /* Code for Firefox */
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow p::selection {
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow h1::-moz-selection { /* Code for Firefox */
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow h1::selection {
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow h2::-moz-selection { /* Code for Firefox */
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow h2::selection {
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow h3::-moz-selection { /* Code for Firefox */
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow h3::selection {
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow i::-moz-selection { /* Code for Firefox */
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow i::selection {
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow b::-moz-selection { /* Code for Firefox */
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow b::selection {
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow a::-moz-selection { /* Code for Firefox */
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

.yellow a::selection {
  color: white !important;
  background: var(--bonesdale-blue) !important;
}

h1 { font-family: 'Lexend', helvetica;color: var(--bonesdale-yellow);font-size:2em; }
h2, h3 { font-family: 'Lexend', helvetica;color: var(--bonesdale-yellow) }
a { color: var(--bonesdale-yellow); }
a:hover { font-style:italic;text-decoration-style: dotted; }
li a:hover { font-style:italic;text-decoration-style: dotted; }
mark { background-color: #cec98f;color: #7f5627;}

.indent { margin-left:15px; }