@font-face { font-family: Voltaire; src: url('Voltaire-Regular.ttf'); }
@font-face { font-family: VT323; src: url('VT323-Regular.ttf'); }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-corner {
  background-color: rgba(0,0,0,0);
}

/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}

a, img {
  border:none;
}

p {
  margin: 0px;
}

iframe {
  min-width:321px;
}

body {
  background:url("CatalogBackground.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

  text-align: center;
  background-color: #796F6D;
  /* background:url("backgroundOffice.jpg") no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

#catalog {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;

  /*
  columns: 30% 3;
  height: 200%;


  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: .5rem;
  -moz-column-gap: .5rem;
  column-gap: .5rem;*/
}

.game {
  /* Background */
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 25px;
  border:5px solid black/*#a91d67*/;
  background-color: #FFCEE5;
  opacity: 90%;

  /* Size */
  /*max-height: 90%;
  min-height: 500px;*/
  max-width: 400px;
  min-width: 325px;
  max-height: 735px;
  /*height: 625px;*/
  padding: 0px 10px 0px 10px;
  margin: 15px;

  /* Arrangement */
  overflow: scroll;
  flex: 1;

  /* Text */
  text-align: center;
  vertical-align: middle;
  font-family:"Voltaire";
  font-size: 16pt;
  line-height: 1.5em;
  color: #000000;
}

.game.KnifeBunny {
  background-image: url('IntroBackground.jpg');
  background-color: #B2E0F1;
}

.game.KnifeBunnyJams {
  background-image: url('JamBackground.jpg');
  background-color: #FFE2BD;
}

.game.Persuasion {
  background-image: url('PersuasionBackground.jpg');
  background-color: #D1C7C3;
}

.game.Conviction {
  background-image: url('ConvictionBackground.jpg');
  background-color: #A8E1AC;
}

.game.Opacity {
  background-image: url('OpacityBackground.jpg');
  background-color: #DBDBDB;
}

.game.Vibes {
  background-image: url('VibesBackground.jpg');
  background-color: #EBF6FD;
}

.game.Organize {
  background-color: #F3E0F1;
}

.game.Access {
  background-image: url('AccessBackground.jpg');
  background-color: #E6F5FF;
}

.game.Synthia {
  background-color: #EFD2FF;
}

.game.OneLucidDream {
  background-image: url('OneLucidDreamBackground.jpg');
  background-color: #010227;
  color: #ffffff;
  color-scheme: dark;
}

.game.okEros {
  background-color: #E6FFE9;
  border-width: 5px;
}

.game.LegleBinding {
  background-image: url('LegleBindingBackground.jpg');
  background-color: #f3f0ec;
}

.game.LosingFeyce {
  background-color: #000000;
  color: #ffffff;
  color-scheme: dark;
}

.game.RecalleR {
  background-image: url('RecalleRBackground.jpg');
  background-color: #C5A7BE;
}

.game.DivineRight {
  background-color: #dfdcd8;
}

.game.NovelPassport {
  background-image: url('NovelPassportBackground.jpg');
  background-color: #FDFFC5;
}

.game.Nuance {
  background-color: #DDDDDD;
}

.game.Bread {
  background-color: #000000;
  color: #ffffff;
  color-scheme: dark;
}

.game.Unraveled {
  background-image: url('UnraveledBackground.jpg');
  background-color: #DCCFBB;
}

.game.Closer {
  background-image: url('CloserBackground.jpg');
  background-color: #ECECEC;
}

.game.PaigeAgainsttheMachine {
  /*background-image: url('PaigeAgainsttheMachineBackground.jpg');*/
  background-color: #85C3C3;
}

.game.VelociRapture {
  /*background-image: url('PhilosoRaptureBackground.jpg');*/
  background-color: #FFFFFF;
}

.machine {
  font-family:"VT323";
}

.game.Butterfly {
  background-image: url('ButterflyBackground.jpg');
  background-color: #F9E3F9;
}

.game.Offspring {
  /*background-image: url('GarymandersBackground.jpg');*/
  background-color: #FBFFE9;
}

.game.Garymanders {
  /*background-image: url('GarymandersBackground.jpg');*/
  background-color: #FFF6C1;
}

.game.Legislated {
  /*background-image: url('LegislatedBackground.jpg');*/
  background-color: #EBEBEB;
}

.section {
  width: 100%;
  padding: 10px 0px 10px 0px;
  border-top: 2px dashed #a91d67;
}

.section:first-child {
  border-top: none;
}

.section:last-child {
  padding: 10px 0px 0px 0px;
}

.deets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;

  position: relative;
  width: 100%;
  gap: 20px;
}

.deet {
  flex: 1;
}

.deet.main {
  min-width: 3.5em;
}

.deet.bullet {
  flex: none;
  width: 50px;
  /*display: flex;
  justify-content: center;
  flex-direction: column;*/
  margin: auto;
}

.deet.indented {
  flex: 1;
}

.components {
  min-height: 2em;
  display: grid;
}

.component {
  padding-top: 5px;
  align-items: center;
}

.component:first-child {
  padding-top: 0px;
}

.deet.count {
  flex: 1;
  margin: auto;
}

.deet.item {
  flex: 4;
  text-align: left;
}

.deetIcon {
  width: 2em;
  display: inline;
}

.statusIcon {
  width: 1.5em;
  display: inline;
}

/* Set your aspect ratio */
.sizzleContainer {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}

.sizzleContainer iframe,
.sizzleContainer embed,
.sizzleContainer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.title {
  font-size: 20pt;
  font-weight: bold;
  padding-bottom: 5px;
}

summary {
  cursor: pointer;
}

.description p {
  padding-top: 10px;
}

.status {
  font-style: italic;
}

/* For mobile mode (Desktop mode is handled via js) */
@media (max-width: 760px) {
  .desktop { display: none; }
}