.php { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 177; display: flex; justify-content: center; align-items: center; flex-direction: column; pointer-events: none; } .php-search { max-width: 600px; width: 100%; pointer-events: initial; } .php-search-input { border: 1px solid #999; background-color: #fff; opacity: .5; box-shadow: 0 2px .5em #000a, inset 0 1px 2px #000a; transition: opacity .5s, box-shadow .5s; } .php-search-input:hover, .php-search-input:focus, .php-search-input:focus-within { opacity: 1; box-shadow: 0 2px 1em #000, inset 0 1px 2px #000a; } .php-search-input input { border-width: 0; background-color: transparent; color: #000; font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; font-size: 24px; line-height: 35px; width: 100%; height: 100%; padding: 2px 5px; } .php-time { display: flex; justify-content: center; align-items: center; margin: 20px auto; width: 100%; } .php-time-analog { flex: 0 0 auto; } .php-time-alter { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 300px; font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif; filter: drop-shadow(0 1px 5px #000); color: transparent; } .php-time-digital { font-size: 7em; line-height: 1.5em; display: flex; flex: 0 0 auto; max-width: 300px; width: 100%; align-items: center; justify-content: center; } .php-time-date { font-size: 2em; } .php-time-digital-separator { margin-top: -4px; } .php-time-digital-separator-hidden { visibility: hidden; } .php-time-digital-hours, .php-time-digital-separator, .php-date-label { background-image: linear-gradient(180deg, #eee 0%, #ddd 50%, #ccc 50%, #aaa 100%); background-clip: text; -webkit-background-clip: text; } .php-time-digital-minutes, .php-date-week, .php-date-day, .php-date-month, .php-date-year { background-image: linear-gradient(0deg, #281430 0%, #392540 50%, #4a3650 50%, #6c5871 100%); background-clip: text; -webkit-background-clip: text; }