
.draggable{
    background-color: #006600;
    border: 2px solid #33dd00;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1.4rem;
    line-height:normal;
    display:inline-block;
    margin: .2rem .2rem .2rem 0;
    padding: 0.5rem;
    cursor: pointer;
    text-decoration:none;
    list-style: none;
    min-height: 45px;
    max-width: 600px;
}

.row .dropZone{
    border: 2px solid;
    margin:1rem;
    margin-bottom: 2rem;
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    color:green;
    text-align:center;
    background: url("../images/Eid.png") no-repeat center;
    width:30%;
    max-width:600px;
    height:60%;
    min-height: 400px;
}

.dropZone img{
  max-width:100%;
}


#checkCorrect{
    color: #006400;
    font-size:1.5rem;
    margin:.5rem 1rem .5rem 0;
    padding: .2rem 1rem;
    min-height: 30px;
}


footer{
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    text-align: center;
    padding:.5rem;
    margin: 0 auto;
    position:absolute;
    bottom:0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height:40px;
    background-image: url("../images/headerBg.png");
}

@media (min-width: 1000px) {
  .row .dropZone{
    margin:0.5rem;
    font-size: 1.4rem;
    width:30%;
    max-width:350px;
    min-height: 300px;
}
    
@media (min-width: 1200px) {
  .row .dropZone{
    margin:0.5rem;
    font-size: 1.4rem;
    width:30%;
    max-width:400px;
    min-height: 400px;
}
    
@media (min-width: 1300px) {
    .row .dropZone{
    margin:0.5rem;
    font-size: 1.4rem;
    width:30%;
    max-width:400px;
    min-height: 300px;
}

@media (min-width: 1800px) {
     .row .dropZone{
    margin:0.5rem;
    font-size: 2rem;
    width:30%;
    max-width:600px;
    min-height: 500px;
}