html {
    font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
    --logo-color: #34AB;
    --logo-color-alt:  #d6d9ee;
    --bg-color: #fff;
}
h1, h2 {
    font-weight: normal;
}

#title a {
    text-decoration: none;
    color: var(--logo-color);
}

#navbar li {
    display: inline;
}

#navbar a {
    
}

#options_container {
    margin: auto;
    width: 80%;
    align-items: center;
    justify-content: center;
}

.platforms {
    display: table;
    width: 100%;
    margin: auto;
}

.platform_group {
    display: table-cell;
    text-align: center;
    padding: 10px;
    margin: 10px;
}

#table_container a {
    color: var(--logo-color);
}


/* Slider stuff inspired by https://codepen.io/alvarotrigo/pen/abVPyaJ */
.toggle {
    display: none;
}

.slider {
  cursor: pointer;
  text-indent: 50px;
  width: 40px;
  height: 20px;
  white-space: nowrap;
  background: grey;
  display: inline-block;
  border-radius: 100px;
  position: relative;
  margin-left: 10px;
  margin-right: 50px;
}

.slider:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 18px;
  transition: 0.3s;
}

.toggle:checked + .slider {
  background: var(--logo-color);
}

.toggle:checked + .slider:after {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

.slider:active:after {
  width: 26px;
}

/* checkmark inspired by https://jsfiddle.net/mirohristov/awayF/473/ */
.ac {
    
}

.tick {
    display:inline-block;
    width: 22px;
    height:22px;
    background: var(--logo-color);
    border-radius:50%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.tick:before{
    content:"";
    position: absolute;
    width:3px;
    height:9px;
    background-color: var(--bg-color);
    left:11px;
    top:6px;
}

.tick:after{
    content:"";
    position: absolute;
    width:3px;
    height:3px;
    background-color: var(--bg-color);
    left:8px;
    top:12px;
}


.infohover {
    display: inline-flex;
    width: 22px;
    height: 22px;
    background: var(--logo-color);
    border-radius: 50%;
    color: var(--bg-color);
    align-items: center;
    justify-content: center;
}

.infohover::before {
    position: absolute;
    content: "?";
}

.infobox {
    display: none;
}

td:hover .infobox {
    display: block;
    background-color: var(--logo-color-alt);
    position: absolute;
    padding: 10px;
    z-index: 10;
}