body, html {
  height: 100%;
  margin: 0;
}
/*
* {
  box-sizing: border-box;
}*/

.bg-image {
  /* The image used */
  background-image: url("vectorstock_44426443.png");

  /* Add the blur effect */
  filter: blur(0.5px);
  -webkit-filter: blur(0.5px);

  /* Full height */
  height: 100%;

  background-size: 100% 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  /*background-size: cover;*/
}

.alert-container {
  height: 100%;
  width: 100%;
  background-color: green;
  visibility: hidden;
  position: absolute;
  top: 0%;
  left: 0%;
}

/* Position text in the middle of the page/image */
.bg-text {
  /*font-family: "Audiowide", sans-serif;*/
  font-family: Arial, sans-serif;
  font-size: 50px;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border-radius: 10px;
  /*border: 3px solid #f1f1f1;*/
  position: absolute;
  top: 10%;
  left: 85%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 25%;
  padding: 10px;
  text-align: center;
  color:orange;
  border: solid;

}

i {
  position: absolute; top: 33.5%; left: 37%; font-size: 40px; visibility: hidden;
}


.fa-mosque {
  font-size: 80px; color:chartreuse; visibility: hidden;
  position: absolute; top: 15%; left: 47%;
}


#alert_sholat { position: absolute; top: 50%; left: 50%; width: 70%; visibility: hidden;
                padding-top: 23%;padding-bottom: 23%;
                padding-left: 14% ;padding-right: 14% ;
                background-color: rgb(13, 87, 13);}

#alert_clock { position: absolute; top: 37%; left: 50%; visibility: hidden;
               color: yellow;
               padding-left: 6%;
               padding-top: 1px; padding-bottom: 1px;
               border: solid ; border-radius: 50px;}         

#alert_text {   position: absolute; top: 55%; left: 50%; width: 70%; visibility: hidden;
                color: yellow;
                background-color: rgb(13, 87, 13);
                border: none ;}

#sholat_text {  position: absolute; top: 70%; left: 50%; width: 40%; visibility: hidden;
                color: yellow;
                font-size: 70px;
                padding-top: 1px;
                padding-bottom: 1px;
                background-color: rgb(13, 87, 13);
                border: solid; border-radius: 50px ; animation: blink 2s linear infinite;}
  
@keyframes blink {
  0%, 100% {opacity: 1;}
  50% {opacity: 0;}
}

#date3 {
  position: absolute;
  top: 10%;
  left: 15%;
  vertical-align: text-bottom;
  /*color: rgba(255, 153, 40, 1);*/
  /*background-color: rgba(187,244,0, 0.4);*/
}

#t_subuh {
  color:chartreuse;
  font-size: 15px;
  width: 10%;
  background-color: rgb(0,0,0);
  border-radius: 20px;
  top: 85.25%;left: 15%; 
  padding: 2px;
}

#t_zuhur {
  color:chartreuse;
  font-size: 15px;
  width: 10%;
  background-color: rgb(0,0,0);
  border-radius: 20px;
  top: 85.25%;left: 32.5%; 
  padding: 2px;
}

#t_ashar {
  color:chartreuse;
  font-size: 15px;
  width: 10%;
  background-color: rgb(0,0,0);
  border-radius: 20px;
  top: 85.25%;left: 50%; 
  padding: 2px;
}

#t_maghrib {
  color:chartreuse;
  font-size: 15px;
  width: 10%;
  background-color: rgb(0,0,0);
  border-radius: 20px;
  top: 85.25%;left: 67.5%; 
  padding: 2px;
}

#t_isya {
  color:chartreuse;
  font-size: 15px;
  width: 10%;
  background-color: rgb(0,0,0);
  border-radius: 20px;
  top: 85.25%;left: 85%; 
  padding: 2px;
}

#subuh {
  /*position: absolute;*/
  top: 91%;
  left: 15%;
  width: 15%;
  color: yellow;
  background-color: rgba(0,128,0, 0.4);
  border: solid;
  padding-top: 15px;
  padding-bottom: 4px;
}

#zuhur{top: 91%;left: 32.5%; width: 15%; color:yellow; background-color: rgba(0,128,0, 0.4);border: solid;
       padding-top: 15px; padding-bottom: 4px;}

#ashar{top: 91%;left: 50%; width: 15%;color: yellow; background-color: rgba(0,128,0, 0.4);border: solid;
       padding-top: 15px; padding-bottom: 4px;}

#maghrib{top: 91%;left: 67.5%; width: 15%; color:yellow;background-color: rgba(0,128,0, 0.4);border: solid;
       padding-top: 15px; padding-bottom: 4px;}

#isha{top: 91%;left: 85%; width: 15% ;color:yellow;background-color: rgba(0,128,0, 0.4);border: solid;
      padding-top: 15px; padding-bottom: 4px;}

.crop_1 {

      /*  width: 10%;
        height: 10%;
      
      /*  overflow: hidden;
        border-style: solid;*/
        position: absolute;
        top: -2px;
        right: 8px;
    }
/*
    .crop_1 img {
        width: 400px;
        height: 400px;
        margin: -120px 0 0 -200px;
    }
*/