@charset "UTF-8";

@font-face
{
  font-family: 'grenze';
  src: url('/fonts/grenze-black.woff2') format('woff2'),
       url('/fonts/grenze-black.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face
{
  font-family: 'grenze';
  src: url('/fonts/grenze-medium.woff2') format('woff2'),
       url('/fonts/grenze-medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root
{
  --pixel: .09375em;
  --sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --saltpan: #f5f0e7;
  --desert: #f1caa2;
  --sand1: #d5a265;
  --sand2: #d19158;
  --forest: #9ba136;
  --sky: #004b8c;
  --lightsky: #0064bc;
  --lightblue: #a7cee2;
  --red: #b33433;
  --black: #2a2a2a;
}

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

html
{
  font-size: 1vw;
}

body
{
  font-size: 4rem;
}

@media (min-width: 670px)
{
  body
  {
    font-size: 3rem;
  }
}

@media (min-width: 1000px)
{
  html
  {
    font-size: 10px;
  }
}

html
{
  margin: 0;
  padding: 0;
  position: relative;
  --background: var(--sky);
  --text: #131313;
  background: linear-gradient(var(--forest) 0, var(--forest) 50%, var(--sky) 50%, var(--sky) 100%);
}

body
{
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: grenze, sans-serif;
  background: linear-gradient(var(--sky) 0, var(--sky) 50%, var(--forest) 50%, var(--forest) 100%);
}

#presskit-factsheet,
#privacy-policy
{
  color: var(--secondary);
  font-family: var(--sans-serif);
}

#presskit-factsheet h1,
#privacy-policy h1,
#game-over h1,
#presskit-factsheet h2,
#privacy-policy h2,
#game-over h2,
#presskit-factsheet h3,
#privacy-policy h3,
#game-over h3,
#presskit-factsheet dt,
#privacy-policy dt,
#game-over dt,
#presskit-factsheet #footer,
#game-over #footer,
#privacy-policy #footer
{
  font-family: "grenze", sans-serif;
  font-weight: normal;
  margin: 0.5em 0;

}

#presskit-factsheet li,
#privacy-policy li,
#game-over li,
#presskit-factsheet dd,
#privacy-policy dd,
#game-over dd,
#presskit-factsheet details,
#privacy-policy details
#game-over details
{
  margin-bottom: 0.25em 0;
}

a
{
  color: inherit;
  text-decoration: underline;
}

.container
{
  margin: 0 auto;
  max-width: 80rem;
}

#header,
#intro,
#presskit-factsheet,
#privacy-policy,
#game-over,
#screenshots,
#footer
{
  background-position: center bottom, center top;
  background-size: calc(872 * var(--pixel));
  background-repeat: no-repeat;
  margin: 0;
  display: grid;
  place-items: center;
  image-rendering: crisp-edges;
  image-rendering: pixelated;

}

#header
{
  padding-top: 0;
  padding: 0 4rem 40vw 4rem;
  background-color: var(--sky);
  background-size: contain;
  background-position: center bottom;
  color: white;
  background-image: url(""), url("../img/keyart.jpg");
}

#presskit #header
{
  background-size: 100% auto;
}

#intro,
#presskit-factsheet,
#privacy-policy,
#game-over
{
  padding: 12rem 4rem;
  background-color: var(--desert);
  background-image: url("../img/desert-bottom.png"), url("../img/desert-top.png");
  background-position: center calc(100% + (30 * var(--pixel))), center calc(-160 * var(--pixel));
}

#quotes
{
  max-width: 60rem;
  margin: 0 auto;
}

#quotes .quote
{
  margin: 2em auto;
  text-align: center;

}

#quotes .rating,
#quotes .cite
{
  display: block;
  color: var(--desert);
}

#intro .container
{
  max-width: 100rem;
}

#screenshots
{
  padding: 4rem 4rem 12rem 4rem;
  background-color: var(--saltpan);
  background-image: url("../img/saltpan-bottom.png"), url("../img/saltpan-top.png");
  background-position: center calc(100% + 12rem), calc(50% + 12rem) -18rem;
}

#footer
{
  padding: 12rem 4rem;
  background-color: var(--forest);
  background-image: url("../img/forest-bottom.png"), url("../img/forest-top.png");
  color: white;
  background-position: center calc(100% + 18rem), calc(50% + 12rem) -32rem;

}

#footer div.container
{
  filter: drop-shadow(0 0.0625em 0.03125em rgba(0,0,0,.85));
  line-height: 1.15;
}

#header h1
{
  margin: 4rem auto;
  color: transparent;
}

#header h1 a
{
  display: block;
  height: 18rem;
  color: inherit;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("../img/header-title.png");
}

#trailer:hover,
#screenshots ul li:hover,
p#wishlist a:hover,
div.logos div:hover
{
  transform: translateY(-0.25rem) scale(1.005);
  /* filter: drop-shadow(0 0.25rem 1rem rgba(0,0,0,0.25)); */

}

#trailer,
#screenshots ul li,
p#wishlist a,
div.logos div
{
  transform: translateY(0) scale(1);
  /* filter: drop-shadow(0 0.25rem 1rem rgba(0,0,0,0.25)); */

  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-property: transform;
}

#trailer
{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 56.25vw;
  max-height: 45.7rem;
  max-width: 80rem;
  border-radius: 0.5em;

  cursor: pointer;
  color: transparent;
  }

#trailer iframe
{
  transition: 1000ms all ease;
  border-radius: 0.6rem;
  border: .25rem solid #000;
  padding: 0.5rem;
  background: #fff;
  overflow: hidden;
  object-fit: fill;
}

#trailer.poster iframe
{
  opacity: 0;
}

#trailer.poster,
#trailer.loading
{
  background-image: url("../img/trailer-poster.jpg");
}

#trailer.loading
{
  animation-name: pulse;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

#trailer.playing
{
  animation-name: none;
}

@keyframes pulse
{
  from { opacity: 1; }
  50% { opacity: 0.35; }
  to { opacity: 1; }
}

#trailer.playing iframe
{
  opacity: 1;
}

.videonotes
{
  display: grid;
  gap: .5em;
  margin-top: .5em;
  justify-items: center;
  align-items: center;
  text-align: center;
  width: 100%;
  font-size: .95em;
  line-height: 1;
  color: var(--lightblue);
}

.videonotes p
{
  margin: 0;
}

#platform-links
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  padding-top: .125em;
  max-width: 63rem;
}

#platform-links a
{
  position: relative;
  display: inline-flex;
  gap: 0.25em;
  text-decoration: none;
  color: var(--saltpan);
  padding: .25em .5em;
  background-color: var(--sky);
  border-radius: .2em;
  text-shadow: 0 0.0625em 0.03125em rgba(0,0,0,0.85);
  box-shadow: 0 .0625em 0 rgba(0,0,0,0.5)
}

#platform-links a::before
{
  width: 1em;
  height: 1em;
  display: block;
  content: "";
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentcolor;
  filter: drop-shadow(0 0.0625em 0.03125em rgba(0,0,0,.85));
}

#platform-links a#wishlist-button-steam::before
{
  -webkit-mask-image: url("/img/platform-logo-steam.svg");
}

#platform-links a#wishlist-button-egs::before
{
  -webkit-mask-image: url("/img/platform-logo-egs.svg");
}

#platform-links a#wishlist-button-switch::before
{
  -webkit-mask-image: url("/img/platform-logo-switch.svg");
}

#platform-links a#wishlist-button-mas::before
{
  -webkit-mask-image: url("/img/platform-logo-mas.svg");
}

#platform-links #wishlist-button-steam
{
  background-color: var(--lightsky);
}
#platform-links #wishlist-button-egs
{
  background-color: var(--forest);
}

#platform-links #wishlist-button-switch
{
  background-color: var(--red);
}

#platform-links #wishlist-button-mas
{
  background-color: var(--black);
}

.speechbubble
{
  display: grid;
  align-items: center;
  place-content: start;
  grid-gap: 0;
  grid-template-columns: calc(22 * var(--pixel)) calc( 6 * var(--pixel)) auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;

}

.speechbubble::before
{
  grid-column: 1;
  grid-row: 1;
  content: "";
  width: calc(22 * var(--pixel));
  height: calc(22 * var(--pixel));
  display: block;
  background-image: url("../img/person2.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.speechbubble::after
{
  grid-column: 2;
  grid-row: 1;
  content: "";
  width: calc( 6 * var(--pixel));
  height: calc( 6 * var(--pixel));
  display: block;
  background-image: url("../img/speech-bubble-tail.png");
  background-position: 100% center;
  background-size: contain;
  background-repeat: no-repeat;
}

#intro .speechbubble p
{
  grid-column: 3;
  grid-row: 1;
  font-weight: 400;
  line-height: 1;
  margin: auto;
  display: grid;
  padding: .25em .3em .5em .35em;
  background-repeat: no-repeat;
  background-image: linear-gradient(white 0, white calc(100% - var(--pixel)), black calc(100% - var(--pixel)), black 100%), linear-gradient(transparent 0, transparent var(--pixel), white var(--pixel), white calc(100% - (2 * var(--pixel))), black calc(100% - (2 * var(--pixel))), black calc(100% - var(--pixel)), transparent calc(100% - var(--pixel)), transparent 100%);
  background-position: 50% 0, 0 0;
  background-size: calc(100% - ( 2 * var(--pixel))) 100%, 100% 100%;
}

#intro p
{
  margin: 1em auto;
}

@media (min-width: 670px)
{
  #intro p
  {
    margin-left: calc(28 * var(--pixel));
  }
}

#mailingList
{
  margin: 0 auto 3em;
}

  
@media (min-width: 500px)
  {
      #shop a
      {
        display: inline-block;
        width: unset;
        margin: 0 .25em;
      }
  }

.hidden
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

#mailingList form#elist_form
{
  justify-content: center;
  align-items: center;
  grid-gap: 0.5em;
  display: grid;
  grid-template-columns: auto;
}

form#elist_form label,
p#status
{
  text-align: center;
  font-size: 1em;
}

form#elist_form label
{
  grid-row: 1;
  grid-column: 1 / span 2;
}

p#status
{
  opacity: 0;
  transition-duration: 350ms;
  transition-timing-function: ease;
  transition-property: opacity;
  grid-row: 1;
  grid-column: 1;
  margin: -1.5em 0 0 0;
}

p#status.success,
p#status.error
{
  opacity: 1;
  margin: 0;
  color: var(--secondary);
}

form#elist_form div.email
{

  font-family: var(--mono), monospace;
  grid-row: 2;
  grid-column: 1;
  place-self: center;
}

form#elist_form input#elist_email
{
  font: inherit;
  text-align: center;
}


form#elist_form div.checkbox
{
  font-size: 0.80em;
  max-width: 100rem;
  grid-column: 1;
  grid-row: 4;
  text-align: center;
}

form#elist_form div.checkbox input
{
  vertical-align: -.25em;
  appearance: none;
  width: 1.5em; height: 1.5em;
  border: 0.25em solid var(--text);
  position: relative;
  border-radius: 2em;
  background: white;
}

form#elist_form div.checkbox input:checked
{
  background: var(--sky);
}

form#elist_form div.checkbox span#disclaimer
{
  transition-duration: 350ms;
  transition-timing-function: ease;
  transition-property: margin-bottom, opacity;
  display: block;
  margin-top: .5em;
  margin-right: auto;
  margin-left: auto;
  color: var(--secondary);

}

form#elist_form div.checkbox input+label+span#disclaimer
{
  opacity: 0;
  margin-bottom: -7em;
}

form#elist_form div.checkbox input:checked+label+span#disclaimer
{
  opacity: 1;
  margin-bottom: 0;
}

form#elist_form div.submit-button
{
  grid-row: 3;
  grid-column: 1;
  place-self: center;
}

input#elist_email,
button#elist_submit
{
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0.6rem;
    border: 0;
    font: inherit;
    padding: 0.25em 0.35em;
    box-shadow: 0 .0625em 0 rgba(0,0,0,0.5);
}

input#elist_email
{
  min-width: 26ch;
  background: rgba(255,255,255,0.95);
}

button#elist_submit
{
  padding: 0.25em 1em;
  border-radius: .2em;
  text-shadow: 0 -0.0625em 0 rgba(0,0,0,0.5);
  background-color: var(--red);
  color: #fff;
  cursor: pointer;
  transition: 250ms border-color ease;
}

@media (min-width: 670px)
{
  
  form#elist_form p#status
  {
    grid-row: 1;
    grid-column: 1 / span 2;
  }
  
  form#elist_form div.email
  {
    grid-row: 2;
    grid-column: 1 / span 1;
    justify-self: end;

  }
  
  form#elist_form div.checkbox
  {
    grid-row: 3;
    grid-column: 1 / span 2;
  }

  form#elist_form div.checkbox #disclaimer
  {
    grid-row: 2;
    grid-column: 1 / span 2;
    max-width: 60rem;
  }


  form#elist_form div.submit-button
  {
    grid-row: 2;
    grid-column: 2 / span 1;
    justify-self: start;
  }
}

/* Merch */

#merch
{
  padding: 1.5em auto 6rem auto;  
  padding: 4rem 4rem 4rem 4rem;
  
  background: var(--sand1);
  
  font-size: 1.3em;
  text-align: center;
}

a.button
{
  display: block;
  width: fit-content;
  padding: 0.15em 1em .2em 1em;
  margin: .2em auto 0 auto;
  border-radius: .2em;
  
  background-color: var(--red);
  color: white;
  
  text-decoration: none;
  text-shadow: 0 -0.0625em 0 rgba(0,0,0,0.5);
}
a.button.sky
{
  background-color: var(--sky);
}

  a.button:hover
  {
    background: var(--sky);
    transition-property: background, color;
    transition-timing-function: linear;
    transition-duration: 250ms;
  }
  a.button.sky:hover
  {
    background-color: var(--lightsky);
  }

#shop
{
  margin-top: 2em;
}

  
#lic
{
  text-align: center;
}
#lic img
{
  width: 100%;
  height: auto;
  border-radius: .25em;
  margin-top: .5em;
}


#screenshots ul
{
  margin: 1em auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: auto;
}

#screenshots ul li
{
  margin: 0;
  position: relative;
  width: 80rem;
  height: calc(80rem * .5625);
  transition: 250ms transform ease;
}

#screenshot-gif-01,
#screenshot-gif-02
{
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0.5em;
}

#screenshot-gif-01
{
  background-image: url("/img/arco-gif-1.png");
}

#screenshot-gif-02
{
  background-image: url("/img/arco-gif-2.png");
}

@media (min-width: 670px)
{  
  #screenshots ul
  {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  #screenshots ul li
  {
    width: 39rem;
    height: calc(39rem * .5625);
  }
}

#screenshots li a
{
  cursor: pointer;
}

#screenshots img
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.5em;
  transition: 250ms border-color ease;
  transition-property: box-shadow, border-color;
  -webkit-object-fit: cover;
  object-fit: cover;
  border: 0;
}

#footer
{
  text-align: center;
}

#footer p
{
  max-width: 60rem;
}

#footer nav a
{
  text-shadow: none;
}

#footer nav a:hover
{
  color: var(--secondary);
}

#logo-panic
{
  margin: 2em 0;
  image-rendering: pixelated;
  display: flex;
  justify-content: center;
  align-content: center;
  text-shadow: none;
}

#logo-panic a
{
  color: transparent;
  display: block;
  height: calc(32 * var(--pixel));
  width: calc(32 * var(--pixel));
  margin: 0;
  background-size: calc(32 * var(--pixel)) calc(32 * var(--pixel));
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("../img/panic-logo.png");
}


#viewer
{
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: 250ms opacity ease;
  z-index: 100;
}

#viewer #image
{
  display: block;
  width: 100vw;
  height: 56.25vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 100vw;
  max-height: 56.25vw;
  transform: scale(0);
  transition: 500ms transform ease;
  cursor: pointer;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

body.viewer
{
  overflow: hidden;
  pointer-events: none;
}

body.viewer #viewer
{
  opacity: 1;
  pointer-events: all;
}

body.viewer #viewer #image
{
  transform: scale(1);
}

body[data-viewer="screenshot-01"] #viewer #image { background-image: url("../img/arco-screenshot-1.png"); }
body[data-viewer="screenshot-02"] #viewer #image { background-image: url("../img/arco-screenshot-2.png"); }
body[data-viewer="screenshot-03"] #viewer #image { background-image: url("../img/arco-screenshot-3.png"); }
body[data-viewer="screenshot-04"] #viewer #image { background-image: url("../img/arco-screenshot-4.png"); }
body[data-viewer="screenshot-05"] #viewer #image { background-image: url("../img/arco-screenshot-5.png"); }
body[data-viewer="screenshot-06"] #viewer #image { background-image: url("../img/arco-screenshot-6.png"); }
body[data-viewer="screenshot-07"] #viewer #image { background-image: url("../img/arco-screenshot-7.png"); }
body[data-viewer="screenshot-08"] #viewer #image { background-image: url("../img/arco-screenshot-8.png"); }
body[data-viewer="screenshot-09"] #viewer #image { background-image: url("../img/arco-screenshot-9.png"); }
body[data-viewer="screenshot-10"] #viewer #image { background-image: url("../img/arco-screenshot-10.png"); }
body[data-viewer="screenshot-11"] #viewer #image { background-image: url("../img/arco-screenshot-11.png"); }
body[data-viewer="screenshot-12"] #viewer #image { background-image: url("../img/arco-screenshot-12.png"); }
body[data-viewer="gif-01"] #viewer #image { background-image: url("https://arco-assets.panicfiles.com/arco-gameplay-01.gif"); }
body[data-viewer="gif-02"] #viewer #image { background-image: url("https://arco-assets.panicfiles.com/arco-gameplay-02.gif"); }

.screenshot label,
#viewer label
{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: pointer;
}

.screenshot label+a
{
  display: contents;
  pointer-events: none;
}

.hidden
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  margin: 0;
}