/*
COLOURS
Yellow for highlights: #fcd707
Almost black for background and text: #0b2027
NEW Deep, dark sky blue for new background: #003366
Grey for cloud and download buttons: #3f5160
Light translucent grey for h1 and categories: rgba(248, 248, 248, 0.6)
NEW Light translucent grey for h1 and categories: rgba(248, 248, 248, 0.8)
Light translucent grey for article backgrounds: rgba(248, 248, 248, 0.7)
Light translucent grey for article border to give appearance of glass: 1px solid rgba(248, 248, 248, 0.5);
*/

:root {
  font-family: Inter, sans-serif;
  --stripe-color: #0b2027;
  --stripe-color: #003366;
  /* Dark mode */
  --bg: var(--stripe-color);
  --maincolor: var(--bg);
}

@font-face {
  font-family: Raleway;
  src: url("https://thriftmac.com/fonts/Raleway/Raleway-VariableFont_wght.ttf")
    format("truetype");
}
@font-face {
  font-family: Barlow;
  src: url("https://thriftmac.com/fonts/Barlow_Condensed/BarlowCondensed-Medium.ttf")
    format("truetype");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.hidden {
  display: none;
}

/* BODY */

body {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  padding: 3em 0;
  color: rgba(248, 248, 248, 0.8);
  background: #0b2027;
  background: var(--bg);
}

/* cloud icon */
body::before {
  content: "\f0c2";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 600px;
  color: rgba(255, 255, 255, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  z-index: -1;
  filter: blur(20px);
  pointer-events: none;
}

@media (max-width: 65em) {
  body {
    padding: 1em 0 5em 0;
  }
}

/* MAIN */

main {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19em, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1.5em;
}
@media (max-width: 65em) {
  main {
    display: block;
  }
}

/* HEADER general */

header {
  grid-column: auto;
  grid-row: span 2;
  position: relative;
}

@media (max-width: 65em) {
  header {
    grid-column: span 2;
  }
}

/* HEADER title */

h1 {
  /* text-transform: uppercase; */
  font-weight: 300;
  font-size: 5rem;
  color: rgba(248, 248, 248, 0.6);
  color: #fcd707;
  margin-top: -30px;
  margin-bottom: 0;
  line-height: 1.2;
}

@media (max-width: 65em) {
  h1 {
    margin-top: 0;
  }
}

h1 .fa-bolt-lightning {
  color: #fcd707;
}

h1 .fa-sun {
  color: #fcd707;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #fcd707;
}

h1:hover .fa-sun,
h1:active .fa-bolt-lightning {
  color: #fcd707;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #fcd707,
    0 0 82px #fcd707,
    0 0 92px #fcd707;
}

h1:hover .fa-bolt-lightning {
  color: #fcd707;
  font-size: 110%;
}

h1:active .fa-bolt-lightning {
  font-size: 175%;
}

h1 a {
  /* color: rgba(248, 248, 248, 0.6); */
  color: #fcd707;
  text-decoration: none;
}

h1 span {
  display: block;
  font-weight: 900;
}

header h2 {
  font-weight: 300;
  margin-top: 0.2em;
  margin-bottom: 1em;
}

/* @media (max-width: 65em) {
  header h2 {
    margin-bottom: 0.2em;
  }
} */

.subhead {
  font-weight: 300;
  margin-top: 0.2em;
  margin-bottom: 2em;
  font-size: 1.2rem;
}

@media (max-width: 65em) {
  .subhead {
    margin-bottom: 0.2em;
  }
}

.fa-cloud {
  color: #3f5160;
}

/* HEADER kicker */

h6 {
  margin-top: 0;
  font-size: 1rem;
  color: rgba(248, 248, 248, 0.6);
  font-weight: normal;
}

/* HEADER button group */

.header-button-group {
  display: flex;
  column-gap: 10px;
}

.header-button {
  flex: 1 1 auto;
  box-shadow: 0 0 2px #fff;
  /* box-shadow: 0 0 2px rgba (248, 248, 248, 0.6); */
}

/* HEADER lists */

header ul {
  list-style-type: none;
  padding-right: 20px;
  padding-left: 0;
  margin-top: 1rem;
  margin-bottom: 0;
}

header ul li {
  font-size: 1.05rem;
  display: inline;
  padding-right: 12px;
  white-space: nowrap;
}

header ul li a {
  color: rgba(248, 248, 248, 0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(248, 248, 248, 0.6);
}

header ul li a:hover {
  border-bottom: 1px solid #fcd707;
}

.current-category {
  border-bottom: 1px solid #fcd707;
}

.category_list li {
  font-size: 13px;
  line-height: 2.2;
  font-family: "Barlow";
  text-transform: uppercase;
  text-shadow: 0 0 6px #003366;
}

article small {
  font-size: 14px;
  font-family: "Barlow";
  text-transform: uppercase;
}

/*.categories-mobile {
  display: none;
}*/

/*@media (max-width: 65em) {
  .categories-mobile {
    display: block;
  }
}*/

/*.categories-desktop {
  display: block;
}*/

/*@media (max-width: 65em) {
  .categories-desktop {
    display: none;
  }
}*/

summary {
  cursor: pointer;
}

/* HEADER details for mobile */

details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::before {
  content: "\f0a4";
  font-family: "Font Awesome 6 Free";
  color: #fcd707;
  font-weight: 900;
  margin-right: 10px;
  display: inline-block;
}

details {
  background-color: #003366;
  padding: 16px 20px;
  border-radius: 10px;
  box-shadow: 0 0 2px #fff;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-top: 20px;
}

details > ul {
  margin-top: 0;
  margin-bottom: 0;
}

details[open] {
  overflow-y: scroll;
  height: 300px;
  height: 200px;
  scrollbar-color: #fcd707 #003366;
  scrollbar-width: thin;
  border-radius: 10px 0 0 10px;
}

details::-webkit-scrollbar {
  width: 6px;
}
details::-webkit-scrollbar-thumb {
  background-color: #fcd707;
}
details::-webkit-scrollbar-track {
  background-color: #003366;
}

@media (max-width: 65em) {
  details[open] {
    overflow-y: auto;
    height: auto;
  }
}

/* HEADER input */

input {
  width: 100%;
  padding: 0.4rem 0 0.4rem 1rem;
  height: 2.6rem;
  font-size: 1rem;
  font-family: Inter, sans-serif;
  font-weight: bold;
  border-radius: 10px;
  border: 2px solid rgba(248, 248, 248, 0.6);
  margin-top: 0;
  margin-bottom: 0;
  background-color: rgba(248, 248, 248, 0.6);
  outline: 0;
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* Firefox 4+, Opera, Chrome */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

input:focus {
  border-radius: 10px;
  border: 2px solid #fcd707;
  background-color: rgba(248, 248, 248, 0.6);
  outline: none;
}

.search_input {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* ARTICLES */

article {
  margin: 0;
  padding: 2rem;
  background-color: rgba(248, 248, 248, 0.7);
  color: #0b2027;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(248, 248, 248, 0.5);
  box-shadow: 0 0 8px #fcd707;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  background: linear-gradient(
    135deg,
    rgba(248, 248, 248, 0.6),
    rgba(248, 248, 248, 0.7),
    rgba(248, 248, 248, 0.6) 60%
  );
}

/* article:first-of-type {
  grid-column: span 2;
} */

/* article:first-of-type small {
  display: none;
}

article:first-of-type h2 {
  margin-top: 0;
} */

@media (max-width: 65em) {
  article {
    margin-bottom: 2rem;
  }
}

article h2 {
  font-weight: 900;
  margin-top: 10px;
  margin-bottom: 4px;
}

article h2 p {
  margin-top: 4px;
}

article .fa-bolt-lightning,
article .fa-hand-point-right,
.fa-angle-left,
.fa-angle-right {
  color: #fcd707;
}

/* .articles small:after {
  font-family: FontAwesome;
  content: "\f044";
  float: right;
  font-size: 200%;
  grid-column: span 2;
} */

article a {
  color: #0b2027;
}

small {
  text-transform: uppercase;
}

small a {
  color: #0b2027;
  text-decoration: none;
  border-bottom: 1px solid #0b2027;
}

small a:hover {
  border-bottom: 1px solid #fcd707;
}

button {
  border: none;
  text-align: center;
  margin-top: 1rem;
  border-radius: 20px;
  background-color: #3f5160;
  background-color: #003366;
  width: 200px;
}

button a {
  text-transform: uppercase;
  font-family: "Raleway", sans-serif;
  display: block;
  text-decoration: none;
  padding: 6px 8px 5px 8px;
  color: rgba(248, 248, 248, 0.7);
  font-size: 0.8rem;
}

button a:hover {
  color: #fcd707;
}

button a:hover .fa-bolt-lightning {
  font-size: 110%;
}

button a:hover .fa-hand-point-right {
  font-size: 110%;
}

figure {
  margin: 0;
}

/* heart symbol after helpful score */
.value::after {
  content: " \2665";
  font-size: 125%;
  color: #972426;
}

/* NEWEST HEADING */

.newest {
  background-color: #3f5160;
  color: #fcd707;
  padding: 6px 12px;
  float: right;
  border-radius: 20px;
}

.icon-container {
  position: relative;
  float: right;
}
.fa-certificate {
  font-size: 54px;
  color: #fcd707;
}
.icon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: #3f5160;
}

/* FOOTER */

footer {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 2rem;
}

footer ul {
  list-style-type: none;
  padding-right: 20px;
  padding-left: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

footer ul li {
  font-size: 1.1rem;
  display: inline;
  padding-right: 30px;
  white-space: nowrap;
}

footer ul li a {
  color: rgba(248, 248, 248, 0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(248, 248, 248, 0.6);
}

footer ul li a:hover {
  border-bottom: 1px solid #fcd707;
}

footer ul li a:active {
  border-bottom: 2px solid #fcd707;
  color: #0b2027;
}

/* CATEGORY ICONS */

small::before {
  font-family: "Font Awesome 6 Free";
  margin-right: 4px;
  content: "\f0da";
  font-weight: 900;
}

article h2::before {
  font-family: "Font Awesome 6 Free";
  font-size: 300%;
  display: block;
}

article.AI h2::before {
  content: "\f544";
}

article.Automation h2::before {
  content: "\f544";
}

article.Animation h2::before {
  content: "\f303";
}

article.Audio h2::before {
  content: "\f028";
}

article.Backup h2::before {
  content: "\f574";
}

article.Calculator h2::before {
  content: "\f1ec";
}

article.Calendar h2::before {
  content: "\f073";
}

article.Clipboard h2::before {
  content: "\f328";
}

article.Clock h2::before {
  content: "\f017";
}

article.Code h2::before {
  content: "\f121";
}

article.Compression h2::before {
  content: "\f1c6";
}

article.Converter h2::before {
  content: "\f362";
}

article.Database h2::before {
  content: "\f1c0";
}

article.Deletion h2::before {
  content: "\f2ed";
}

article.Dictation h2::before {
  content: "\f10d";
}

article.Display h2::before {
  content: "\e163";
}

article.Dock h2::before {
  content: "\f13d";
}

article.Drawing h2::before {
  content: "\f5ae";
}

article.Editor h2::before {
  content: "\f1dd";
}

article.Education h2::before {
  content: "\f19d";
}

article.Email h2::before {
  content: "\f0e0";
}

article.Entertainment h2::before {
  content: "\f26c";
}

article.FTP h2::before {
  content: "\f382";
}

article.Finance h2::before {
  content: "\f53d";
}

article.Finder h2::before {
  content: "\f07c";
}

article.Functionality h2::before {
  content: "\f544";
}

article.Health h2::before {
  content: "\f21e";
}

article.Image h2::before {
  content: "\f302";
}

article.Internet h2::before {
  content: "\f0ac";
}

article.Journal h2::before {
  content: "\f02d";
}

article.Launcher h2::before {
  content: "\f135";
}

article.latest h2::before {
  content: "\f86d";
}

article.Music h2::before {
  content: "\f001";
}

article.Maintenance h2::before {
  content: "\f51a";
}

article.Markdown h2::before {
  content: "\23";
}

article.Media h2::before {
  content: "\f87c";
}

article.Menu h2::before {
  content: "\f03a";
}

article.Messaging h2::before {
  content: "\f7cd";
}

article.Miscellaneous h2::before {
  content: "\f86d";
}

article.News h2::before {
  content: "\f1ea";
}

article.Notes h2::before {
  content: "\f303";
}

article.Outliner h2::before {
  content: "\f542";
}

article.Painting h2::before {
  content: "\f1fc";
}

article.PDF h2::before {
  content: "\f1c1";
}

article.Photo h2::before {
  content: "\f083";
}

article.Playful h2::before {
  content: "\f25a";
}

article.Pomodoro h2::before {
  content: "\f017";
}

article.Presentation h2::before {
  content: "\e53d";
}

article.Screen h2::before {
  content: "\f108";
}

small .scrimpys-picks::before {
  content: "\f005";
  font-weight: 900;
}

article.Search h2::before {
  content: "\f002";
}

article.Security h2::before {
  content: "\f023";
}

article.Select h2::before {
  content: "\f11b";
}

article.Sharing h2::before {
  content: "\f15b";
}

article.Sync h2::before {
  content: "\f2f1";
}

article.System h2::before {
  content: "\f3fd";
}

article.Terminal h2::before {
  content: "\f120";
}

article.Three h2::before {
  content: "\f1b3";
}

article.thriftmac h2::before {
  content: "\f1ea";
}

article.Timer h2::before {
  content: "\f1da";
}

article.To-Do h2::before {
  content: "\f560";
}

article.Tool h2::before {
  content: "\f7d9";
}

article.Utilities h2::before {
  content: "\f566";
}

article.Video h2::before {
  content: "\f03d";
}

article.Wallpaper h2::before {
  content: "\f03e";
}

article.Weather h2::before {
  content: "\f185";
}

article.Web h2::before {
  content: "\f717";
}

article.Window h2::before {
  content: "\f2d2";
}

article.Word h2::before {
  content: "\f15c";
}

article.Workflow h2::before {
  content: "\f0e8";
}

article.Writing h2::before {
  content: "\f5ad";
}