:root,
    html[data-theme="light"] {
        --LightOn: flex;
        --LightOff: none;
        --accent: #6f94d1;
        --body: #1f1f1f;
        --background: #f9f9f9;
        --border: #c9c8c8;
        --body-font:arial;
        --text-size:13px;
        --text-align:justify;
        --title-font:garamond;
      }
      html[data-theme="dark"] {
        --LightOn: none;
        --LightOff: flex;
        --body: #fff;
        --border: #d3d4d4;
        --accent: #6f94d1;
        --background: #090909;
      }
 
      html.theme-transition,
      html.theme-transition *,
      html.theme-transition *:before,
      html.theme-transition *:after {
        transition: 0s !important;
        transition-delay: 0 !important;
      }
 
@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; } }
 
@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; } }
 
@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; } }
 
 
/*----- BASIC STYLING -----*/
 
body {
    font-family:var(--body-font);
    font-size:var(--text-size);
    color:var(--body);
    background-color:var(--background);
    min-height: 100vh !important;
    line-height: 170%;
    text-align:var(--text-align);
    word-wrap: break-word;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    -webkit-animation: fadein 1.5s;
    -moz-animation:fadein 1.5s;
    animation:fadein 1.5s;
}
 
a {
    color: var(--accent);
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
 
a:hover {
    color: #b8b8b8; /* link hover color */
}
 
.dark-switch {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 20px;
        padding:8px;
        height: 20px;
        font-size: 30px;
        text-align: center;
        color: var(--body);
      }
 
.light-on {
        display: var(--LightOn);
      }
 
.light-off {
        display: var(--LightOff);
      }

.tippy-box{
    font-family:'Albert Sans';
    font-size:calc(var(--fontSize) - 2px);
    color:#fff;
    box-shadow:-2px -2px inset var(--accent); 
}

h1 {
    font-size:calc(var(--text-size) + 1px);
    letter-spacing:0.75px;
    color:var(--accent);
    font-weight: 700;
    margin:0 0 1.25em 0;
    text-transform: uppercase;
}
 
h1 svg {
  width:15px;
  height:15px;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align:middle;
  margin-top:-3px;
  margin-right:5px;
}
 
h2 {
    font-size: 15px;
    font-weight: 700;
    word-spacing: 3px;
    color:var(--accent);
    margin:0;
    padding:0;
}
 
main {
    margin:auto;
    margin-top:20px;
    width:800px;
    height: auto;
    background-color:var(--background);
    box-shadow:2px 2px 7px #e2e2e2;
    border:1px solid #eee;
}
 
#content-wrap {
    padding:2.5em;
}
 
section {
    padding:3em;
    width:800px;
    border-left:1px solid var(--accent);
    border-right:1px solid var(--accent);
    border-bottom:1px solid var(--accent);
}

blockquote{
    padding-left:10px;
    border-left:2px solid var(--accent);
    margin:20px !important;
}
 
heading {
    display:block;
    text-align: center;
    border: 1px solid var(--accent);
    padding:2.5em;
    font-size:14px;
}
 
heading a {
    padding:0 3px;
    color:var(--body);
}
 
heading a:hover {
    color:var(--accent);
}
 
#title {
    font-family:var(--title-font);
    color:var(--accent);
    font-size:25px;
    word-spacing: 3px;
    margin-bottom:10px;
    text-transform: uppercase;
}
 
.line {
    height:1px;
    width:75px;
    margin:2em auto;
    background-color:var(--body);
}

.container {
  display: flex;
}

table {
  margin-right:50px;
    border: 1px solid #526e9c;
}

.table td, th {
    border: 1px solid #526e9c;
  padding: 10px;
  text-align:left;
}

 tr:hover {
   background-color: #6f94d1;
   } 
   
.table th {
  background-color: #6f94d1;
}


.tabs{
          display:flex;
          width:100%;
          position:sticky;
          top:0;
          z-index:99;
          align-items:center;
          justify-content:center;
          margin-top:10px;
      }
      
      .tabs a{
          border-bottom:none !important;
      }
      
      .tabs ul li a{
          font-size:12px;
      }
      
      .tabs ul li a:hover{
          color:var(--accent) !important;
          border-bottom:3px solid var(--accent) !important;
      }
      
      .tabs ul li.is-active a{
          color:var(--accent) !important;
          font-weight:700;
          border-bottom:3px solid var(--accent) !important;
      }
      
      .tab-content{
          display:none;
          width:100%;
      }
      
      .tab-content.is-active{
          display:flex;
          flex-wrap:wrap;
          align-items:flex-start;
          justify-content:center;
      }

@media only screen and (max-width: 1100px) {
 
    main {width:80%;}
}
 
/*--- for mobile devices ---*/
 
@media only screen and (max-width: 720px) {
    main {width: 90vw;}
    section {width:90vw;}
 
    .details-columns {
        display: grid;
        grid-template-columns:50% 50%;
    }
 
}