:root {
   --flipcard-bg-color: black;
   --seperator-color: black;
   --clock-text-color: white;
   --clock-text-size: 15px;
   --second-row-clock-text-size: 12px;
   --flipcard-rounded: 0.3em;
   --text-color: white,
   --text-font: "Arial, sans-serif",
}
 
 #flipclock-container {
   display: flex;       
   flex-direction: column;   
   align-items: center; 
   justify-content: center;
   text-align: center;
   width: fit-content;
   height: fit-content;
 }
 

#flipclock {
   display: inline-flex;
   gap: 2px;
   font-size: var(--clock-text-size);
}

#flipclock-second-row {
   display: inline-flex;
   gap: 2px;
   font-size: var(--second-row-clock-text-size);
}

/* Settings For all other Text Elements */
.normal-text-settings {
   color: var(--text-color) !important; 
   font-family: var(--text-font) !important;
}

/* Settings For Fliptime Seperators */
.tick-text-inline {
   color: var(--seperator-color) !important; 
   font-family: var(--text-font) !important;
}

/* Settings For Fliptime Element */
.tick-flip-panel {
   color: var(--clock-text-color) !important;
   font-family: var(--text-font) !important;
}

.tick {
  font-family: arial,sans-serif;
}

.tick-flip {
   font-family: 'Roboto', sans-serif !important; 
}

.tick-flip-panel {
   background-color: var(--flipcard-bg-color) !important; 
}

.tick-flip {
   border-radius: var(--flipcard-rounded) !important; 
}
