/*
 *POELLET GAMES
 *Name: Home
 *Url: http://game.poellet.org/
 **
 *File: main.css
 *By: Luke Poellet
 *Created: 10/24/2018
 */

:root {
--color-primary-0: #0F2272;	/* Main Primary color */
--color-primary-1: #6582FC;
--color-primary-2: #2541B4;
--color-primary-3: #030B2B;
--color-primary-4: #000000;

--color-secondary-1-0: #61036E;	/* Main Secondary color (1) */
--color-secondary-1-1: #E753FC;
--color-secondary-1-2: #9B13AE;
--color-secondary-1-3: #25002A;
--color-secondary-1-4: #000000;

--color-secondary-2-0: #8EA302;	/* Main Secondary color (2) */
--color-secondary-2-1: #E8FF51;
--color-secondary-2-2: #DCF918;
--color-secondary-2-3: #363E00;
--color-secondary-2-4: #000000;

--color-complement-0: #A87602;	/* Main Complement color */
--color-complement-1: #FFCB51;
--color-complement-2: #FFBA18;
--color-complement-3: #402D00;
--color-complement-4: #000000;
}

body {
  background: var(--color-secondary-1-3);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;

  min-width: 1000px;

  padding: 0px;
  border: 0px;
  margin: 0px;
}

.topBar {
  background: var(--color-primary-1);
  text-align: center;

  border: 0px;
  border-color: var(--color-secondary-2-2);
  border-style: solid;
  border-bottom-width: 5px;

  transition: 1s;
}

.logo {
  height: 150px;
  width: auto;

  margin: 10px;
  margin-top: 15px;

  display: inline-block;
}

.games {
  text-align: center;
  transition: 1s;

  padding: 20px;
}

.gameLogoBox {
  border-color: var(--color-complement-2);
  border-style: solid;
  border-width: 5px;

  margin: 5px;

  display: inline-block;
  cursor: pointer;
}

.gameLogo {
  height: 100px;
  width: auto;

  margin: 5px;
}