html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
}

/*
* This is box stuff
*/
box, box-half, box-third, box-two-thirds, box-quarter, box-three-quarters {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /** It is important that boxes do not have position: relative; othrewise it will break A LOT of things.*/
}

[container]{
  overflow: hidden;
}

[humble]{
    display: inline-block;
    vertical-align: top;
}

[greedy]{
    display: block;
}


box{
  display: block;
  /** overflow: hidden; so that we always have clearfix (this means we cannot have things sticking out of the boxes */
  vertical-align: top;
}
box:after{
  content: "";
  display: table;
  clear: both;
}

box-half, box-third, box-two-thirds, box-quarter, box-three-quarters{
    display: inline-block;
    float: left;
    vertical-align: top;
}


box-half{
  width: 50%;
}


box-third{
  width: calc(100% / 3);
}

box-two-thirds{
  width: 66.66666%;
}

box-quarter{
  width: 25%;
}
box-three-quarters{
  width: 75%;
}

img{
  max-width: 100%; /** what is this for? **/
}


@media screen and (max-width: 420px){
  box-half, box-third, box-two-thirds, box-quarter, box-three-quarters{
    float: none;
    display: block;
    width: 100%;
  }
}
