@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600&display=swap');
.site-info {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}
@keyframes border-pulsate {
  0%   { border-color: var(--cta); }
  50%  { border-color: rgba(0, 0, 0, 0); }
  100% { border-color: var(--cta); }
}
@keyframes attention-grab {
  0%   { box-shadow: none; }
  20%  { box-shadow: 100px 100px 150px var(--cta), 0px -100px 150px var(--cta); }
  100% { box-shadow: none; }
}
.main_side {
  font-size: 115%;
  margin-top: var(--space1);
  color: var(--text1);
}
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.75;
}
h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 500;
  line-height: 1.3;
}
h1, .h1 {font-size: 2.488rem;}
h2, .h2 {font-size: 2.074rem;}
h3, .h3 {font-size: 1.728rem;}
h4, .h4 {font-size: 1.44rem;}
.searchterm, .searchbutton, h5, .h5 {font-size: 1.2rem;}
small, figcaption, .text_small {font-size: 0.9rem;}

@media only screen and (max-width: 900px) {
  .main_side {font-size: 107.5%;}
  h1, .h1 {font-size: 1.802rem;}
  h2, .h2 {font-size: 1.602rem;}
  h3, .h3 {font-size: 1.424rem;}
  h4, .h4 {font-size: 1.266rem;}
  h5, .h5 {font-size: 1.125rem;}
  small, figcaption, .text_small {font-size: 0.8rem;}
  .authorpic {width: 25px; height: 25px;}
}

@media only screen and (max-width: 500px) {
  .main_side {font-size: 100%;}
  h1, .h1 {font-size: 1.383rem;}
  h2, .h2 {font-size: 1.296rem;}
  h3, .h3 {font-size: 1.215rem;}
  h4, .h4 {font-size: 1.138rem;}
  h5, .h5 {font-size: 1.067rem;}

  .searchbox {
    max-width: 100% !important;
  }
  #header {
    gap: calc(var(--space1)* 2) !important;
  }
}

* {
  box-sizing: border-box;
  word-wrap: break-word;
  margin: 0;
  transition: all .1s ease;
  outline: none;
  border: none;
}
a {
  text-decoration: none;
  color: var(--text1);
}
.up {
  color: var(--up);
}
.up-bg {
  background: linear-gradient(90deg, rgba(46,240,39,1) 1%, rgba(9,73,9,0) 1.1%, rgba(0,0,0,0) 49%);
}
.down {
  color: var(--down);
}
.down-bg {
  background: linear-gradient(90deg, rgb(248, 42, 42) 1%, rgba(126,9,9,0) 1.1%, rgba(0,0,0,0) 49%);
}
.caution {
  color: var(--caution);
}
:root {
  --max-width: 1420px;
  --cta: #00eef7; /*#2ef027*/
  --ctagr: linear-gradient(90deg, rgba(0,238,247,1) 1%, rgba(28,129,24,0) 2%, rgba(26,102,146,0) 49%);
  --cta2: #02a9af;
  --cta2trans: rgba(0, 28, 29, 0.75);
  --bdf1: invert(5%);
  --bdf2: blur(10px);
  --bdf3: invert(2%);
  --text1: #ffffff;
  --text2: #cccccc;
  --text3: #a3a3a3;
  --down: #ae1010;
  --up: #2EF027;
  --caution: #e8f537;
  --overlay-color: black;
  --space0: 4px;
  --space1: 16px;
  --space2: 20px;
  --space3: 32px;
  --shadow0: 1px 0px 5px 1px rgba(0,0,0,0.02);
  --shadow1: 1px 0px 5px 1px rgba(0,0,0,0.04);
  --shadow2: 2px 0px 6px 2px rgba(0,0,0,0.14);
  --bs1: 5px 5px 10px #101011, -5px -5px 10px #1a1629;
  --radius0: 3px;
  --radius1: 5px;
  --bg1: linear-gradient(115deg, #040a0e, #1a1629);
  --bg2: linear-gradient(58deg, rgba(2,0,36,1) 0%, rgba(19,29,65,1) 14%, rgba(2,0,36,1) 26%, rgba(17,26,56,1) 61%, rgba(2,0,36,1) 69%, rgba(16,26,62,1) 89%, rgba(2,0,36,1) 100%);
}
html {
  background: var(--bg1);
  min-height: 100%;
}
body {
  max-width: var(--max-width);
  margin: 0 auto;
}
header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  z-index: 5;
  border-radius: 0 0 var(--radius0) var(--radius0);
  background: var(--bg1);
}
#header {
  flex-grow: 999;
  position: sticky;
  top: 0;
  padding: var(--space1);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space1);
}
.logoWrapper {
  display: inline-block;
  max-height: 60px;
  max-width: 180px;
}
.logoWrapper a {
  max-height: 60px;
}
.logo {
  display: block;
  max-height: 60px;
  max-width: 180px;
}
.h1margin {
  margin-bottom: var(--space1);
}

