/* General styles */
body.container {
  background: #cccccc;
  /* System font stack from https://meta.stackexchange.com/questions/364048/we-are-switching-to-system-fonts-on-may-10-2021 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Noto Sans", "Droid Sans", sans-serif;
}
body.container.blog {
  background: #cdecff; /* lightest-blue */
  animation: changingbg 600s infinite;
}

h1, h2 {
	font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Noto Sans", "Droid Sans", sans-serif;
}

/* Calculated using
   https://www.joshwcomeau.com/gradient-generator/
   in LRGB mode with precision=8 and linear easing
   Colors: #CDECFF #FFCDEC #FEECCD #9EEBCF #CDECFF
*/
@keyframes changingbg {
	from {
		background: hsl(203deg 100% 90%);
	}
  8% { background: hsl(233deg 68% 92%); }
  17% { background: hsl(293deg 52% 90%); }
  25% { background: hsl(323deg 100% 90%); }
  33% { background: hsl(344deg 98% 92%); }
  42% { background: hsl(16deg 97% 92%); }
  50% { background: hsl(38deg 96% 90%); }
  58% { background: hsl(78deg 44% 87%); }
  67% { background: hsl(137deg 50% 84%); }
  75% { background: hsl(158deg 66% 77%); }
  83% { background: hsl(185deg 62% 84%); }
  92% { background: hsl(191deg 87% 84%); }
	to {
		background: hsl(203deg 100% 90%);
	}
}

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Flex page so that the footer moves to the bottom.
   https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
*/
.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
}
/* Reactivate list bullets. */
article#post .bulleted-list {
  list-style-type: square;
  list-style-position: inside;
}
article#post .numbered-list {
  list-style-type: decimal;
  list-style-position: inside;
}

/* Move the bullet outside the main flow when we're not on the smallest
   screen. This replicates the "not-small" breakpoint.
*/
@media only screen and (min-width: 30em) {
  article#post .bulleted-list {
    list-style-position: outside;
  }
  article#post .numbered-list {
    list-style-position: outside;
  }
}
/* Make the left hand nav sticky on desktop. This replicates the "large"
   breakpoint.
*/
@media only screen and (min-width: 60em) {
  .sticky-l {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 1em; /* pt3 */
  }
}
/* Hide HR tags */
hr.invisible {
	clear: both;
	visibility: hidden;
}
/* Inline styles */
article#post q {
  color: #d73e00; /* .dark-red */
}
article#post p a, article#post li a, article#post blockquote a {
  color: rgba( 0, 0, 0, .9 ); /* .black-90 */
  background-color: rgba(251,241,169, .75); /* #fbf1a9; .bg-light-yellow */
  text-decoration: underline;
}
article#post a:hover {
  background-color: white; /* #ff725c; */ /* .bg-light-red */
}
/* Make the post header pop */
x article#post h2 {
  background: -webkit-linear-gradient(#b2b2b2,#ff6300); /* .black-30 to .orange */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Circular badge for the streak counter */
.streak-badge {
  /* background: red; */
  width: 2.5rem; 
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex; /* or flex for a block */
  align-items: center; 
  justify-content: center;
}

/* Status area */
#social-select-hud {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  text-align: right;
  font-size: 2rem;
  display: none;
}

.highlight, article#post p a.highlight, article#post li a.highlight, article#post blockquote a.highlight {
  background: #9EEBCF;
}



/*
 * Slider switch. Based on https://www.w3schools.com/howto/howto_css_switch.asp
 *
 * All px converted to rem: 1rem = 16px (Tachyons)
 */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 3.7rem;
  height: 2rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .3s;
  transition: .3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.6rem;
  width: 1.6rem;
  left: 0.2rem;
  bottom: 0.2rem;
  background-color: white;
  -webkit-transition: .3s;
  transition: .3s;
}

input:checked + .slider {
  background-color: #19a974;
}

input:focus + .slider {
  box-shadow: 0 0 1px #19a974;
}

input:checked + .slider:before {
  -webkit-transform: translateX(1.7rem);
  -ms-transform: translateX(1.7rem);
  transform: translateX(1.7rem);
}

/* Rounded sliders */
.slider.round {
  border-radius: 2rem;
}

.slider.round:before {
  border-radius: 50%;
}