<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>greeting2</title>

<style>

    /*CSS RESETS*/

body{ background-color: #fff; line-height: 1.6;

}

h1 { margin-top: 0; }

/CSS START/

.full-table { display: table; height: 100%; width: 100%; }

.table-cell { display: table-cell; vertical-align: middle; text-align: center; }

.card { padding: 10px 25px 10px 25px; border-radius: 10px; background: #F6D6FF; width: 85vw; color: #fff; display: inline-block; box-shadow: 2px 2px 1px 0px #330835; }

.card:hover { margin-top: 2px; box-shadow: none; }

.clock { display: inline; font-family: 'Bebas Neue', cursive; font-size: 2em;

}

.time { display: inline; min-width: 37px; }

.colon { font-size: 1.1em; display: inline-block; }

.date { display: inline; min-width: 162px; font-family: 'Bebas Neue', cursive; font-size: 2em; padding-right: 30px; } .greet{

display:inline;
font-family: 'Dancing Script', cursive;
font-size: 2rem;
 padding-right: 30px;

}

</style>

<div class="card">
    <div class="greet" id="greet"></div>
  <div class="date" id="date"></div>
  <div class="clock">
    <div class="time" id="hour"></div>
    <div class="colon">:</div>
    <div class="time" id="min"></div>
    <div class="colon">:</div>
    <div class="time" id="sec"></div>
  </div>
</div>