/** grids **/
.grid2, .grid3 {
  display: grid;
  grid-gap: var(--space1);
}
.grid1 {
  display: flex;
  flex-direction: column;
  gap: var(--space1);
}
.grid2 {
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 25fr));
}
.grid3 {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
/** end grids **/

/** menu **/
.menu-wrap {
  position: relative;
  z-index: 1;
  height: 40px;
  width: 40px;
}
.menu-wrap .toggler {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  width: 40px;
  height: 40px;
  opacity: 0;
}
.menu-wrap .hamburger {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius1);
  width: 40px;
  height: 40px;
  padding: .9rem .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hamburger line */
.menu-wrap .hamburger > div {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--cta);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0s ease;
}
/* Top and bottom lines */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7px;
  width: 100%;
  height: 2px;
  background: inherit;
}
/* Moves line down */
.menu-wrap .hamburger > div::after {
  top: 7px;
}
/* Toggler animate */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}
/* Turn lines into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
/* Show menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
}
.menu-wrap .toggler:checked ~ .menu > div > nav {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.menu-wrap .menu > div {
  backdrop-filter: var(--bdf2);
  border-radius: 10%;
  width: 200vw;
  height: 200vh;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
}
.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.menu-wrap .menu > div > nav > ul {
  padding: 0;
}
.menu-wrap .menu > div > nav > ul > li {
  list-style: none;
  color: var(--text1);
  font-size: 1.5rem;
  padding: 1rem;
}
.menu-wrap .menu > div > nav > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}
/** end menu **/

/** searchbox **/
.searchbox {
  max-height: 40px;
}
.searchbox:target > form .searchterm {
  border: 2px solid var(--cta);
  animation: border-pulsate 3s infinite, attention-grab 4s;
}
.searchform {
  position: relative;
  max-height: 40px;
}
.searchterm {
  background: none;
  backdrop-filter: var(--bdf1);
  color: var(--text1);
  max-height: 40px;
  width: 100%;
  padding: 0 32px 0 8px;
  line-height: 2;
  border-radius: var(--radius1);
  box-shadow: var(--shadow1);
}
.searchbutton {
  color: var(--text1);
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 0 12px;
  background: none;
  line-height: 0.5;
}
.searchbutton:hover {
  cursor: pointer;
}
.resultText {
  margin: var(--space2) 0;
}
/** end searchbox **/

/** maingrid **/
.maingrid {
  display: flex;
  flex-wrap: wrap-reverse;
  max-width: 100%;
}
main, #footer {
  margin: var(--space1);
  flex-basis: 0;
  flex-grow: 99;
  min-width: 50%;
}
.side {
  display: flex;
  flex-direction: column;
  gap: var(--space3);
  flex-basis: 280px;
  flex-grow: 1;
  margin: var(--space1);
}
/** end maingrid **/

