/* apply a natural box layout model to all elements */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0 auto;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article {
   display: block;
}

body {
   line-height: 1;
/*   min-width: 320px;
   max-width: 640px;*/

/*   background: #F5F5F5;*/
   margin: 0 auto;
font-family: Georgia, "Droid Serif", serif; 
}

/* article */
article {
/*   background: #F0EAD6;*/
   padding: 10px 0;
   overflow: auto;
   clear: both;
}

#room {
   width: 70%;
   height: 300px;
   background: #13DCDC;
   border: 0.5rem solid #73FCD6;
   border-radius: 1rem;
   color: white;
   text-align: center;
   margin: 0 auto;
   position: relative;
   padding-top: 1em;
   font-family: Aladin, cursive;
   font-size: 1rem;
}

#word0, #word1, #word2, #word3, #word4, #word5, #word6, #word7 {
   position: absolute;
   color: white;
   background: #941751;
   text-align: center;
   padding-top: 1em;
   border: 3px solid #234567;
   font-family: Georgia, "Droid Serif", serif; 
   cursor: default;

}

#word0, #word1, #word2, #word3, #word4 {
   width: 100px;
   height: 60px;
   top: 40px;
}

#word0 {
   left: 8em;
}

#word1 {
   left: 16em;
}

#word2 {
   left: 24em;
}

#word3 {
    left: 32em;
}

#word4 {
     left: 40em;
}

#word5, #word6, #word7 {
   width: 100px;
   height: 60px;
   top: 120px;
}

#word5 {
   left: 16em;
}

#word6 {
   left: 24em;
}

#word7 {
   left: 32em;
}

@media all and (max-width: 480px) {
   header {
      font-size: 48px;
   }
   
   #setup {
      font-size: 20px;
   }

   #room {
      width: 310px;
      height: 96px;
   }
      
   #word0 {
      width: 38px;
      height: 72px;
      left: 4px;
      top: 20px;
   }
   
   #word1, #word2, #word3, #word4 {
      width: 38px;
      height: 38px;
      top: 29px;
   }
   
   #word1 {
      left: 83px;
   }
   
   #word2 {
      left: 125px;
   }
   
   #word3 {
      left: 167px;
   }
   
   #word4 {
      left: 209px;
   }

   #word5, #word6, #word7 {
      width: 38px;
      height: 38px;
      top: 58px;
   }
   
   #word5 {
      left: 83px;
   }
   
   #word6 {
      left: 125px;
   }
   
   #word7 {
      left: 167px;
   }
}