* {
  font-family: 'Wizard World', sans-serif;
  color: maroon;
  letter-spacing: 2px;
}

body {
  cursor: auto;
  display: flex;
  margin: 0px;
  height: 100vh;
}

.hidden{
  display: none !important;
}

.disabled {
  pointer-events: none !important;
}

/* ~~~~~~~~~~~~~~ BUTTON ~~~~~~~~~~~~~~~~ */
button {
  color: white;
  margin-top: 25%;
  background-color: maroon;
  font-size: large;
  border: 8px solid maroon;
  transition: 0.2s;
}

button:hover {
  cursor: pointer;
  color: maroon;
  background-color: rgba(225, 215, 0, .2);
  padding: 4%;
  border: 4px solid maroon;
}

/* ~~~~~~~~~~~~~~ MAIN SECTION ~~~~~~~~~~~~~~~~ */
main {
  background-image: url('images/main-background.png');
  background-position: center;
  width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-header { 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 20%;
  padding-top: 40px;
}

.main-header > h1 { 
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  font-size: 80px;
  color: gold;
}

span {
  color: white;
  font-size: 25px;
  padding: 10px;
}

main > header > p {
  color: white;
  margin: 0px;
  font-size: 30px;
}

/* ~~~~~~~~~~~~~~ ASIDES SECTIONS ~~~~~~~~~~~~~~~~ */
aside {
  background-image: url('images/banner.png');
  background-size: cover;
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aside-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.player-icon {
  padding-top: 20%;
  width: 50%;
}

.aside-header > h1 {
  font-size: 28px;
}

.wins {
  margin-bottom: 0%;
  font-size: 20px;
}

.score {
  margin: 0%;
  font-size: 70px;
}


/* ~~~~~~~~~~~~~~ DISPLAY SECTIONS ~~~~~~~~~~~~~~~~ */
section { 
  height: 80%;
  width: 100%;
}

/* ~~~~~~~~ DISPLAY SECTION - CHOOSE GAME ~~~~~~~~ */
.game-type-container {
  height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.game-box{
  background-color: blueviolet;
  border: 2px solid gold;
  width: 30%;
  height: auto;
  text-align: center;
  padding: 1% 2% 1% 2%;
  transition: 0.3s;
}

.game-box:hover{
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 5px 100px rgba(225, 225, 225, .9);
}

.game-box > h2 {
  color: white;
}

li {
  color: gold;
  list-style: none;
  margin-left: -40px;
}

/* ~~~~~~~~ DISPLAY SECTIONS - CHOOSE FIGHTER & SHOW RESULTS ~~~~~~~~ */
.choose-fighter-screen,
.result-display-screen {
  height: inherit;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.spell-icons{
  margin: 3%;
  width: 20%;
  height: auto;
  transition: 0.3s;
}

.spell-icons:hover{
  cursor: pointer;
  -webkit-filter: drop-shadow(0px 0px 30px white);
  filter: drop-shadow(0px 0px 30px white);
}

/* ~~~~~~~~ DISPLAY SECTION - SHOW TRANSITION ~~~~~~~~ */
.wand-display-screen {
  background-image: url('images/wand.gif');
  background-repeat: no-repeat;
  background-position: center;
}