@import url('https://dsans.dmx3377.uk/font.css');

body {
	font-family: -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
    overflow: hidden; /* scrolling not required */
	margin: 0;
	background: #f5f5f5;
}

h1,h2,h3,h4,h5,h6,.heading {
	margin: 0;
	font-family: "DSans", sans-serif;
	font-size: 4em;
}

.normal-heading {
    font-size: 2.5em;
}

.clock {
    font-family: "DSans", Inter, Roboto, sans-serif; /* TODO: Change font to alternative? MTD caused issues and DSans is meant to be branding font */
    font-weight: 750;
    cursor: pointer; /*seconds*/
	font-size: 6em;
    font-variant-numeric: tabular-nums; /*keeps number intact*/
	margin: 10px 0 0;
}

hr {
  width: 80%;
  border: none;
  border-top: 2px solid #000;
  margin: 20px 0;
}
a {
    color: blue;
    font-weight: 400;
}

body,.clock,a,h1,h2 {
    transition: .85s;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
  .clock {
      color: #eee;
  }
  a {
    color: #9cd3ff;
  }
  hr {
    border-top: 2px solid #9c9c9c;
  }

    body,.clock,a,h1,h2 {
    transition: .85s;
}
   /* .disclaimer {
    color: #b5b5b5;
    font-display: swap;
}*/
}

@media(width < 675px) { /*mobile-optimised size */
    .clock {
        font-size: 4em;
    }

    h1,h2,h3,h4,h5,h6,.heading {
        font-size: 2em;
    }
    
}


/* TODO: Make dynamic clock (text) size based off screen size???? */

@media (prefers-reduced-motion: reduce) { /*cut off anim(s) if user turns off in settings */
      * {
       /* scroll-behavior: auto !important; - Scrolling not used in this site */
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }