@font-face {
  font-family: 'ppeditorial';
  src:
    url("/fonts/ppeditorialnew-regular.woff2") format('woff2'),
    url("/fonts/ppeditorialnew-regular.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

:root
{
  --background: #fffff0;
  --text: #312f28;
  --text-strong: #000;
}

html
{
  background: #fffff0
}

body
{
  background-color: var(--background);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 1em;
  letter-spacing: 0;
  padding-top: 2.5em;
}

header.mag-style
{
  position: relative;
  display: grid;
  justify-content: center;
  align-items: top;
  width: 100%;
}

header.mag-style h1
{
  color: transparent;
  height: 48rem;
  width: 80rem;
  background-image: url("/img/1-bit-television.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.platform-links ul
{
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.platform-links li
{
  list-style: none;
  margin: 0;
  padding: 0;
}

.platform-links
{
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  gap: 2rem;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.platform-links  .platform-link
{
  flex: 1 1 auto;

  border: 0.125em solid var(--text);
  border-radius: 1em;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  display: grid;
  justify-content: stretch;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  overflow: clip;
}

.platform-link.s2
{
  background: var(--text);
  color: var(--background);
  
  background: var(--background);
  color: var(--text);
  font-size: .625em;
  letter-spacing: .1em;
  padding: .125em 1em;
}

.platform-link.steam
{
  background: var(--background);
  color: var(--text);
  
  background: var(--text);
  color: var(--background);
  font-size: .75em;
  padding: .25em .5em;
}

.platform-link.steam a
{
  gap: .25em;
}


.platform-link a
{
  color: inherit;
  text-decoration: none;
  display: grid;
  align-items: stretch;
  justify-content: center;
  gap: .5em;
}

.platform-link a::after
{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* .platform-link.s2
{
  color: var(--background);
  background-color: var(--text);
  display: inline-block;
  position: relative;
  margin: 0;
  border: 0.125em solid var(--background);
  padding: 1em;
  font-size: .5em;

} */

.platform-link span:nth-of-type(1),
.platform-link span:nth-of-type(3)
{
  display: block;
  
}

.platform-link span:nth-of-type(2)
{
  display: block;
  width: 100%;
  margin: 0 auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: contain;
  color: transparent;
  text-indent: -9999vw;
}

.platform-link.s2 span:nth-of-type(2)
{
  -webkit-mask-image: url('/img/platform-s2.svg');
  background: var(--text);
  height: 3em;

}

.platform-link.steam span:nth-of-type(2)
{
  -webkit-mask-image: url('/img/blippo-steam-logo.svg');
  background: var(--background);
  height: 3em;
  
}

.copy
{
  font-size: 1em;
  line-height: 1.225em;
  max-width: 90rem;
  margin: 0 auto;
  font-family: ppeditorial;
}

@media screen and (min-width: 670px)
{
  .copy
  {
    columns: 2;
    column-gap: 2em;
    text-align: justify;
    -webkit-hyphens: auto;
    font-size: .825em;
  }
  
  .copy p::first-line
  {
    letter-spacing: -0.0125em;
  }
}

.copy p
{
  margin: 0 0 1em 0;
  display: inline-block;
}

.copy p:last-child::before
{
  content: "";
  display: block;
  height: 15rem;
  float: right;
  width: 29rem;
  shape-outside: polygon(23% 20%, 100% 15%, 100% 100%, 0 100%, 0 60%);
  -webkit-mask-image: url("/img/blippo-logo.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom right;
  background-color: var(--text);
}

.link-depg
{
  background: var(--background);
  color: var(--text);
  padding: .5em 1em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: .25em;
  margin: 0 auto;
  border: 0.125em solid;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  border-radius: 1em;
  text-wrap: nowrap;
  width: 90rem;
}

.link-depg::before
{
  content: "→";
  order: 2;
  font-size: 4rem
}

.link-depg::after
{
  content: "";
  display: block;
  width: 9rem;
  height: 6rem;
  margin: 0;
  -webkit-mask-image: url("/img/epg-logo-small.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: contain;
  color: transparent;
  text-indent: -9999vw;
  background-color: var(--text);
  order: 3;
}

.link-depg a
{
  color: inherit;
  text-decoration: none;
  font-size: 4.2rem;
  order: 1;
}

.link-depg a::after
{
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.link-teleshop
{
  background: var(--text);
  color: var(--background);
  padding: .5em 1em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: .25em;
  margin: 0 auto;
  border: 0.125em solid;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  border-radius: 1em;
  text-wrap: nowrap;
}

.link-teleshop a
{
  text-decoration: none;
}

.dev-logos
{
  display: flex;
  flex-flow: row wrap;
  gap: 3rem;
  max-width: auto;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.dev-logos .dev-logo
{
  height: 15rem;
  color: transparent;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  position: relative;
}

.dev-logos .dev-logo a::after
{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text);
}

.dev-logos #logo-yacht
{
  -webkit-mask-image: url("/img/dev-logo-yacht.svg");
  width: 16rem;
}

.dev-logos #logo-telefantasy
{
  -webkit-mask-image: url("/img/dev-logo-telefantasy.svg");
  width: 42rem;
}

.dev-logos #logo-dustin
{
  -webkit-mask-image: url("/img/dev-logo-dustin.svg");
  width: 10rem;
}

.dev-logos #logo-noblerobot
{
  -webkit-mask-image: url("/img/dev-logo-noblerobot.png");
  width: 12rem;
}

.screenshots
{
  
  display: flex;
  flex-flow: column;
  gap: 1em;
}

.screenshots .screenshot
{
  width: 90rem;
  height: 67.5rem;
  height: 50.625rem;
  overflow: clip;
  border-radius: 0.675em;
}

.screenshots .screenshot img
{
  width: 133.334%;
  height: 100%;
  left: -16.667%;
  
  width: 100%;
  height: 100%;
  left: 0;
}

@media screen and (min-width: 670px)
{
  .screenshots
  {
    flex-flow: row wrap;
    gap: 1rem;
  }
  
  .screenshots .screenshot
  {
    flex: 0 0 17.2rem;
    width: 17.2rem;
    height: 12.9rem;
    height: 9.675rem;
    outline: 0.125rem solid var(--text);
  }
}

.screenshots .screenshot::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #948a78;
    opacity: 34%;
    pointer-events: none;
    z-index: 100;
}

.screenshots ul
{
  display: contents;
  list-style: none;
  padding: 0;
  margin: 0;
}