@charset "UTF-8";
:root {
  --let--animation-ease-emphased-in: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --let--animation-ease-emphased-out: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --let--animation-ease-emphased-in-out: cubic-bezier(0.85, 0, 0.10, 1);
}

:root {
  --let--accent-hue: 151;
  --let--background-accent: hsl(0, 0%, 20%);
  --let--background-bot: hsl(0, 0%, 0%);
  --let--background-mid: hsl(0, 0%, 10%);
  --let--background-top: hsl(0, 0%, 15%);
  --let--text-active: hsl(0, 0%, 95%);
  --let--text-normal: hsl(0, 0%, 80%);
  --let--text-inactive: hsl(0, 0%, 60%);
  --let--border-inactive: hsl(0, 0%, 20%);
  --let--border-hover: hsl(0, 0%, 40%);
  --let--border-active: hsl(0, 0%, 30%);
  --let--color-primary: hsl(151, 100%, 65%);
  --let--color-secondary: hsl(180, 100%, 57%);
  --let--gradient-igjam: linear-gradient( 30deg, var(--let--color-primary) 20%, var(--let--color-secondary) 50%, var(--let--color-primary) 80% );
}

.page-game-details .games-header {
  margin-bottom: 1em;
}
.page-game-details .games-header.is--cheated h1 {
  text-decoration: line-through;
  color: var(--let--color-critical-mid);
}
.page-game-details .games-header.is--cheated:before {
  font-size: 1.3em;
  content: "cheated";
  color: var(--let--color-critical-mid);
  font-weight: bold;
}
.page-game-details .game-details {
  display: grid;
  grid-gap: 2em;
  grid-template-areas: "sidebar" "game-info";
  grid-template-columns: 1fr;
}
@container (width > 48em) {
  .page-game-details .game-details {
    grid-template-areas: "game-info sidebar";
    grid-template-columns: auto min(40%, 25em);
  }
}
.page-game-details .game-image {
  container-name: game-image;
  container-type: inline-size;
  margin-bottom: 1em;
}
.page-game-details .game-image img {
  width: 100%;
  object-fit: cover;
  height: auto;
  max-height: 150cqw;
}
@container (width > 48em) {
  .page-game-details .game-image {
    margin-bottom: 0;
  }
}
.page-game-details .game-sidebar {
  grid-area: sidebar;
}
.page-game-details .game-infos {
  grid-area: game-info;
}
.page-game-details .game-info-section {
  margin-bottom: 1em;
}

.page-home {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "next-jam" "banner" "news" "about-us" "top-games" "all-games";
  grid-gap: 2em;
}
@container (width > 48em) {
  .page-home {
    grid-template-areas: "banner next-jam" "news about-us" "top-games top-games" "all-games empty";
  }
}
.page-home .open-banner {
  grid-area: banner;
}
.page-home .news {
  grid-area: news;
}
.page-home .about-us {
  grid-area: about-us;
}
.page-home .top-games {
  grid-area: top-games;
}
.page-home .all-games {
  grid-area: all-games;
}

.page-jam-details .jam-date {
  margin-top: 2em;
}
.page-jam-details .jam-date-label {
  font-weight: bold;
}
.page-jam-details .jam-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1em 0;
}
.page-jam-details .jam-links .link-pad {
  margin: 1.5em;
}
.page-jam-details .jam-link {
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
  width: 12em;
  height: 12em;
  text-align: center;
}
.page-jam-details .jam-link .link-name {
  z-index: 10;
  color: var(--let--color-text-active);
  text-decoration: none;
}
.page-jam-details .jam-link::before {
  background: var(--let--color-primary);
  border-radius: 50%;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.7;
  box-shadow: none;
  transition: all 0.5s var(--let--animation-ease-emphased-in-out);
  z-index: 1;
}
.page-jam-details .jam-link:hover::before {
  border-radius: 40%;
  box-shadow: 0 0 1em 0 var(--let--color-secondary);
}
.page-jam-details .jam-description {
  margin-top: 1em;
}

