styles.css

/* ~
  font-family: 'DynaPuff', 'sans serif'  
  main background: #21D19F (mint)
  side panels background: #45B69C (keppel)
  classic hover state: #EEB868 (earth yellow)
  wizard hover state: #772D8B (eminence)
  view header: #FFEFD3 (papaya whip)
~ */
  
/* ~ GENERAL ~ */

* {
  color: white;
}

html {
  height: 100vh;
  width: 100vw;
  font-size: 62.5%;
}

body {
  height: 100%;
  width: 100%;
  font-family: 'DynaPuff', 'sans serif';
  display: flex;
}

html, body {
  margin: 0;
}

.classic, .wizard, .classic-icons, .wizard-icons, button {
  cursor: pointer;
}

.panel, .view, .game-box, .game-boxes-container, .icons-container, .name-input, .icon-input {
  display: flex;
  align-items: center;
}

.panel, .view, .game-box, .game-boxes-container, form {
  flex-direction: column;
}

.panel {
  height: 100%;
}

/* ~ TYPOGRAPHY ~ */

h1 {
  font-size: 8.5rem;
  text-align: center;
}

h2, label {
  font-size: 5rem;
  font-weight: 500;
}

h3, input, select {
  font-size: 4rem;
  font-weight: 400;
}

li {
  font-size: 2.3rem; 
}

/* ~ MAIN VIEW ~ */

main {
  height: 100%;
  width: 60%;
  background-color: #21D19F;
}

.view {
  height: 100%;
  width: 100%;
}

.view-header {
  height: 10%;
  width: 100%;
  margin: 0;
  text-align: center;
  color: #FFEFD3;
}

/* ~ SIDE PANELS */

.side-panel {
  width: 20%;
  background-color: #45B69C;
}

.side-panel-icon {
  font-size: 6rem;
  margin-top: 3em;
  margin-bottom: 0;
}

.side-panel-header {
  margin: 0;
}

/* ~ LOGIN FORM */

form {
  width: 55%;
  margin: 3em;
  display: flex;
  justify-content: space-between;
}

.name-input, .icon-input {
  padding: 1em;
}

input, select {
  height: 90%;
  margin-left: 1em;
  border-width: 0;
  border-radius: 20px;
  text-align: center;
}

input {
  width: 40%;
  font-family: 'DynaPuff', 'sans serif';
  color: #45B69C;
}

select {
  width: 12%;
}

/* ~ BUTTONS & CLICKABLE BOXES ~ */

button {
  border-radius: 32px;
  margin: 2.5em;
  font-family: 'DynaPuff', 'sans serif';
  font-weight: 400;
  color: white;
}

button, .game-box {
  border: dotted #FFEFD3 ;
}

.login-button-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.login-button {
  width: 40%;
  padding: 0.75em;
  margin: 1em;
  background-color: #45B69C;
  font-size: 3rem;
}

.game-boxes-container {
  height: 100%;
  width: 100%;
  justify-content: space-evenly;
}

.box-header {
  margin: 3rem;
}

.game-box {
  background-color: #45B69C;
  border-radius: 40px;
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.classic-box {
  height: 35%;
  width: 35%;
}

.wizard-box {
  height: 45%;
  width: 50%;
}

.classic-button, .wizard-button {
  height: 10%;
  width: 80%;
  background-color: #21D19F;
  font-size: 2.25rem;
}

.classic-box:hover, .classic-button:hover, .login-button:hover {
  background-color: #EEB868;
}

.wizard-box:hover, .wizard-button:hover {
  background-color: #772D8B;
}

.classic-box, .wizard-box, button {
  transition: background-color 175ms;
}

/* ~ FIGHTER ICONS ~ */

img {
  width: 25%;
}

.icons-container {
  height: 70%;
  width: 100%;
  justify-content: space-evenly;
}

.wizard-icons {
  height: 100%;
  width: 75%;
  flex-wrap: wrap;
}

.wizard-icon {
  margin: 1em 0.5em;
}

.wizard-icon, .classic-icon {
  transition: width 175ms;
}

.classic-icon:hover, .wizard-icon:hover {
  width: 28%;
}

/* ~ RESPONSIVE DESIGN FOR LARGE LAPTOP ~ */

@media screen and (max-width: 1600px) {
  h1 {
    font-size: 7rem;
  }
  
  h2, label {
    font-size: 4.5rem;
  }
  
  h3, input, select {
    font-size: 3rem;
  }

  form {
    width: 70%;
  }

  label {
    width: 65%;
  }
  
  input {
    width: 60%;
  }

  .classic-box {
    width: 42%;
  }
  
  .wizard-box {
    height: 48%;
    width: 65%;
  }

  .box-header {
    margin: 2rem;
  }
}

/* ~ HIDDEN ~ */

.hidden {
  display: none;
}