:root {
  --bc-primary: #F65A83;
  --bc-secondary: #FF87B2;
  --bc-tertiary: #FFE898;
  --bc-blackPrimary: #0d0d0d;
  --bc-LightPrimary: #ffffff;
  --bc-LightSecondary: #f2f2f2;
  --fw-bold: 300;
  --fs-little: 16px;
}

* {
  font-family: 'Ubuntu Mono', monospace;
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 30px;
  text-align: center;
}

header {
  background-color: var(--bc-primary);
  color: var(--bc-LightPrimary);
  padding: 20px;
  text-align: center;
}

.logo {
  height: 200px;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  background-color: var(--bc-secondary);
  color: var(--bc-blackPrimary);
  padding: 9px;
  margin-bottom: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu li:hover {
  background-color: var(--bc-tertiary);
  cursor: pointer;
}

.list{
  background-color: var(--bc-blackPrimary);
  padding: 30px;
  color: var(--bc-LightPrimary);
}

.list h2 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.aside {
  background-color: var(--bc-blackPrimary);
  color: var(--bc-LightPrimary);
  padding: 19px;
  margin: 10px;
  text-align: center;
  font-size: var(--fs-little) ;
}

footer {
  background: var(--bc-blackPrimary);
  color: var(--bc-LightPrimary);
  font-size: 19px;
  text-align: center;
  width: 100%;
  display: block;
  padding: 1rem;
  bottom: 0;
}

/* Mobiles */
[class*="col-"] {
  width: 100%;
}

.gameBox {
  background-color: var(--bc-LightSecondary);
  margin-top: 1rem;
  padding: inherit;
  display: inline-block;
}

#man {
  max-width: 100%;
  max-height: 100%;
}

.hangMan {
  padding: 30px;
}

.gameBox input {
  font-weight: bold;
  background-color: var(--bc-secondary);
  padding: 10px;
  text-transform: uppercase;
  border: 0px var(--bc-blackPrimary);
  border-radius: 4px ;
}

.gameBox input:hover {
  font-weight: bold;
  background-color: var(--bc-tertiary);
  cursor: pointer;
  transition: 2ms;
}

.state1, .state2 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.state1 span {
  padding: 11px;
  background-color: var(--bc-secondary);
  border: 3px solid var(--bc-LightPrimary);
}


.state2 span {
  padding: 10px;
  background-color: var(--bc-blackPrimary);
  color: var(--bc-LightPrimary);
}

/* Tablets */
@media only screen and (min-width: 760px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

}

/* desktop */
@media only screen and (min-width: 780px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/* @media only screen and (min-width: 200px) {
  .state1, .state2 {
    font-size: small;
  }
  .gameBox input {
    font-weight: bold;
    font-size: 15px;
    background-color: var(--bc-secondary);
    padding: 8px;
    text-transform: uppercase;
    border: 0px var(--bc-blackPrimary);
  }
}  */