/** featured/categorylist **/
.featured .category .title {
  color: var(--cta2);
}
.featured .category .description {
  color: var(--text2);
  max-width: 440px;
}
.featured {
  backdrop-filter: var(--bdf1);
  border-radius: var(--radius1);
  padding: var(--space1);
  margin-bottom: var(--space3);
}
.featured ul, .categorylist ul {
  padding: 0;
}
.featured li, .categorylist li {
  list-style-type: none;
  border-radius: var(--radius1);
  padding: var(--space0) var(--space1);
  box-shadow: var(--bs1);
  backdrop-filter: var(--bdf1);
}
.categorylist li {
 background: var(--ctagr);
 box-shadow: var(--shadow2);
}
.featured li a, .categorylist li a {
  display: block;
  color: var(--text2);
}
.featuredtitle {
  padding-bottom: var(--space1);
}
.featured .items {
  padding-bottom: var(--space1);
}
.featured .more {
  color: var(--cta);
  display: block;
  width: 100%;
  text-align: right;
  font-weight: 500;
}
.featured .more:after {
  content: ' \276F';
}
.featured .more:before {
  content: 'Explore ';
}
/** end featured/categorylist **/


/** articles collections **/
.articleCollection {
  backdrop-filter: var(--bdf1);
  border-radius: var(--radius1);
  margin-bottom: var(--space3);
}
.articleCard {
  padding: var(--space1);
}
.articleCard .cardWrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.articleCard .category {
  position: absolute;
  top: var(--space0);
  left: var(--space0);
  background: var(--cta2trans);
  color: var(--cta);
  font-weight: 500;
  z-index: 2;
  padding: calc(var(--space0) - 50%) var(--space1);
  box-shadow: var(--bs1);
}
.articleCard .title-excerpt {
  position: relative;
  display: inline-block;
  padding: var(--space0) 0 var(--space0) var(--space0);
  backdrop-filter: var(--bdf2);
}
.articleCard .imagewrap {
 margin-right: 0;
 width: 100%;
}
.articleCard .image {
  position: relative;
  width: 100%;
  border-radius: var(--radius0);
}


/** paginator **/
.paginator {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: var(--space3) 0;
}
.paginator .previous:after {
  content: '\276F';
  margin-left: var(--space0);
  color: var(--cta2);
}
.paginator .next:before {
  content: '\2770';
  margin-right: var(--space0);
  color: var(--cta2);
}
.paginator .next a, .paginator .previous a {
  color: var(--cta2);
  font-weight: 500;
}
.paginator .current {
  font-weight: 300;
  color: var(--text2);
  margin: 0 var(--space3)
}

/* blogpost */
.blogpost .details {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space0);
}
.blogpost .category {
  background: var(--cta2trans);
  color: var(--cta);
  font-weight: 500;
  z-index: 2;
  padding: calc(var(--space0) - 50%) var(--space1);
  box-shadow: var(--bs1);
}
.blogpost a {
  color: var(--cta);
}
.blogpost .tolinkswrap {
  margin-bottom: var(--space1);
}
.blogpost .tolinks:hover {
  text-decoration: underline;
}
.blogpost .tolinks:after, .blogpost .tolinks:before {
  margin: 0 var(--space0);
  content: "\2304";
  color: var(--cta);
}
.blogpost .relatedonion:before {
  content: "This post is about: "
}
.blogpost .details {
  margin-bottom: var(--space1);
}
.blogpost .details .created {
  white-space: nowrap;
}
.blogpost .modified {
  white-space: nowrap;
  display: block;
  color: var(--text2);
}
.blogpost h1 {
  margin-bottom: var(--space1);
}
.blogpost h2, .blogpost h3, .blogpost h4, .blogpost h5 {
  margin: 0 0 var(--space1) 0;
  max-width: 800px;
}
.blogpost p {
  margin-bottom: var(--space2);
  max-width: 760px;
  color: var(--text2);
}
.blogpost .image {
  margin-bottom: var(--space2);
}
.blogpost .image:has(figcaption) {
  display: inline-block;
  padding: var(--space0);
  border-radius: var(--radius0);
  backdrop-filter: var(--bdf3);
}
.blogpost .image figcaption {
  text-align: center;
}
.blogpost .image img {
  max-width: 100%;
  height: auto !important;
}

/* similar */
.similar h5 {
  margin-bottom: var(--space1);
}

/* category */
.catDesc {
  margin-bottom: var(--space1);
  max-width: 760px;
  color: var(--text2);
}
.catDesc a {
  color: var(--cta);
}

