@import url("https://fonts.googleapis.com/css2?family=Knewave&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* if you want to use different fonts, you can use other stuff from google fonts
   if you don't want to use google, you may want to look into hosting your own fonts locally */
/* display variables! skip the images if you don't want them */
:root {
  --background: #ECEBDE;
  --foreground: #000000;
  --accent: #A59D84;
  --mainfont: "Work Sans", Helvetica, Arial, sans-serif;
  --headingfont: "Knewave", "Arial Black", sans-serif;
  --roundedCorners: 0px;
  --pageBgImage: url();
  --contentBgImage: url();
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--background);
  background-image: url(--pageBgImage);
  color: var(--foreground);
  font-family: var(--mainfont);
  font-size: 1em;
}

a {
  color: var(--accent);
  text-decoration: underline;
}
a:hover {
  color: color-mix(in srgb-linear, var(--accent), #000000 50%);
}

.icon {
  width: 16px;
  height: 16px;
  text-indent: -999px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background-color: var(--foreground);
}
.icon.web {
  mask: url(../images/web.svg);
}
.icon.windows {
  mask: url(../images/windows.svg);
}
.icon.macos {
  mask: url(../images/macos.svg);
}
.icon.linux {
  mask: url(../images/linux.svg);
}
.icon.android {
  mask: url(../images/android.svg);
}
.icon.random {
  mask: url(../images/random.svg);
}
.icon.sort-asc {
  mask: url(../images/sort-asc.svg);
}
.icon.sort-desc {
  mask: url(../images/sort-desc.svg);
}
.active .icon {
  background-color: var(--accent);
}

.btn {
  padding: 5px 10px;
  font-size: 1em;
  font-weight: bold;
  border-radius: 5px;
  background-color: var(--accent);
  color: var(--background);
  text-decoration: none;
  white-space: pre;
}
.btn:hover {
  background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
  color: var(--background);
}

#page {
  max-width: 960px;
  margin: 50px auto;
  background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 50%);
  background-image: var(--contentBgImage);
  border-radius: var(--roundedCorners);
}
body.wide #page {
  max-width: none;
  margin: 0;
}

header {
  padding: 20px 20px 0;
  position: relative;
  background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 25%);
}
header h1 {
  font-size: 2.5em;
  font-weight: bold;
  margin: 0;
}
header .hosted {
  margin: 0;
}
header .joined,
header .entries {
  text-align: center;
  position: absolute;
  top: 20px;
  right: 20px;
}
header .joined .count,
header .entries .count {
  font-size: 2.25em;
  display: block;
}
header .joined .caption,
header .entries .caption {
  font-size: 0.8em;
  display: block;
  color: color-mix(in srgb-linear, var(--foreground) #FFFFFF, 25%);
}
header nav {
  margin-top: 20px;
  padding-bottom: 10px;
}
header nav ul {
  margin-bottom: 0;
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}
header nav ul li a {
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 5px transparent solid;
  color: var(--foreground);
}
header nav ul li a.current, header nav ul li a:hover {
  border-bottom: 5px var(--accent) solid;
  color: var(--foreground);
}

main {
  padding: 20px;
  text-align: center;
}
.submissions main {
  display: grid;
  grid-template-areas: "filters list";
  grid-template-columns: 250px 1fr;
}

footer {
  text-align: center;
  font-size: 0.8em;
  padding: 5px 10px;
  margin-top: 20px;
}
footer a {
  text-decoration: none;
}

[popover] {
  position: fixed;
  z-index: 99;
  max-width: 90%;
  max-height: 90%;
}

[popover]:-internal-popover-in-top-layer::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.clock {
  border: 1px var(--accent) solid;
  border-radius: 5px;
  display: inline-grid;
  grid-template-areas: "date date" "countdown join";
  margin: 50px auto;
}
.clock .dates {
  border-bottom: 1px var(--accent) solid;
  padding: 10px;
  grid-area: date;
  text-align: center;
}
.clock .countdown {
  grid-area: countdown;
  border-right: 1px var(--accent) solid;
  padding: 20px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.clock .countdown .counters {
  display: flex;
  align-items: stretch;
}
.clock .countdown .counters > div {
  padding: 10px;
  border-right: 2px var(--accent) solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: pre;
}
.clock .countdown .counters > div:last-child {
  border-right: none;
}
.clock .countdown .counters span {
  display: block;
  text-align: center;
}
.clock .countdown .counters span.num {
  font-weight: bold;
}
.clock .countdown .counters span.caption {
  font-size: 0.8em;
  font-style: italic;
}
.clock .join {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
}
.clock .joinbtn {
  padding: 10px 20px;
  font-size: 1.25em;
  font-weight: bold;
  border-radius: 5px;
  background-color: var(--accent);
  color: var(--background);
  text-decoration: none;
  white-space: pre;
}
.clock .joinbtn:hover {
  background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
}

.content {
  text-align: left;
}

#filters {
  grid-area: filters;
  text-align: left;
}
#filters #tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-start;
}
#filters #tags button {
  white-space: pre;
}
#filters details {
  margin-bottom: 10px;
}
#filters details ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#filters p.label,
#filters details summary {
  font-size: 0.8em;
  color: color-mix(in srgb-linear, var(--foreground), var(--background) 10%);
  padding: 5px 0;
  margin-bottom: 0;
}
#filters ul#sorts {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
#filters ul#sorts li button {
  appearance: none;
  border: none;
  background-color: transparent;
  color: var(--foreground);
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  font-size: 0.9em;
}
#filters ul#sorts li button img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
}
#filters ul#sorts li button.sort-active {
  color: color-mix(in srgb-linear, var(--accent), #000000 10%);
  font-weight: bold;
}
#filters .afs-btn-filter {
  appearance: none;
  padding: 3px 0;
  border: none;
  border-radius: 0;
  font-family: inherit;
  background-color: transparent;
}
#filters .afs-btn-filter.active {
  color: color-mix(in srgb-linear, var(--accent), #000000 10%);
  background-color: transparent;
  font-weight: bold;
}
#filters .afs-filter-search {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: var(--foreground);
  transition: border-color 0.2s ease;
  margin-bottom: 10px;
  font-family: inherit;
}
#filters .afs-filter-counter {
  text-align: center;
  font-style: italic;
  font-size: 0.9em;
}

