body{
  display: flex;
  flex-direction: column;
  background: radial-gradient(rgb(133, 221, 255), rgb(38, 157, 255));
}
/* ------------------------ HEADER ------------------------ */
header{
  flex: 0 0 20px;
  /* border: 1px solid red; */
}

h1.title{
  text-align: center;
  font-family: oleo;
  font-weight: 100;
  font-size: 44px;
  /* border: 2px solid red; */
}

img.diecon{
  height: 30px;
  margin: 0 4px;
}

img.diecon:last-child{
  margin-left: 8px
}
/* ------------------------ CONTENT ------------------------ */
#content{
  flex: 1 0 auto;
  /* border: 1px solid yellow; */
  font-family: sans-serif;
  font-size: 14px;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}


/* ------------------------ FOOTER ------------------------ */
footer{
  flex-shrink: 0;
  flex-basis: 50px;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  /* border: 1px solid blue; */
}


/* ------------------------ !!!!!!!!SMALL SCREEN!!!!!!!! ------------------------ */
@media only screen and (max-width: 600px) {
  
  img.diecon{
    height: 25px;
    margin: 0 4px;
  }

  h1.title{
    font-size: 38px
  }
}

@media only screen and (max-width: 400px) {

  img.diecon{
    height: 23px;
    margin: 0 4px;
  }

  h1.title{
    font-size: 32px
  }
}