.page-join-jam .join-title {
  margin-bottom: 1em;
}
.page-join-jam .join-title h1 {
  color: var(--let--color-primary);
}
.page-join-jam .join-title h1:hover {
  color: var(--let--color-secondary);
}
.page-join-jam .jam-terms {
  background: var(--let--background-mid);
  border-radius: 0.5em;
  margin: 0.5em;
  padding: 0.5em 1em;
}
.page-join-jam .form .input {
  justify-content: center;
}
.page-join-jam .join-grid {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 2em;
  margin-bottom: 2em;
}
@container (width > 48em) {
  .page-join-jam .join-grid {
    grid-template-columns: max(10%, 20em) auto;
  }
}
.page-join-jam .jam-join-forms {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.login-forms-container {
  display: grid;
  gap: 1em;
}
@container (width > 48em) {
  .login-forms-container {
    grid-template-columns: auto auto;
  }
}

.page-team-overview .team-header {
  margin-bottom: 1em;
}
.page-team-overview .jam-link {
  font-weight: bold;
  color: var(--let--color-primary);
}
.page-team-overview .jam-link:hover {
  color: var(--let--color-secondary);
}
.page-team-overview .pending-members-title {
  margin: 1em 0 0.5em;
}
.page-team-overview .member-list {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.page-team-overview .team-grid {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 2em;
  margin-bottom: 2em;
}
@container (width > 48em) {
  .page-team-overview .team-grid {
    grid-template-columns: max(10%, 20em) auto;
  }
}
.page-team-overview .edit-game, .page-team-overview .game, .page-team-overview .create-game {
  margin-bottom: 1em;
}
.page-team-overview .edit-game .title {
  margin: 1em 0;
}

.page-user-overview .user-header {
  align-items: center;
  display: flex;
  gap: 1em;
  padding-bottom: 1em;
}
.page-user-overview .profile-image img {
  border-radius: 3.5em;
  height: 7em;
  object-fit: cover;
  width: 7em;
}
.page-user-overview .user-grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: auto;
}
@container (width > 48em) {
  .page-user-overview .user-grid {
    grid-template-columns: 1fr max(10%, 20em);
  }
}
.page-user-overview .user-info h1 {
  margin: 1em 0 0.5em;
}
.page-user-overview .info-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5em 1em;
}
.page-user-overview .games ul {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0;
}
.page-user-overview .games li {
  list-style: none;
}
.page-user-overview .edit-user svg {
  width: 0.8em;
  height: 0.8em;
}

.container {
  container-name: container;
  container-type: inline-size;
  padding: 0 2em;
  max-width: 100em;
  margin: 0 auto;
}

