1  body {
  2    background: url("./img/desk-white-black-header.jpg") no-repeat center center
  3      fixed;
  4    background-size: cover;
  5    font-family: monospace;
  6  }
  7  
  8  p {
  9    text-align: center;
 10  }
 11  
 12  body,
 13  html {
 14    height: 100%;
 15    margin: 0;
 16    display: flex;
 17    justify-content: center;
 18    align-items: center;
 19  }
 20  
 21  h3 {
 22    position: absolute;
 23    top: 40%;
 24    color: #222;
 25    text-align: center;
 26    font-size: 2.4rem;
 27    font-family: system-ui;
 28    font-weight: 100;
 29    letter-spacing: 8px;
 30    text-transform: uppercase;
 31    /* text-shadow: 2px 2px 40px #000000c7; */
 32  }
 33  
 34  h3:after {
 35    content: attr(data-text);
 36    position: absolute;
 37    left: -3px;
 38    text-shadow: black 1px 0px;
 39    top: 0px;
 40    background: transparent;
 41    overflow: hidden;
 42    animation: 1s linear 0s infinite alternate-reverse none running noiseAnim;
 43    width: 100%;
 44    filter: blur(1px);
 45  }
 46  
 47  @keyframes noiseAnim {
 48    0% {
 49      clip: rect(92px, 9999px, 87px, 0px);
 50    }
 51    10% {
 52      clip: rect(74px, 9999px, 16px, 0px);
 53    }
 54    20% {
 55      clip: rect(11px, 9999px, 78px, 0px);
 56    }
 57  
 58    30% {
 59      clip: rect(14px, 9999px, 98px, 0px);
 60    }
 61  
 62    40% {
 63      clip: rect(10px, 9999px, 25px, 0px);
 64    }
 65  
 66    50% {
 67      clip: rect(98px, 9999px, 100px, 0px);
 68    }
 69  
 70    60% {
 71      clip: rect(92px, 9999px, 4px, 0px);
 72    }
 73  
 74    70% {
 75      clip: rect(96px, 9999px, 28px, 0px);
 76    }
 77  
 78    80% {
 79      clip: rect(65px, 9999px, 9px, 0px);
 80    }
 81  
 82    90% {
 83      clip: rect(50px, 9999px, 44px, 0px);
 84    }
 85  
 86    100% {
 87      clip: rect(70px, 9999px, 95px, 0px);
 88    }
 89  }
 90  
 91  .clock {
 92    justify-content: center;
 93    align-items: center;
 94    width: 100%;
 95    max-width: 100%;
 96    padding: 20px;
 97    margin-top: 10rem;
 98    box-sizing: border-box;
 99  }
100  
101  .flip-clock-wrapper .flip {
102    margin-bottom: 3rem;
103  }
104  
105  .flip-clock-divider .flip-clock-label,
106  .flip-clock-divider.minutes .flip-clock-label,
107  .flip-clock-divider.seconds .flip-clock-label {
108    font-weight: bold;
109    font-family: monospace;
110  }
111  
112  .social-wrapper {
113    list-style-type: none;
114    font-size: 1.5em;
115    text-align: center;
116    position: absolute;
117    display: ruby;
118    margin-top: 24rem;
119  }
120  
121  
122  li.social > a {
123    padding-left: 0em;
124    padding-right: 0.925em;
125    padding-top: 0.425em;
126    padding-bottom: 0.425em;
127    color: #727272;
128    text-decoration: none;
129    transition: all .5s ease-in-out;
130  }
131  
132  [title]:hover{
133    color: rgb(75,75,75);
134  }
135  
136  [center]{
137    text-align: center;
138  }
139  
140  @media (max-width: 768px) {
141    .flip-clock-divider {
142      width: 5px;
143    }
144  
145    .flip-clock-wrapper ul {
146      width: 30px;
147    }
148  
149    .clock {
150      margin-left: 2px;
151      margin-right: 2px;
152      padding-left: 2px;
153      padding-right: 2px;
154    }
155  
156    .flip-clock-wrapper ul {
157      margin: 0px;
158    }
159  
160    .flip-clock-divider .flip-clock-label,
161    .flip-clock-divider.minutes .flip-clock-label,
162    .flip-clock-divider.seconds .flip-clock-label {
163      right: -60px;
164      top: 100px;
165    }
166  
167    h3 {
168      top: 40%;
169    }
170  }