:root {
  --pink:       #ff0084;
  --white:      white;
  --blue:        52, 118, 249;
  --red:        255,   0,   0;
  --dark-blue:  #2f5093;
  --light-gray: #e6e6e6;
  --dark-gray:  #b3b3b3;

  --black: black;

  --max-width: 53rem;
  --padding:   1em;
  
  --border-width:  3px;
  --border-radius: 6px;
}



/* 
 * == Styles for the header component ==
 *
 * This is shared across all pages in the viewer.  It shows "Data Lifeboat"
 * on a bright pink button, which links to the homepage, then a horizontal
 * list of navigation links.
 *
 * See the "header.html" template.
 */

header nav {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

@media screen and (max-width: 500px) {
  header nav {
    grid-template-columns: auto;
  }
}

/* This is the pink "Data Lifeboat" button */
header h2 {
  display: inline-block;
  background: var(--pink);
  font-size:   1em;
  line-height: 1em;
  padding: 0.45em 0.6em 0.35em 0.6em;
  border-radius: var(--border-radius);
}

header h2 a {
  color: var(--white);
  text-decoration: none;
}

/* This is the horizontal list of links on the right-hand side */
header nav ul {
  list-style-type: none;
  margin:  0;
  padding: 0;
  display: inline-block;
  margin-left: auto;
}

header nav ul li {
  display: inline-block;
  margin-left: 2em;
}

header nav ul a {
  font-weight: bold;
  text-decoration: none;
  color: rgb(var(--blue));
}

/* == End of styles for the header component == */



/* 
 * == Styles for the footer component ==
 *
 * This is shared across all pages in the viewer.  It shows some basic
 * attribution information, like the date this Data Lifeboat was created,
 * its ID, and the fact that the Flickr Foundation was involved.
 *
 * See the "footer.html" template
 */

footer {
  background: var(--light-gray);
  color:      var(--dark-blue);
  text-align:  center;
  font-family: monospace;
  padding-top:    1.5em;
  padding-bottom: 1.5em;
}

footer p {
  margin-top:     0;
  margin-bottom:  0;
  padding-top:    0;
  padding-bottom: 0;
}

/* == End of styles for the footer component == */



/* These components are used to communicate the state of the JavaScript
 * in the viewer, e.g. "waiting for something to happen" or
 * "something went wrong".
 *
 * They aren't part of the design and hopefully nobody should see them
 * much, but we need them to make it more debuggable.
 */
.error, .pending {
  border: 2px solid rgb(var(--tint-color));
  padding: var(--padding);
  border-radius: var(--border-radius);
  background: rgba(var(--tint-color), 0.1);
}

.error p:first-child,
.pending p:first-child {
  margin-top: 0;
}

.error p:last-child,
.pending p:last-child {
  margin-bottom: 0;
}

.error {
  --tint-color: var(--red);
}

.error code {
  color: var(--black);
}

.pending {
  --tint-color: var(--blue);
}



/* The `.controls` component is used for sorting and pagination on
 * list pages, e.g. list photos or list tags.
 */
.controls {
  list-style-type: none;
  padding: 0;
}

.controls > li {
  display: inline-block;
}

.controls > li:not(:last-child)::after {
  content: " / ";
  padding-right: 1em;
  padding-left:  1em;
}





h1 {
  font-size: 3rem;
  line-height: 3.7rem;
}

blockquote {
  padding: var(--padding);
  background: var(--light-gray);
  margin: 0;
}

blockquote p:first-child { margin-top:    0; }
blockquote p:last-child  { margin-bottom: 0; }

blockquote.photo_description {
  padding-left: 1em;
  border-left: var(--border-width) solid var(--light-gray);
  white-space: pre-wrap;
}

body {
  font-family: sans-serif;
  line-height: 1.5rem;

  margin:  0;
  padding: 0;

  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  
  padding-top: 1em;
}

main {
  width: calc(100% - 2 * var(--padding) - env(safe-area-inset-left) - env(safe-area-inset-right));
  flex: 1;
}

header > *, main, footer > * {
  max-width: var(--max-width);
  margin:    0 auto;

  padding-top:    calc(var(--padding) + env(safe-area-inset-top));
  padding-right:  calc(var(--padding) + env(safe-area-inset-right));
  padding-bottom: calc(var(--padding) + env(safe-area-inset-bottom));
  padding-left:   calc(var(--padding) + env(safe-area-inset-left));
}

a {
  color: rgb(var(--blue));
}

pre, code {
  background: var(--light-gray);
  color:      var(--dark-blue);
  font-size: 1rem;
}

code {
  padding: 2px 4px;
}

pre {
  padding: 1em;
  overflow: scroll;
}

select {
  font-size: 1em;
}

hr {
  background: var(--light-gray);
  margin: 4em 0;
  height: 3px;
  border: none;
}

/* This gives an animated "loading" bar we can use before text loads in */
.loading {
  background: repeating-linear-gradient(to right, var(--light-gray) 0%, var(--dark-gray) 50%, var(--light-gray) 100%);
  height: 20px;
  width: 100%;
  display: inline-block;
  background-size: 200% auto;
  background-position: 0 100%;
  animation: loading 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes loading {
  0%   { background-position: 0 0; }
  100% { background-position: -200% 0; }
}