/* Main CSS Styles shared among all pages */

/* ~~~~~ Color Theme */

:root {
  --color-background: white; /* CSS variable definition */
  /* Usage: var(--color-background) will be replaced with white
   * Example:
   *    background-color: var(--color-background);
   */
  --color-text: black;
  --color-heading: black;
  --color-link: blue;
  --color-accent: blue;
  --color-border: #f0e5f0; /* TODO: Use a color that fits well in the default color scheme  */
}

body {
  background: var(--color-background);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
}

a {
  color: var(--color-link);
}

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

h1 {
  text-align: center;
}

/* ~~~~~ Layout and ... */

.menu-container {
  /* Layout the navigation menu horizontally */
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;

  /* Remove the disc/bullet before each list items in the navigation menu */
  list-style-type: none;
}

.menu-container > li {
  /* TODO: Make the navigation links look like buttons.

  border: 0.2rem solid var(--color-border);
  border-radius: 0.2rem;
  */

  /* Add a bit of space between items of the navigation menu */
  margin-left:      0.5rem;
  margin-right:     0.5rem;

  background-color: var(--color-background);
}


a.nav-item.selected {
  /* Remove the underline from the links of selected menu items  */
  text-decoration: none;
  color:           var(--color-heading);
}

.tagline {
  /* The fan site's slogan (aka. tagline) is a smaller text, italicized, and centered */
  font-size:  smaller;
  font-style: italic;
  text-align: center;
}

/* ~~~~ (Career) Timeline */

ol.timeline {
    /* Serve as the origin for children positioned using `position: absolute;` */
  position:     relative;
  padding-left: 40px;

  /* Remove the numeric index in front of the list items */
  list-style:   none;
}

ol.timeline::before {
  /* Add an empty pseudo element that serves as an "anchor/origin" to  position the ol */
  content:    "";
  position:   absolute;

  /* Position/Shift the list 20 px on the left */
  left:       20px;
  top:        0;
  bottom:     0;

  /* Note: to get a vertical line we set a width and a background color  */
  width:      2px;
  background: var(--color-heading);
}

ol.timeline > li::before {
  /* Add an empty text before each list item (required for positioning) */
  content:       "";

  /* Position each list item 13 px to the left of its relatively positioned parent (ol) */
  position:      absolute;
  left:          13px; /* Shift left ~ the same size as the circle below (-1px to keep a 1px  gap in between) */

  /* Add a circle before each list item (on the left) /*
  /* (width == height) + border-radius = 50% => circle! */
  width:         14px;
  height:        14px;
  border-radius: 50%;

  border:        2px solid var(--color-border);
  background:    var(--color-accent);
}

/* ~~~~ About section  */

.about-container {
  display:         flex;
  justify-content: left;
  gap:             0.5rem;
}

.about-item-text {
  /* cannot grow, can shrink, width 70% initially */
  flex: 0 1 70%;
}

.about-item-photo {
  /* can grow and shrink, width 30% initially */
  flex: 1 1 30%;
}

.artist-photo {
  /* Can be overridden in the fan site's CSS */
  max-width: 100%;
  height:    auto;

  border: 0.3rem solid var(--color-border);
}

/* ~~~~ Explore section  */

.pages-list dt {
  display: inline-block;
}
.pages-list dt:hover {
  background-color: var(--color-border);
}

/*
  ~~~~~~~~~~~~~~~~~~~~~~~~~~
  Media Queries

  Target only 3 main categories: (Desktop, Tablet, Mobile)
  ~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

/* @media screen and (min-width: 1025px) { */
@media screen and (width >= 1025px) {
  /* Desktop */
}

/* @media screen and (min-width: 768px  max-width: 1024px) {  */
@media screen and (768px <= width < 1024px) {
  /* Tablet */
}

/* @media screen and (max-width: 767px) { */
@media screen and (width < 768px) {
  /* Mobile */

  .about-container {
    /* Push the artist photo to the bottom */
    flex-wrap: wrap;
  }

    .about-item-text {
      /* Set width back to 100% */
      flex: initial;
    }

    .about-item-photo {
      /* Set width back to 100% */
      flex: initial;
    }
}