:root {
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 12pt;
    /* font-variant-numeric: tabular-nums; */
  
    --background-color: rgb(0 0 0 / 0.25); /* 25% grey */
    --primary-color: ##000000; /* black */
    --accent: rgb(191, 64, 191); /*  */
    --accent-two: rgb(230, 230, 250); /* lavender */
    --accent-three: rgb(203, 195, 227); /* light purple */

    /* ALTERNATIVE COLOUR SCHEME: https://coolors.co/d8cbc7-726e60-624cab-f17300-19231a 
--timberwolf: #d8cbc7ff;
--dim-gray: #726e60ff;
--royal-purple: #624cabff;
--safety-orange: #f17300ff;
--eerie-black: #19231aff;

  --background-color: #19231aff; 
  --primary-color: #d8cbc7ff;
  --accent: #f17300ff;
  --accent-two: #726e60ff;
  --accent-three: #624cabff;
    */
  }

  html {
    box-sizing: border-box;
  }
  
  body {
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: var(--primary-color);
    background-color: var(--background-color);
    overflow-x: hidden;
  }
  
  @media screen and (min-width: 768px) {
    main {
      padding-left: 10%;
      padding-right: 10%;
    }
  }
  
/** MAIN **/

main {
    min-height: 80vh;
}

#logo {
  color: var(--primary-color);
  text-decoration: none;
}

#topbar {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  column-gap: 1em;
}

  #feed {
    font-size: 10pt;
    border:0;
    background-color: ghostwhite;
  }


  #searchTerms {
    font-size: 10pt;
    margin:0;
    flex-shrink: 1;
    flex-grow:0;
  }

  #searchButton {
    font-size: 8pt;
    border-radius: 5px;
  }

  
  #container {
    border: 0.5px solid;
    border-radius: 3px;
    padding: 0.5em;
  }

  .warning {
    background-color: var(--accent-two);
    color:var(--accent);
    padding: 1em;
    margin-bottom: 1em;
  }

/* HEADLINES */ 

article {
    margin-bottom:3px;
}


  .headline a {
    color:var(--primary-color);
  }

  .headline a:visited{
    color: var(--primary-color);
  }

  article p {
    margin:0;
  }
  
  article p.breakingNewsReason {
    font-size: 8pt;
    font-weight: 100;
    line-height: 1;
    margin:0;
  }

  article aside {
    line-height: 1.5;
    margin-top:0.5em;
    margin-bottom: 0.5em;
    margin-left: 20px;
    border: 0.5px solid;
    border-radius: 3px;
    padding:0.5em;
    display:none;
  }

  .redacted {
    position:relative;
  }
  
  .redacted > svg {
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
  }

  .alert {
    color: var(--accent);
    background-color: var(--accent-two);
  }
  
  .rush {
    color: var(--accent);
  }
  
  .highlight {
    background-color: var(--accent-two);
  }
  
.shareAction, .saveAction {
    float: right;
    max-width: 1em;
    max-height: 1em;
    margin-left:1em;
  }

.shareAction img {
  width: 100%;
  height: 100%;
}

.saveSubmitButton {
  background-color: transparent; 
  border: none;
  padding: 0;
  font: inherit; /* Inherit font styles from the parent element */
  cursor: pointer; /* Indicate that it's clickable */  
}

/* SAVED STORIES */ 

h3 {
  margin-bottom: 0.25em;
}

.removeSaved {
  float:right;
}

.attribution {
  font-size: 8pt;
  font-weight: 100;
  line-height: 1;
  margin:0;
}

.colorfulLink {
  text-decoration: none;
  color: var(--accent) !important;
}

.colorfulLink:hover {
  text-decoration: underline;
}

.colorfulLink:visited {
  color: var(--accent);
}


/* FEED FORM */

.feedListHeadline {
  font-weight: 800;
  font-size: 14pt;
  margin-bottom: 1em;
}

main section.feedList {
  padding-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
}

input {
  font-size: 12pt;
  margin-bottom: 5px;
}

.feedListNarrow {
  width: 150px;
}

.feedListWide {
  width: 500px;
  font-weight: 100;
  font-size: 9pt;
}

/* KEYWORD FORM */

.keywordHeadline {
  font-weight: 800;
  font-size: 14pt;
  margin-bottom: 1em;
}

.keywordList {
  display:flex;
}

.keywordList > div {
  width:150px;
}

.keywordTag {
  background: var(--accent);
  color: var(--accent-two);
  border-radius: 0.5em;
  font-size: small;
  padding:0.1em 0.3em;
}

/* PAGENAV */

section.pagenav {
    margin-top:1em;
    margin-bottom: 0.5em;
}

.buttonDisabled {
    min-width: 6em;
    font-size: 12pt;
    background-color: rgb(0 0 0 / 0.5);
    background-image: linear-gradient(
        to top left,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 30%,
        rgba(0, 0, 0, 0)
      );
    color: var(--primary-color);
    border:1px solid var(--accent-three);
    border-radius: 10px;
    padding:0.5em;

}
.buttonDisabled:hover {
    text-decoration: none;
}

.button {
    min-width: 6em;
    font-size: 12pt;
    background-color: rgb(191, 64, 191, 1);
    background-image: linear-gradient(
        to top left,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 30%,
        rgba(0, 0, 0, 0)
      );
    color: var(--primary-color);
    border:1px solid var(--accent-three);
    border-radius: 10px;
    padding:0.5em;
}

.button:hover {
    background-color: rgb(191,63,191,1);
    background-image: none;
    text-decoration: none;
}

a.button {
  color:var(--primary-color);
}

a.button:visited {
  color:var(--primary-color);
}

.pageNumber {
    margin-left: 1em;
    margin-right: 1em;
}

  /* NAVIGATION */ 
  nav {
    margin-top: 0.5em;
    display: flex;
  }
  
  nav div {
    font-size: 12pt;
    min-width: 4em;
  }

  /* FOOTER */ 
  
  footer section {
    border-top: 0.5px solid;
    margin-top: 1em;
    padding-top: 0.5em;
    font-size:9pt;
  }

  /* GENERIC */ 
  
  a {
    text-decoration: none;
    color: var(--accent);
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  a:visited {
    color: var(--accent);
  }
  
  .subtitle {
    padding-left: 5px;
    font-weight: 200;
    font-size: medium;
  }