.footer-main {
  padding: 2em 2em 4em;
  container-name: footer-container;
  container-type: inline-size;
}
.footer-main .footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 2em;
  padding: 0;
}
.footer-main .footer-links li {
  list-style: none;
}
.footer-main .footer-links a {
  color: var(--let--color-primary);
}
.footer-main .footer-links a:hover {
  color: var(--let--color-secondary);
}
@container footer-container (min-width: 48em) {
  .footer-main .footer-links {
    flex-direction: row;
  }
  .footer-main .footer-links li:not(:last-of-type)::after {
    content: "|";
    display: inline-block;
    padding: 0 0.5em;
  }
}
.footer-main .footer-copyright {
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

button.text {
  background: none;
  border: 0 none;
  color: var(--let--color-primary);
  font-size: 1em;
  cursor: pointer;
}
button.text:hover {
  color: var(--let--color-secondary);
}
button.text:active {
  outline: 0 none;
}

.input input, .input select, .input textarea {
  color: var(--let--text-normal);
}
.input input:-webkit-autofill, .input input:-webkit-autofill:focus, .input select:-webkit-autofill, .input select:-webkit-autofill:focus, .input textarea:-webkit-autofill, .input textarea:-webkit-autofill:focus {
  transition: background-color 0s 604800s, color 0s 604800s;
}
.input textarea {
  background: var(--let--background-top);
  border-radius: 0.3em;
  border: solid 2px var(--let--border-inactive);
  box-sizing: border-box;
  font-size: 1em;
  font-family: "Roboto", sans-serif;
  padding: 0.5em 0.8em;
  transition: border-color 0.2s ease-in-out;
  width: 100% !important;
}
.input textarea:focus {
  border-color: var(--let--border-active);
  outline: none;
}
.input.small button {
  padding: 0.2em 0.8em;
}
.input input + .small {
  color: var(--let--text-normal);
  opacity: 0.8;
}

.inline-input {
  display: flex;
  flex-direction: row;
}

.inline-form {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.checkbox {
  align-items: center;
  display: flex;
  flex-direction: row;
  position: relative;
  gap: 0.5em;
}
.checkbox::before {
  content: "";
  border-radius: 0.7em;
  height: 1.4em;
  width: 2.5em;
  background-color: var(--let--border-active);
}
.checkbox::after {
  transition: all 0.2s ease-in-out;
  background-color: var(--let--border-inactive);
  border-radius: 50%;
  content: "";
  height: 1em;
  left: 0.2em;
  position: absolute;
  width: 1em;
}
.checkbox input {
  display: none;
}
.checkbox:has(input:checked)::after {
  background-color: var(--let--color-primary);
  left: 1.2em;
}

.page-header {
  background: none;
}
.page-header .header-logo {
  text-align: center;
}
.page-header .header-logo img {
  height: 10em;
  width: auto;
}

.list-container {
  container-name: list-container;
  container-type: inline-size;
}
.list-container .list-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2em;
  container: list-container;
}
@container (width > 27em) {
  .list-container .list-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@container (width > 48em) {
  .list-container .list-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@container (width > 64em) {
  .list-container .list-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.markdown h1 {
  margin: 0.5em 0;
  font-size: 1.8em;
}
.markdown h2 {
  margin: 0.5em 0;
  font-size: 1.2em;
}
.markdown h3, .markdown h4, .markdown h5, .markdown h6 {
  margin: 1em 0;
  font-size: 1em;
}
.markdown p {
  margin: 1em 0;
}
.markdown hr {
  border-image: var(--let--gradient-igjam) 1;
  margin: 1.5em 0;
}
.markdown a {
  color: var(--let--color-primary);
}
.markdown a:hover {
  color: var(--let--color-secondary);
}
.markdown .tagblock-image-with-text {
  align-items: center;
  display: flex;
  container-type: inline-size;
  gap: 2em;
}
@container (width < 32em) {
  .markdown .tagblock-image-with-text {
    flex-direction: column;
    gap: 0;
  }
}
.markdown .tagblock-image-with-text .image-with-text--side-text {
  min-width: 50%;
}
.markdown .tagblock-highlight-link a {
  color: var(--let--text-inactive);
  display: inline-block;
  padding: 0.5em;
  background: var(--let--color-primary);
  border-radius: 0.5em;
  font-size: 1.5em;
}

.downloads-list {
  display: flex;
  gap: 1em;
  flex-direction: column;
  margin-bottom: 1em;
}
.downloads-list .game-download a {
  align-items: center;
  display: inline-flex;
  padding: 0.3em 0.5em;
  background: var(--let--background-top);
  border-radius: 0.3em;
  border: solid 2px var(--let--border-inactive);
  box-sizing: border-box;
}
.downloads-list .type-label {
  margin-right: 0.5em;
}
.downloads-list .type-label svg {
  width: 1em;
  height: 1em;
}

.edit-game-form {
  margin-top: 2em;
  margin-bottom: 1em;
}

.edit-game-rating-form {
  margin-top: 2em;
}

.game-box {
  display: flex;
  container-name: game-box;
  container-type: inline-size;
}
.game-box.is--cheated {
  border: solid var(--let--color-critical-mid) 3px;
}
.game-box.is--cheated:hover::after {
  backdrop-filter: blur(5px);
  display: flex;
  width: 100%;
  height: 100%;
  content: "Cheated";
  position: absolute;
  align-items: center;
  justify-content: center;
  color: var(--let--color-critical-mid);
  font-size: 1.3em;
  pointer-events: none;
}
.game-box .title {
  color: currentColor;
}
.game-box .game-details {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.game-box .image-wrapper {
  margin-bottom: 0.5em;
}
.game-box .image-wrapper img {
  object-fit: cover;
  height: 100cqw;
  width: 100cqw;
}
.game-box .game-highlight {
  color: var(--let--color-secondary);
}

.game-comment-box {
  padding: 1em 0;
}
.game-comment-box .author-link {
  color: var(--let--color-primary);
}
.game-comment-box .author-link:hover {
  color: var(--let--color-secondary);
}
.game-comment-box .comment-text {
  margin-top: 0.5em;
}

.jam-listing-box {
  padding: 0.5em 0;
  display: flex;
  flex-direction: column;
}
.jam-listing-box .title {
  display: inline-block;
  color: var(--let--color-primary);
  margin-bottom: 0.5em;
}
.jam-listing-box .title:hover {
  color: var(--let--color-secondary);
}

.manage-game-downloads-form {
  margin-top: 2em;
}
.manage-game-downloads-form .title {
  margin-bottom: 0.5em;
}
.manage-game-downloads-form .download-files {
  display: flex;
  gap: 1em;
  flex-direction: column;
  margin-bottom: 1em;
}
.manage-game-downloads-form .download-file {
  align-items: center;
  background: var(--let--background-top);
  border-radius: 0.3em;
  border: solid 2px var(--let--border-inactive);
  box-sizing: border-box;
  display: flex;
  padding: 0.3em 1em;
}
.manage-game-downloads-form .file-label {
  margin-right: auto;
}

.manage-screenshots-form {
  margin-top: 2em;
}
.manage-screenshots-form .edit-screenshot-controls {
  position: relative;
}
.manage-screenshots-form .edit-screenshot-controls:hover .screenshot-actions {
  opacity: 1;
}
.manage-screenshots-form .screenshot-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .manage-screenshots-form .screenshot-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    gap: 2em;
    background: rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease;
    opacity: 0;
  }
}
@media (hover: none) {
  .manage-screenshots-form .screenshot-actions .screenshot-control {
    display: inline-block;
    height: 100%;
    flex: 1;
  }
  .manage-screenshots-form .screenshot-actions button {
    width: 100%;
  }
  .manage-screenshots-form .screenshot-actions .screenshot-control:first-of-type button {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .manage-screenshots-form .screenshot-actions .screenshot-control:last-of-type button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}
.manage-screenshots-form .screenshot-control.reset {
  color: var(--let--color-critical-mid);
}
.manage-screenshots-form .screenshot-control.reset:hover {
  color: var(--let--color-critical-bg);
}
.manage-screenshots-form .screenshot-control {
  font-size: 1.2em;
  font-weight: bold;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.pagination-container {
  container-name: pagination;
  container-type: inline-size;
}

.pagination {
  align-items: start;
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  justify-content: center;
  padding: 1em 0;
}
.pagination .numbers {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination .page-link {
  display: inline-block;
  padding: 0.3em 0.8em 0.5em;
  border: transparent solid 1px;
  border-radius: 0.1em;
}
.pagination .page-link.active {
  color: var(--let--background-accent);
  background-color: var(--let--color-primary);
}
.pagination .page-link.active:hover {
  background-color: var(--let--color-secondary);
}
.pagination .page-link:hover {
  border-color: currentColor;
}
@container (width > 48em) {
  .pagination .page-link {
    font-size: 1.2em;
  }
}

.rating-form {
  margin-top: 0.5em;
}
.rating-form .star {
  cursor: pointer;
}
.rating-form .star::before {
  content: "⭐";
}
.rating-form .star > input {
  display: none;
}
.rating-form .star:has(input:checked) ~ .star {
  filter: grayscale(0.8);
}

.rating-result .rating-item {
  margin-top: 0.5em;
}
.rating-result .star::before {
  content: "⭐";
}
.rating-result .star.star-active ~ .star {
  filter: grayscale(0.8);
}

.screenshot-gallery {
  margin-bottom: 1em;
}
.screenshot-gallery .title {
  margin-bottom: 0.5em;
}

.screenshot-listing {
  container-name: screenshot-listing;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

.screenshot-preview {
  width: 100%;
  container-name: screenshot-preview;
  container-type: inline-size;
}
.screenshot-preview img {
  object-fit: cover;
  height: 100cqw;
  width: 100cqw;
}

.screenshot-preview-dialog {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  border: 0 none;
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 200ms ease-in-out;
  width: 100%;
}
.screenshot-preview-dialog[open] {
  cursor: pointer;
  opacity: 1;
  pointer-events: all;
}
.screenshot-preview-dialog img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.team-listing {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.team-box {
  display: flex;
  justify-content: space-between;
}
.team-box .request-pending {
  color: var(--let--color-secondary);
}
.team-box .name {
  color: var(--let--color-primary);
}
.team-box .name:hover {
  color: var(--let--color-secondary);
}

.team-member-box {
  display: flex;
  justify-content: space-between;
}
.team-member-box.owner {
  order: -1;
}
.team-member-box .member-info {
  display: flex;
  gap: 0.3em;
}
.team-member-box .owner-badge {
  cursor: default;
}

body {
  grid-template-rows: 12em min-content min-content auto;
  background-color: var(--let--background-bot);
  font-family: "Roboto", sans-serif;
  color: var(--let--text-active);
}

.page-sidebar {
  background: none;
  border: solid 3px white;
  border-image: var(--let--gradient-igjam) 1;
  border-left: transparent;
  border-right: transparent;
  margin: 0 2em;
  padding: 0.2em 0;
}
.page-sidebar .navigation ul {
  justify-content: center;
  flex-wrap: wrap;
}
.page-sidebar .navigation-link a {
  color: var(--let--text-normal);
  padding: 0.6em 1em;
  white-space: nowrap;
}
.page-sidebar .navigation-link a:hover {
  background-color: var(--let--color-primary);
  color: var(--let--text-inactive);
}
.page-sidebar .navigation-link.active a {
  background-color: var(--let--color-primary);
  color: var(--let--text-inactive);
}
.page-sidebar .navigation-login a {
  color: var(--let--color-primary);
  font-weight: bold;
}

tab-container .titles-wrapper {
  display: flex;
  gap: 1em;
}
tab-container tab-title {
  display: inline-block;
  font-weight: bold;
  color: var(--let--color-primary);
  cursor: pointer;
}
tab-container tab-title:hover, tab-container tab-title.active {
  color: var(--let--color-secondary);
}
tab-container .contents-wrapper {
  overflow: hidden;
  display: grid;
  grid-template-areas: "content";
}
tab-container tab-content {
  grid-area: content;
  transform: translateX(-100%);
  transition: transform 0.2s var(--let--animation-ease-emphased-in-out);
  width: 100%;
}
tab-container tab-content.active {
  transform: translateX(0);
}

h1, h2, h3 {
  color: var(--let--text-active);
}

.bold {
  font-weight: bold;
}

a {
  text-decoration: none;
  color: currentColor;
}

.link {
  font-weight: bold;
  color: var(--let--color-primary);
}
.link:hover {
  color: var(--let--color-secondary);
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

.title {
  font-size: 1.8em;
}

.subtitle {
  font-size: 1.2em;
}

.subtext {
  color: var(--let--text-inactive);
}

.small.title {
  font-size: 1.2em;
}

.small.subtitle {
  font-size: 1em;
}

.small.paragraph {
  font-size: 0.8em;
}

.big.title {
  font-size: 4em;
}

.big.subtitle {
  font-size: 3.5em;
}

.big.paragraph {
  font-size: 2em;
}

@media (max-width: 80px) {
  .big.title {
    font-size: 3em;
  }
  .big.subtitle {
    font-size: 2.5em;
  }
  .big.paragraph {
    font-size: 1.5em;
  }
}
@media (max-width: 48em) {
  .big.title {
    font-size: 2em;
  }
  .big.subtitle {
    font-size: 1.8em;
  }
  .big.paragraph {
    font-size: 1.2em;
  }
  .title {
    font-size: 1.3em;
  }
  .subtitle {
    font-size: 1em;
  }
}
@media (max-width: 26px) {
  .title {
    font-size: 1.3em;
  }
  .subtitle {
    font-size: 1.2em;
  }
  p, h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
  }
}
jam-background {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-evenly;
  left: calc(50% - 1050px);
  position: fixed;
  pointer-events: none;
  top: 0;
  width: 2100px;
  z-index: -1;
}
jam-background .background-image-part {
  position: absolute;
}