/* Root vars */
:root{
--background-primary: #fefefe;  /* var(--background-primary) */
--orange-primary:#ff6600; /* var(--orange-primary) */
--orange-secondary: #cc5200; /* var(--orange-secondary) */
--black-primary:#101010; /* var(--black-primary )*/
--blue-primary: #0068bf; /* var(--blue-primary )*/
--grey-primary: grey; /* var(--grey-primary )*/
--white-primary: #f2f2f2; /* var(--white-primary )*/
--white-secondary: #dee2e6; /* var(--white-secondary )*/
}
/* Body */
body{
    background-color:var(--background-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    margin:0;
    padding:0;
}
/* CSS Navbar */
.topnav{
    overflow: hidden;
    background-color: var(--black-primary);
    border-top-color: var(--blue-primary);
    border-top-width: 3px;
    border-top-style: solid;
    border-bottom-color: var(--orange-primary);
    border-bottom-width: 3px;
    border-bottom-style: solid;
}
.topnav a{
    float: left;
    display: block;
    color: var(--white-primary);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
 }
 .topnav a:hover{
    color: var(--orange-primary);
}
.topnav a.active{
    color: var(--orange-primary);
}
.topnav .icon{
    display: none;
}
@media screen and (max-width: 1160px){
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
}
@media screen and (max-width: 1160px){
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}
.header{
    width:95%;
    max-width: 750px;
    color:var(--orange-primary);
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    margin-bottom:0;
    padding:0;
}
h2 {
    color:var(--orange-primary);
}
.mainDiv {
    width:95%;
    max-width: 750px;
    margin-top:1vw;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 1vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top:0.5vw;
    padding-bottom:0.5vw;
    border-radius:5px;
}
/* Tabel overview */
table.tableOverview {
    width: 100%;
    border-collapse: collapse;
}
tr.indexRow1 {
    border-top-color: var(--black-primary);
    border-top-width: 1px;
    border-top-style: solid;
}
tr.indexRow2 {
    border-bottom-color: var(--black-primary);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.gameName {
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 0px;
    padding-right: 0px;
    text-decoration: none;
    color:var(--black-primary);
}
a.gameName {
    padding-left:0px;
}
.gameName:hover {
    text-align:left;
    color:var(--orange-primary);
    text-decoration: none;
}
.gamePlatform {
    white-space: nowrap;
    padding-top: 0px;
    padding-left: 5px;
    padding-bottom:5px;
    padding-right:0px;
    font-style: italic;
    color:var(--grey-primary);
}
.gameYear {
    text-align: right;
    font-style: italic;
    padding-right: 5px;
    color:var(--grey-primary);
    white-space: nowrap;
}
p.gameTitle{
    margin-top:1vw;
    margin-left:1vw;
    margin-bottom:0;
    margin-right:1vw;
    padding:0;
    font-weight:bold;
}
p.gameValue{
    margin-top:0;
    margin-left:2vw;
    margin-bottom:2ch;
    margin-right:1vw;
    padding-top:0;
    padding-left:0;
    padding-bottom:0;
    padding-right:0;
}
a.gameValue{
    margin-top:0;
    margin-left:2vw;
    margin-bottom:2ch;
    margin-right:1vw;
    padding-top:0;
    padding-left:0;
    padding-bottom:0;
    padding-right:0;
    color:var(--black-primary);
    text-decoration: none;
}
a.gameValue:hover{
    margin-top:0;
    margin-left:2vw;
    margin-bottom:2ch;
    margin-right:1vw;
    padding-top:0;
    padding-left:0;
    padding-bottom:0;
    padding-right:0;
    color:var(--orange-primary);
}
p.gameButton {
    margin-top:5ch;
}
/* Terug knop */
.button {
    text-decoration: none;
    text-align:center;
    background-color: var(--orange-primary);
    color: var(--white-primary );
    padding: 6px 12px;
    border: 1px solid var(--orange-secondary);
    border-radius:4px;
    margin-top:10vw;
    margin-left:1vw;
}
p.emptyPlatform {
    color:#101010;
    font-weight:bold;
    text-align:center;
}
/* Other page */
ul.otherList{
    padding:5px;;
    margin:0;
    color:var(--black-primary);
    text-align:center;
    list-style-type: none;
}
.otherLiA {
    color:var(--black-primary);
    text-decoration: none;
    padding:5px;
    margin:5x;
    font-size:1em;
}
li {
    margin-top:1ch;
    margin-bottom:1ch;
}
/* Franchises overview */
.franchiseRow1 {
    border-top-color: var(--black-primary);
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-color: var(--black-primary);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.franchiseName {
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right:0px;
    text-decoration: none;
    color:var(--black-primary);
}
a.franchiseName {
    margin-left:0px;
}
/* Total */
table.totalTable{
    color:var(--black-primary);
    border-collapse: collapse;
    width: 100%;
}
tr.tr-total{
    text-align: center;
}
tr.tr-total:nth-child(odd){
    background-color: var(--white-primary);
}
.td-total{
    border: 1px solid var(--white-secondary);
    padding:2px;
}
/* Footer */
.footer {
    color:var(--orange-primary);
    font-weight:bold;
    text-align:center;
    width:95%;
    max-width: 750px;
    margin-top:3ch;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top:0.5vw;
    padding-bottom:0.5vw;
}