/* general styling */
:root {
  --smaller: .75;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

 
.container {
  color: rgb(248, 245, 245);
  margin: 0 auto;
  text-align: center;
  margin-top: -124px;
  
}

h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
  font-size: 41px;
}

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
   
  text-transform: uppercase;position: relative;
  background-color: #FFF;
  color: #1B262C;
  height: 170px;
  width: 175px;
  margin: 5px;
  font-size: 41px;
  font-weight: 500;
  text-align: center;
  box-shadow: 2px 12px 18px 4px #333;
  background :   linear-gradient(
    to top,
    #bac9cf 0%,
    #abbdc5 40%,
    #ffffff 40%,
    #ffffff 100%
  );

}

li span {
  display: block;
  font-size: 4.1rem;
  margin-top: 10px;text-shadow: 0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
   0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
   
  0 20px 20px rgba(0,0,0,.15);
}

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 .5rem;
}


 

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato Black', sans-serif;
}

body {
  background-color: #0F4C75;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  align-items: center;
  background:#0d486e url(../Timer2/img/A141.png) 1;
     
     
  width: 100%;
 
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed ;
  background-size: cover;
  box-shadow:1px 1px 1000px 1000px rgba(2, 190, 58, 0.712), 1px 16px 25px -2px rgba(4, 184, 85, 0.5);
  background: #3634ec;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #1364c0, #7591ca, #2baa64);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #1364c0, #7591ca, #24a75f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  cursor: pointer;
}

.timer {
  display: flex;
}

.box {
  position: relative;
  background-color: #FFF;
  color: #1B262C;
  height: 140px;
  width: 140px;
  margin: 4px;
  font-size: 2.1rem;
  text-align: center;
  box-shadow: 2px 12px 18px 4px #333;
}

.box h4 {
  position: absolute;
  bottom: 0;
  background-color: #3282B8;
  width: 100%;
  color: #FFF;
  text-transform: uppercase;
  font-size: 1.4rem;
  padding: 8px 0;
}



@media all and (max-width: 468px) {
  h1 {
    font-size: calc(2.1rem * var(--smaller));
  }
  
  li {
    font-size: calc(2.125rem * var(--smaller));
     
      height: 141px;
      width: 141px;

      

  }
  
  li span {
    font-size: calc(3.675rem * var(--smaller));
    margin-top: 30px;
  }
  body {
    background-color: #0F4C75;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
    background:#0f4c75 url(../Timer2/img/A141.png) ;
  }  
}


@media only screen and (min-width: 469px) and (max-width: 768px) {
  h1 {
    font-size: calc(2.1rem * var(--smaller));
  }
  
  li {
    font-size: calc(2.125rem * var(--smaller));
     
      height: 121px;
      width: 121px;

  }
  
  li span {
    font-size: calc(3.675rem * var(--smaller));
    margin-top: 18px;
  }
}






/* Telegram Sticky Chat Button Widget */

:root {

  --warna-background: #4dc247;

  --warna-bg-chat: #f0f5fb;

  --warna-icon: #fff;

  --warna-text: #505050;

  --warna-text-alt: #989b9f;

  --lebar-chatbox: 330px;

  }

  .sticky-button{

  display: flex;

  align-items: center;

  justify-content: center;

  position: fixed;

  right: 41px;

  bottom: 24px;

  width: 51px;

  height: 51px;
    

  
  background-color: #fefefe;

  border-radius: 14%;
  
 
  

  }

  .sticky-button a, .sticky-button label{display:flex;align-items:center; cursor: pointer; width:85px;height:65px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}

  .sticky-button a svg, .sticky-button label svg{margin:auto; margin-top: 21px; fill:#0091EA}

  .sticky-button label svg.svg-2{display:none}

  .sticky-chat{position:fixed;bottom:170px;right:20px;width:35%;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;

  z-index:21;opacity:0;visibility:hidden;line-height:normal}

  .sticky-chat .chat-content{border-radius:10px; background-color:#fff;   box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}

  .sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#0091EA;overflow:hidden}

  .sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,4,.000);border-radius:70px 0 5px 0;}

  .sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}

  .sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}

  .sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}

  .sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:5px 20px;font-size:16px;color:var(--warna-text)}

  .sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}

  .sticky-chat .chat-text span:after{content:'Just now';display:inline-block;position:relative; bottom:-5px; left:-4px;margin-left:2px;font-size:9px;color:var(--warna-text-alt)}

  .sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}

  .sticky-chat .chat-text span.typing:after, .chat-menu{display:none}

  .sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}

  .sticky-chat .chat-button{display:flex;align-items:center;margin-top:5px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}

  .sticky-chat .chat-button svg{width:20px;height:28px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}

  .chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}

  .chat-menu:checked + .sticky-button label svg.svg-1{display:none}

  .chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}

  .chat-menu:checked + .sticky-button + .sticky-chat{

  bottom: 24px;

  right: 101px;

  opacity: 1;

  visibility: visible;

  } 

  .schat { outline: none ;width: 71%; font-size: 15px; margin-left: 21px; bottom: 7px;   margin-right:auto; padding:10px 10px 10px 15px; background-color:var(--warna-bg-chat);border-radius:15px 5px 1px;  position:absolute;    border:none;color:#383737;font-weight:bold;} 

  .blink_me {

  animation: blinker 1.3s linear infinite;

  }

  @keyframes blinker {

  50% {

  opacity: 0;

  }
}


@media only screen and (max-width: 768px) {
   

  .sticky-button a, .sticky-button label{display:flex;align-items:center;width:85px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}

  .sticky-button a svg, .sticky-button label svg{margin:auto; margin-top: 17px; fill:#0091EA}

  .sticky-button label svg.svg-2{display:none}

  .sticky-chat{position:fixed;bottom:170px;right:20px; width:71%;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;

  z-index:21;opacity:0;visibility:hidden;line-height:normal}

  .sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}

  .sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#0091EA;overflow:hidden}

  .sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,4,.000);border-radius:70px 0 5px 0;}

  .sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}

  .chat-menu:checked + .sticky-button + .sticky-chat{

    bottom: 14px;
  
    right: 81px;
  
    opacity: 1;
  
    visibility: visible;
  }  


  .sticky-button{

    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    position: fixed;
  
    right: 21px;
  
    bottom: 16px;
  
    width: 44px;
  
    height: 51px;
      
  
    
    background-color: #fefefe;
  
    border-radius: 14%;
    
  
    
  }
    }
    body {
      background-color: #0F4C75;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      align-items: center;
      background:#0d486e url(../Timer2/img/A141.png) 1;
         
         
      width: 100%;
     
      background-blend-mode: multiply;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed ;
      background-size: cover;
      box-shadow:1px 1px 1000px 1000px rgba(2, 190, 58, 0.712), 1px 16px 25px -2px rgba(4, 184, 85, 0.5);
      background: #3634ec;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #1364c0, #7591ca, #2baa64);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #1364c0, #708ec5, #24a75f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      cursor: pointer;
    }