@media screen {

  /* global */
  .message {
    text-align:center;
  }

  .message h4{
  }

  .devgirl-countdown-clock{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:15px;
  }

  .box{
    text-align:center;
  }

  /* block */


  .clock, 
  .separator{
    font-size:clamp(40px, 5vw, 80px);
    line-height:clamp(40px, 5vw, 80px);
    font-weight:bold;
  }

  .text{
    font-size:clamp(13px, 5vw,16px);
    text-transform:uppercase;
    font-weight:500;
  }

  .message h4,
  .clock, 
  .separator,
  .text{
    text-shadow: 1px 1px rgba(0, 0, 0, 0.7);
  }

  .light{
    color:white;
  }

  .dark{
    color:black;
  }




} /* media screen */








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

  .devgirl-countdown-clock{
    gap:5px;
    
  }

  .box{

  }

  .default .clock{
    font-size:41px;
  }

  .default .text{
    font-size:16px;
  }

  .wedding .clock{
    font-size:42px;
    line-height:42px;
  }

  .wedding .text{
    font-size:30px;
    line-height:30px;
    margin-top:-7px;
  }



}