/*! Colours */

:root {
  --accent-color: #14347d;
  --secondary-accent-color: #5d86e5; 
  --background-color: #e4ebfb; 
  --theme-grey: #808080;
  --accent-gradient: radial-gradient(circle, var(--accent-color) 20%, #1f50c1 80%);
  --accent-background-gradient: radial-gradient(farthest-corner at 20px 20px,#f5f7fd 37% var(--background-color) 67%);

  --dark-mode-accent-color: var(--secondary-accent-color); 
  --dark-mode-secondary-accent-color: #8faced; 
  --dark-mode-background-color: #0f265b; 
  --dark-mode-settings-sidebar-background-color: #333333;
  --dark-mode-accent-gradient: radial-gradient(circle, var(--dark-mode-accent-color) 37%, #7e9fea 67%);
  --dark-mode-accent-background-gradient: radial-gradient(circle, #0f265b 37%, #112d6c 67%);

}

body {
  color: black;
  background-color: white;
}

#introduction,
#rankings-and-reviews summary,
h1,
h2 {
  color: var(--accent-color);
  background: var(--accent-gradient);
  font-size: var(--large-font-size);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a {
  color: var(--accent-color);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a:hover {
  color: var(--secondary-accent-color);
}

button,
#no-stories-available button {
  color: var(--theme-grey);
  background-color: white;
  border: solid 1px var(--theme-grey);
}

button:active,
button:hover,
#no-stories-available button:active,
#no-stories-available button:hover {
  color: #fff;
  background-color: var(--theme-grey);
}

button.primary {
  color: var(--accent-color);
  background-color: white;
  border: solid 1px var(--accent-color);
}

button.primary:active,
button.primary:hover {
  color: white;
  background-color: var(--accent-color);
}

blockquote {
  background-color: var(--background-color);
  background-image: var(--accent-background-gradient);
}

#settings-sidebar {
  color: var(--secondary-accent-color);
  background-color: white;
}

#settings-sidebar button#close-settings-sidebar {
  color: var(--theme-grey);
  background-color: #00000000;
}

#settings-sidebar button#close-settings-sidebar:hover,
#settings-sidebar button#close-settings-sidebar:active
 {
  color: black;
}

#settings-sidebar .item:not(.header) {
  border-top: 1px solid var(--secondary-accent-color);
}

/* div needed in this selector for the sake of specificity */
#settings-sidebar div.item:first-of-type {  
  border-top: none;
}

#settings-sidebar .item:not(.header):active,
#settings-sidebar .item:not(.header):hover {
  background-color: var(--background-color);
}

#settings-sidebar .doctor-name {
  color: var(--secondary-accent-color);
}

#settings-sidebar .item.selected .doctor-name {
  color: var(--accent-color);
}

#settings-sidebar .item.selected,
#settings-sidebar #history-size {
  color: var(--accent-color);
}

#mask {
  background-color: white;
}

#story-description,
#rankings-and-reviews .description
{
  color: var(--theme-grey);
}

.stars-on {
  color: gold;
}

.stars-off {
  color: #aaaaaa;
}

#no-stories-available
{
  background-color: white;
}

@media (prefers-color-scheme:dark) {
  body {
    background-color: #1a1a1a;
    color: white;
  }

  #introduction,
  #rankings-and-reviews summary,
  h1,
  h2 {
    color: var(--dark-mode-accent-color);
    background: var(--dark-mode-accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
  }
  
  a {
    color: var(--dark-mode-accent-color);
    background: var(--dark-mode-accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  a:hover {
    color: var(--dark-mode-secondary-accent-color);
  }

  button, 
  #no-stories-available button {
    color: var(--theme-grey);
    background-color: black;
    border: solid 1px var(--theme-grey);
  }

  button:active,
  button:hover,
  #no-stories-available button:active,
  #no-stories-available button:hover {
    color: white;
    background-color: var(--theme-grey);
  }

  button.primary {
    color: var(--dark-mode-accent-color);
    background-color: black;
    border-color: solid 1px var(--dark-mode-accent-color);
  }
  
  button.primary:active,
  button.primary:hover {
    color: black;
    background-color: var(--dark-mode-accent-color);
  }

  blockquote {
      background-color: var(--dark-mode-background-color);
      background: var(--dark-mode-accent-background-gradient);
  }

  #settings-sidebar {
    color: var(--dark-mode-accent-color);
    background-color: var(--dark-mode-settings-sidebar-background-color); 
  }

  #settings-sidebar button#close-settings-sidebar {
    color: var(--theme-grey);
    background-color: #00000000;
  }
  
  #settings-sidebar button#close-settings-sidebar:hover,
  #settings-sidebar button#close-settings-sidebar:active
   {
    color: white;
  }

  #settings-sidebar .item:not(.header) {
    border-top: 1px solid var(--dark-mode-accent-color);
  }

  #settings-sidebar .item:not(.header):active,
  #settings-sidebar .item:not(.header):hover {
    background-color: var(--dark-mode-background-color);
  }

  #settings-sidebar .doctor-name {
    color: var(--dark-mode-primary-accent-color);
  }

  #settings-sidebar .item.selected .doctor-name {
    color: var(--dark-mode-primary-accent-color);
  }

  #settings-sidebar .item.selected,
  #settings-sidebar #history-size {
    color: var(--dark-mode-secondary-accent-color);
  }
  
  #mask {
    background-color: black;
  }

  #story-description,
  #rankings-and-reviews .description {
    color: var(--theme-grey);
  }

  .stars-on {
    color: gold;
  }
  
  .stars-off {
    color: #555555;
  }
 
  #no-stories-available
  {
    background-color: var(--dark-mode-settings-sidebar-background-color);
  }
}
/*! end */

