html
{
   background-color:white;
    width: 100%;
    height:100%;
}
.imageholder{
  float:left;
}
.p01
{
text-shadow: 1px 1px #FF0000;
text-align: center;
font-size: 30px
}
.h1
{
color:blue;
font-size: 15px;
text-align: center;
font-style:italic;
}
.imageMain
{
  width: 573px;
  height: 389px;
border: 1px solid #000 ;
}
#dropZone1{
  position:absolute;
  border-style:dotted;
  left:7px;
  top:180px;
  opacity: 0;
}
#dropZone2{
  position:absolute;
  border-style:dotted;
  left:7px;
  top:160px;
  opacity: 0;
}
#dropZone3{
  position:absolute;
  border-style:dotted;
  left:180px;
  top:150px;
  opacity: 0;
}
#dropZone4{
  position:absolute;
  border-style:dotted;
  left:180px;
  top:150px;
  opacity: 0;
}
#dropZone5{
  position:absolute;
  border-style:dotted;
  left:180px;
  top:350px;
  opacity: 0;
}
#dropZone6 {
  position:absolute;
  border-style:dotted;
  left:310px;
  top:45px;
  opacity: 0;
}
.foto
{
  display: flex;
  justify-content:space-around;
  align-items:baseline;
}
.foto .draggable{
  cursor: pointer;
  border: 1px solid #000 ;

}
.helpinfo{
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.myScore
{
border-style: solid;
color:red;
text-align: center;
font-size: 24px
}
/* Container holding the image and the text */
.containerHelp {
  display:block;
  border: 1px solid #000 ;
  width:200px;;
  position: absolute;
  top:30px;
  left:650px;
  text-align: center;
}
.containerHelp .centeredHelp {
padding-bottom: 5px;
  position:relative;
  font-size: 20px;
  font-style: italic;
}
.container1,.container2,.container2a ,.container3,.container3a,.container4,.container4a,.container4,.container4a,.container5,.container5a,.container6,.container6a {
  display: none;
  border: 1px solid #000 ;
  width:300px;;
  position: absolute;
  top:30px;
  left:650px;
  text-align: center;
}
.container1 .centered1,.container2 .centered1, .container2a .centered2 ,.container3 .centered1, .container3a .centered2,.container4 .centered1, .container4a .centered2,.container5 .centered1, .container5a .centered2,.container6 .centered1, .container6a .centered2{
padding-bottom: 5px;
  position:relative;
  font-size: 25px
}
.container1 .alarm1,.container2 .alarm2,.container2a .alarm2a  ,.container3 .alarm3, .container3a .alarm3a,.container4 .alarm4, .container4a .alarm4a,.container5 .alarm5, .container5a .alarm5a,.container6 .alarm6, .container6a .alarm6a{
  padding: 5px;
  position:relative;
  font-size: 20px;
font-style:italic;
}
#no{
  cursor: pointer;
}
#helpContainer{
  width: 350px;
  display:none;
  border: 1px solid #000 ;
  position: absolute;
  top:30px;
  left:650px;
  padding: 15px;
  font-size: 15px;
  text-align: justify;
  text-justify: inter-word;
}
#flag{
  padding-top: 5px;
  cursor: pointer;
}