:root {
  --primary-major: #ff69b4;
  --primary-minor: #ffb3de;
  --secondary-major: #989898;
  --secondary-minor: #e0e0e0;
  --background-color: #fffefe;
}
body {
  margin: 0;
  background-color: var(--background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
}

#settings {
  width: 50rem;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font: 1rem sans-serif;
  color: var(--secondary-major);
}
#settings > * {
  margin-bottom: .5rem;
}
#afterPeriod, #loopDisclaimer, #errorLog {
  align-self: center;
}
#settings button {
  font: 1.25rem sans-serif;
  color: #504040;
  margin-left: .25rem;
  margin-right: .25rem;
  border: 0;
  border-radius: .5rem;
  padding: .5rem 0;
}
.btnrow {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
.btnrow > * {
  flex: 1;
}
.onbtn {
  background-color: var(--primary-minor);
}
.offbtn {
  background-color: var(--secondary-minor);
}
#subs {
  margin-left: .25rem;
  margin-right: .25rem;
	border: 0;
	border-bottom: thin solid var(--primary-major);
	font: 3rem monospace;
	color: var(--secondary-major);
	caret-color: var(--primary-major);
}
#subs:focus {
	outline: none;
}
#subs::placeholder {
	color: var(--secondary-minor);
}
#duration, #reverseStart {
	width: 4rem;
	border: 0;
	border-bottom: thin solid var(--secondary-major);
  padding-left: .5rem;
	font: 1.5rem monospace;
	color: var(--primary-major);
	caret-color: var(--primary-major);
}
#duration:focus, #reverseStart:focus {
	outline: none;
}
#reverseDetails {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
#rvrStartDiv {
  flex: 2;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
#reverseLoop {
  flex: 1;
}
#start {
  background-color: #ffdeb3;
}

#description {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: .5rem;
  padding: 0;
  max-width: 75%;
  font: .9rem verdana, sans-serif;
  color: var(--secondary-major);
}
#description * {
  margin: 0;
  padding: 0;
}
.primaryLink {
  text-decoration: none;
  color: var(--primary-major);
}
.primaryLink:hover, .primaryLink:active {
  color: var(--primary-minor);
}
.secondaryLink {
	text-decoration: none;
	color: var(--secondary-major);
}
.secondaryLink:hover, .secondaryLink:active {
	color: var(--secondary-minor);
}
#title {
  display: block;
  font: 1.5rem helvetica, sans-serif;
}
#timepiece {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 1rem;
  width: 5rem;
  height: 5rem;
}

/*
#settingsDiv {
  margin-top: 10%;
  margin-left: 25%;
  margin-right: 25%;
}
#firstRowDiv p {
  text-align: center;
  font: 1.5em helvetica, sans-serif;
  color: var(--primary-major);
  margin-bottom: 0;
}
#firstRowDiv input {
  width: 100%;
  border: 0;
  border-bottom: thin solid var(--primary-major);
  font: 3em monospace;
  color: var(--secondary-major);
  caret-color: var(--primary-major);
}
#firstRowDiv input:focus {
  outline: none;
}
#firstRowDiv input::placeholder {
  color: var(--secondary-minor);
}
#secondRowDiv {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: normal;
  justify-items: center;
}
#methodDiv {
  display: flex;
  flex-direction: column;
}
#periodDiv {
  display: none;
  flex-direction: column;
}
#methodDiv p, #periodDiv p {
  font: 1.2em verdana, sans-serif;
  color: var(--primary-major);
}
#methodDiv label, #periodDiv label {
  font: 1em verdana, sans-serif;
  color: var(--secondary-major);
}
#methodDiv label:hover, #periodDiv label:hover {
  cursor: pointer;
}
#methodDiv input, #periodDiv input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--secondary-minor);
  width: 1em;
  height: 1em;
  border-radius: 1em;
  margin-right: .5em;
  cursor: pointer;     
  outline: none;
}
#methodDiv input:checked, #periodDiv input:checked {
  background-color: var(--primary-major);
}
#methodDiv input:hover, #periodDiv input:hover {
  background-color: var(--primary-minor);
}
#durationShuffleDiv {
  display: flex;
  flex-direction: column;
  font: 1em verdana, sans-serif;
  color: var(--secondary-major);
}
#durationShuffleDiv #slideDuration {
  width: 2em;
  border: 0;
  border-bottom: thin solid var(--secondary-major);
  font: 1.5em monospace;
  color: var(--primary-major);
  caret-color: var(--primary-major);
}
#durationShuffleDiv #slideDuration:focus {
  outline: none;
}
#durationShuffleDiv label:hover {
  cursor: pointer;
}
#durationShuffleDiv label {
  position: relative;
}
#durationShuffleDiv #shuffleSubreddits {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--secondary-minor);
  width: 1em;
  height: 1em;
  border-radius: 1em;
  margin-right: 0;
  margin-bottom: 0;
  cursor: pointer;     
  outline: none;
}
#durationShuffleDiv #shuffleSubreddits:checked {
  background-color: var(--primary-major);
}
#durationShuffleDiv #shuffleSubreddits:hover {
  background-color: var(--primary-minor);
}
#thirdRowDiv p {
  text-align: center;
  font: 1em helvetica, sans-serif;
  color: var(--secondary-minor);
}
*/