


/* 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; */
   font-family: Arial, Verdana, sans-serif;
}

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

#room {
   width: 80vw;
   height: 30vw;
   background: #13DCDC;
   border: 0.5vw solid #73FCD6;
   border-radius: 1rem;
   color: white;
   text-align: center;
   margin: 0 auto;
   position: relative;
   padding-top: 1vw;
/*   font-family: Aladin, cursive;*/
   font-family: Arial, Verdana, sans-serif;
   font-size: 1.5vw;
}

#word0, #word1, #word2, #word3, #word4, #word5, #word6, #word7, #word8, #word8, #word9, #word10, #word11, #word12, #word13, #word14, #word15, #word16, #word17, #word18, #word19, #word20, #word21, #word22, #word23, #word24, #word25, #word26, #word27, #word28, #word29 {
   position: absolute;
   color: white;
   background: #941751;
   text-align: center;
   padding-top: 0.5vh;
   border: 3px solid #234567;
/*   font-family: Georgia, "Droid Serif", serif;*/
   font-family: Arial, Verdana, sans-serif; 
   cursor: default;

}

#word0, #word1, #word2, #word3, #word4 {
   width: 9vw;
   height: 4vw;
   top: 4vw;
}

#word0 {
   left: 8vw;
}

#word1 {
   left: 20vw;
}

#word2 {
   left: 32vw;
}

#word3 {
    left: 44vw;
}

#word4 {
     left: 56vw;
}


#word5, #word6, #word7, #word8, #word9 {
   width: 9vw;
   height: 4vw;
   top: 10vw;
}

#word5 {
   left: 8vw;
}

#word6 {
   left: 20vw;
}

#word7 {
   left: 32vw;
}

#word8 {
   left: 44vw;
}

#word9 {
   left: 56vw;
}

#word10, #word11, #word12, #word13, #word14 {
   width: 9vw;
   height: 4vw;
   top: 16vw;
}

#word10 {
   left: 8vw;
}

#word11 {
   left: 20vw;
}

#word12 {
   left: 32vw;
}

#word13 {
   left: 44vw;
}

#word14 {
   left: 56vw;
}

#word15, #word16, #word17, #word18, #word19 {
   width: 9vw;
   height: 4vw;
   top: 22vw;
}

#word15 {
   left: 8vw;
}

#word16 {
   left: 20vw;
}

#word17 {
   left: 32vw;
}

#word18 {
   left: 44vw;
}

#word19 {
   left: 56vw;
}

#word20, #word21, #word22, #word23, #word24 {
   width: 9vw;
   height: 4vw;
   top: 28vw;
}

#word20 {
   left: 8vw;
}

#word21 {
   left: 20vw;
}

#word22 {
   left: 32vw;
}

#word23 {
   left: 44vw;
}

#word24 {
   left: 56vw;
}

#word25, #word26, #word27, #word28, #word29 {
   width: 9vw;
   height: 4vw;
   top: 34vw;
}

#word25 {
   left: 8vw;
}

#word26 {
   left: 20vw;
}

#word27 {
   left: 32vw;
}

#word28 {
   left: 44vw;
}

#word29 {
   left: 56vw;
}