/** links/stats **/
.servicelinks div {
  color: var(--text3)
}
.servicelinks, .features {
  border-radius: var(--radius1);
  backdrop-filter: var(--bdf1);
  border: 1px solid var(--bg1);
  margin: var(--space3) 0;
  box-shadow: var(--shadow0);
}
.servicelinks .links {
  display: flex;
  flex-direction: column;
}
.servicelinks .link {
  color: var(--cta);
}
.servicelinks .urlwrapper {
  display: flex;
  justify-content: space-between;
  padding: var(--space1);
  word-break: break-all;
  border-top: 1px solid var(--bg1);
}
.features a {
  word-wrap: break-word;
  word-break: break-all;
  color: var(--cta);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.features .to_links {
  display: block;
  text-decoration: underline;
}
.features .more:after {
  content: "More Info";
  text-decoration: underline;
  color: var(--cta);
}
.features h2, .servicelinks h2 {
  margin: 0;
  padding: var(--space1);
}
.features table {
  width: 100%;
}
.features tr th {
  padding: var(--space0);
  text-align: left;
}
.features tr td {
  padding: var(--space1) var(--space0);
  word-wrap: break-word;
}
.features tr:nth-child(odd), .servicelinks .links .urlwrapper:nth-child(even) {
  background: var(--bg1);
}
/* speeds */
.speedwrap {
  height: 100%;
  min-height: 38px;
  min-width: 44px;
  position: relative;
  margin: auto 0 auto var(--space0);
}
.dn {
  --outline: var(--down);
  --firstbar: none;
  --secondbar: none;
  --thirdbar: none;
}
.sl {
  --outline: orange;
  --firstbar: none;
  --secondbar: none;
  --thirdbar: orange;
}
.md {
  --outline: var(--caution);
  --firstbar: none;
  --secondbar: var(--caution);
  --thirdbar: var(--caution);
}
.fs {
  --outline: var(--up);
  --firstbar: var(--up);
  --secondbar: var(--up);
  --thirdbar: var(--up);

}
.speed {
  width: 8px;
  height: 99%;
  position: absolute;
  background: var(--firstbar);
  border: 1px solid var(--outline);
  border-radius: 3px;
  margin: auto;
} 
.speed:before {
  width: 6px;
  height: 66%;
  position: absolute;
  border: 1px solid var(--outline);
  left: 15px;
  bottom: 0;
  background: var(--secondbar);
  content: "";
  border-radius: 3px;
}
.speed:after {
  width: 6px;
  height: 33%;
  position: absolute;
  border: 1px solid var(--outline);
  left: 30px;
  bottom: 0;
  background: var(--thirdbar);
  content: "";
  border-radius: 3px;
}
/* speeds end */
/** links/stats end **/


/** FAQ accordion **/
/* Core styles/functionality */
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 40rem;
}

/* Visual styles */
.accordion {
  backdrop-filter: var(--bdf1);
  border-radius: var(--radius1);
  overflow: hidden;
}
.tab__label {
  display: flex;
  cursor: pointer;
  color: var(--text1);
  font-weight: 500;
  justify-content: space-between;
  padding: var(--space1);
}
.tab__label::after {
  content: "\276F";
  color: var(--cta);
  width: 1em;
  height: 1em;
  padding-bottom: var(--space1);
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab__content p {
  margin: 0;
  padding: var(--space1);
  color: var(--text2);
  backdrop-filter: var(--bdf1);
}
.tab__content p a {
  color: var(--cta);
  font-weight: 500;
  text-decoration: underline;
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce 1s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}
/** end FAQ accordion **/

/** lists **/
.list .listitem {
  margin-top: var(--space3);
}
.list .listitem .description {
  max-width: 560px;
}
.list .listitem .title:after {
  content: ' \276F';
  color: var(--cta);
}
/** end lists **/

/** footer **/
footer .maingrid{
  flex-wrap: wrap;
}
#footer ul {
  list-style: none;
  display: flex;
  gap: var(--space1);
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 var(--space1);
}
#footer li a{
  padding: 0;
  color: var(--cta2);
  font-weight: 500;
}
#subfooter {
  display: none;
}

/* filters */
.filter {
  margin-bottom: var(--space1);
}
.filterLink {
  color: var(--cta);
}
/* filters end */