/*! Typography */

:root
{
  --font-family: "Mulish", sans-serif;
  --font-size: 18px;
  --small-font-size: calc(var(--font-size) * 4 / 5);
  --large-font-size: calc(var(--font-size) * 5 / 4);
  --largest-font-size: calc(var(--font-size) * 2);
  --line-height: calc(1.5 * var(--font-size));
  --font-weight-emphasis: 800;
}

body
{
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

p {
  padding-top: calc(0.5 * var(--line-height));
}

em,
i {
  font-style: italic;
}

strong {
  font-weight: var(--font-weight-emphasis);
}

a {
  font-weight: var(--font-weight-emphasis);
  text-decoration: none;
}

button {
  font-size: var(--font-size);
  font-weight: var(--font-weight-emphasis);
}

.link-title {
  font-weight: var(--font-weight-emphasis);
}

#settings-sidebar {
  font-size: var(--small-font-size);
}

#settings-sidebar .item.header {
  font-weight: var(--font-weight-emphasis);
  text-transform: uppercase;
}

#settings-sidebar .doctor-name {
  font-size: var(--small-font-size);
  text-transform: uppercase;
  line-height: calc(2 / 3 * var(--line-height));
}

#settings-sidebar .item #history-size {
  font-weight: var(--font-weight-emphasis);
}

#story-title {
  font-size: var(--largest-font-size);
  font-weight: var(--font-weight-emphasis);
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: calc(2 * var(--line-height));
  text-wrap: balance;
}

#story-description {
  text-transform: uppercase;
  letter-spacing: 1px;
  text-wrap: balance;
}

#introduction,
#rankings-and-reviews summary,
h1,
h2 {
  font-weight: var(--font-weight-emphasis);
  text-transform: uppercase;
  letter-spacing: 1px;
}

header, h1, h2
{
  text-align: center;
}

.ranking-description
{
  font-size: var(--small-font-size);
}

p 
{
  text-wrap: pretty;
}

/*! end */

/*! Shadows */

.modal {
  border: solid 1px rgba(0, 0, 0, 0.1);
  box-shadow: 
  12px 12px 16px 0 rgba(0, 0, 0, 0.25),
  -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  border-radius: var(--line-height);
}

@media (prefers-color-scheme: dark) {
  .modal {
    border: solid 1px rgba(255, 255, 255, 0.1);
    box-shadow: 
    12px 12px 16px 0 black,
    -4px -4px 6px 0 rgba(0, 0, 0, 0.8);
  }
}

/*! end */

/*! Transitions and animations */

/* slide a modal into position when it appears */

.modal {
  transform: translate3d(-120%, 0, 0);
  transition: transform .5s cubic-bezier(.39,-0.43,.77,.5);
}
  
.modal .content {
  opacity: 0;
  transition: opacity .5s ease .3s;
}
  
.modal.visible {
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.13, .72, .26, 1.24);
}
.modal.visible .content {
  opacity: 1;
  transition: opacity .5s ease .3s;
}

/* dim the rest of the page when a modal appears */

#mask {
  opacity: 0;
  transition: opacity .5s;
}

.modal.visible ~ #mask {
  opacity: .5;
  transition: opacity .5s;
}

/*! end */

/*! Buttons */

button {
  padding-top: calc(0.5 * var(--line-height));
  padding-bottom: calc(0.5 * var(--line-height));
  padding-left: var(--line-height);
  padding-right: var(--line-height);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  border-radius: var(--line-height);
}

#buttons button:first-of-type {
  margin-right: 12px;
  margin-left: 0;
}

#buttons button
{
  margin-left: 12px;
  margin-right: 0;
}