#list {
  display: grid;
  grid-area: list;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: fit-content(300px);
  gap: 10px;
}

.item {
  text-align: left;
  border: 1px red solid;
}
.item h3 {
  margin: 0;
  font-size: 1.25em;
}
.item h3 a {
  color: var(--foreground);
  text-decoration: none;
}
.item h3 a:hover {
  text-decoration: underline;
}
.item .thumb {
  position: relative;
  padding-top: 75%;
}
.item .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item .authors {
  font-size: 0.9em;
  margin: 5px 0;
}
.item .authors a {
  color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
  text-decoration: none;
}
.item .authors a:hover {
  text-decoration: underline;
}
.item .blurb {
  margin-top: 5px;
  font-size: 0.8em;
  color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
}

.game main {
  display: grid;
  grid-template-areas: "header header" "screenshots stuff";
  text-align: left;
  border-bottom: 1px var(--accent) solid;
  padding-bottom: 0;
}
.game main h2 {
  margin: 0;
}
.game main h2 a {
  font-size: 0.9rem;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
}
.game main h3 {
  margin: 0;
}
.game main .blurb {
  margin: 1em 0;
}
.game main .game-header {
  margin: -20px -20px 0;
  width: calc(100% + 40px);
  border-bottom: 1px var(--accent) solid;
  padding: 20px;
  text-align: left;
  grid-area: header;
}
.game main .jamsub {
  font-size: 0.8em;
  font-style: italic;
  color: color-mix(in srgb-linear, var(--foreground), var(--background) 15%);
  margin: 0;
}
.game .screenshots {
  border-right: 1px var(--accent) solid;
  grid-area: screenshots;
  padding: 20px;
}
.game .screenshots .gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "featured featured";
}
.game .screenshots .gallery a, .game .screenshots .gallery button {
  position: relative;
  padding-top: 75%;
  width: 100%;
}
.game .screenshots .gallery a img, .game .screenshots .gallery button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game .screenshots .gallery > :first-child {
  grid-area: featured;
}
.game .interaction {
  grid-area: stuff;
}
.game .downloads {
  padding: 20px;
}
.game .downloads ul {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.game .downloads ul li {
  margin-bottom: 10px;
}
.game .downloads .size {
  color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
}
.game .downloads .platforms-label {
  display: inline-block;
  width: 1px;
  overflow: hidden;
  text-indent: -999px;
}
.game .downloads .icon {
  width: 24px;
  height: 24px;
  background-color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
}
.game .comments {
  border-top: 1px var(--accent) solid;
}

/*# sourceMappingURL=style.css.map */