@media only screen and (max-width:568px) {
  #buttons button {
    margin-left: 0;
    margin-right: 0;
    margin-top: 12px;
    width: 100%
  }
}

#no-stories-available button {
  margin-left: 0;
  margin-right: 0;
  margin-top: 12px;
  width: 100%
}

/*! end */

/*! Modals and masks */

.modal {
  position: fixed;
  z-index: 200;
  width: 340px;
  overflow-y: scroll;
  display: block;
  top: 0;
  left: 0;
  margin: var(--line-height);
  padding: var(--line-height);
  margin-bottom: 0;
}

@media only screen and (max-width:568px) {
  .modal {
    width: 300px;
  }
}

@media only screen and (max-width: 430px) {
  .modal {
    width: 280px;
  }
}

#mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
}

.modal.visible ~ #mask {
  width: 100%;
  height: 100%;
}

/*! end */

/*! Cursor and focus */

summary,
#settings-sidebar .item:not(.header)
{
  cursor: pointer;
}

*:focus {
  outline: none;
}

/*! end */

/*! Body */

body {
  padding: calc(2 * var(--line-height)) 100px;
  min-width: 640px;
}

@media only screen and (max-width: 800px) {
  body {
    min-width: 320px;
    padding: 0;
  }

  body #main {
    padding: calc(0.5 * var(--line-height));
  }
}

@media only screen and (max-width: 400px) {
  body {
    min-width: 300px;
    padding: 0;
  }

  body #main {
    padding: calc(0.2 * var(--line-height));
  }
}

/*! end */

/*! Settings sidebar */

 #settings-sidebar {
  height: 85%;
}

#settings-sidebar button#close-settings-sidebar {
  border: none;
  background-color: #00000000;
  padding: 0;
  margin: 0;
  position: sticky;
  top: 0;
  float: right;
  font-weight: var(--font-weight-emphasis);
}

.item:not(.header) {
  padding-top: calc(0.25 * var(--line-height));
  padding-bottom: calc(0.25 * var(--line-height));
}

.item.selected:before {
  content: "\2714\FE0E";
  float: right;
}

.item.header {
  padding-top: calc(0.5 * var(--line-height));
  border-top: none;
}

.item span#history-size {
  float: right;
}

.item#history {
  padding-top: 0;
  padding-bottom: 0;
}

.item#history summary {
  padding-top: calc(0.25 * var(--line-height));
  padding-bottom: calc(0.25 * var(--line-height));
}

.item#history div#history-list {
  padding-bottom: calc(0.25 * var(--line-height));
}

.item#history div#history-list p {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}

/*! end */

/*! No stories available modal */

#no-stories-available h2 {
  margin-top: 0;
}

#no-stories-available .buttons {
  margin-top: var(--line-height);
}

/*! end */

/*! Rankings and reviews */

#rankings-and-reviews summary,
h1,
h2 {
  margin-top: calc(1.5 * var(--line-height));
  margin-bottom: calc(0.5 * var(--line-height));
  text-align: center;
}

#rankings, #reviews {
  padding-bottom: var(--line-height);
}

#rankings .stars {
  display: inline-block;
  padding-right: calc(var(--line-height) / 4);
}

#rankings .ranking-comment {
  display: inline-block;
  padding-right: var(--line-height);
}

#reviews .description {
  padding-left: calc(var(--line-height) / 2);
}

/*! end */

/*! Buttons div */

#buttons {
  margin-top: var(--line-height);
  padding-top: var(--line-height);
  padding-bottom: var(--line-height);
  width: 400px;
  margin: auto;
}

@media only screen and (max-width: 568px) {
  #buttons button {
    width: 100%;
    margin-top: calc(0.5 * var(--line-height));
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (max-width: 413px) {
  #buttons {
    margin: auto;
    width: 90%
  }
  #buttons button {
    width: 100%;
    padding-left: calc(0.5 * var(--line-height));
    padding-right: calc(0.5 * var(--line-height));
    margin-top: calc(0.5 * var(--line-height));
    margin-left: 0;
    margin-right: 0;
  }
}


/*! end */

/*! Blockquote */

blockquote {
  width: 75%;
  padding-left: var(--line-height);
  padding-right: var(--line-height);
  padding-top: calc(0.5 * var(--line-height));
  padding-bottom: calc(0.5 * var(--line-height));
  margin: auto;
  margin-bottom: var(--line-height);
  margin-bottom: var(--line-height);
  border-radius: var(--line-height);
}

blockquote .speaker {
  text-transform: uppercase;
}

blockquote .stage-direction,
blockquote cite {
  font-style: normal;
}

blockquote cite {
  text-align: right;
  display: block;
}

/*! end */