:root {
  /*
  --column: 96px;
  --gutter: 30px;
   */
  --column: calc(100vw / 20.0 - 2px);
  --gutter: calc(100vw / 64.0 - 1px);
}

/*
puts 1920 / 96.0
20.0
 */


html {
  scroll-behavior: smooth;
  background-color: black;
}
body {
  /* text-transform: uppercase; */
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
  line-height: 1.5;
  background-color: #1E1E28;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  color: #C8A0A0;

  /* overflow:hidden; */
  /* width: 1920px; */
  /* font-size: calc(1vw); */
}
p {
  margin-block-start: 0.1em;
}
a {
  text-transform: uppercase;
  font-weight: 600; /* semi-bold */
  color: #C8A0A0;
}

/*
 * Column Width: 96 px
 * Gutter width: 30 px */

h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: 1.0px;
  text-transform: none;
  /*
  padding-top: 14px;
  margin-top: 2em;
  */
}
h3 {
  text-transform: uppercase;
  font-weight: 600; /* semi-bold */
  font-size: 14px;
  margin-top: 2.0em;
  margin-bottom: 0.0em;
}

/* Layout: Sections */
div#main {
  /*padding-top: 230px;*/
  background-image: url("crater.jpg");
  background-repeat: no-repeat;
  /*
  background-size: auto 100%;
   */
  /*height: 1080px;*/
  width: 100%;
  height: 100vh;
  /*
  background-size: cover;
   */
}
div#playtest {
  padding-top: 100px;
  padding-bottom: 200px;
  /* height: 410px; */
}
div#art {
  background-image: url("canopy.jpg");
  background-repeat: no-repeat;
  height: 1080px;
}
div#info {
  height: 500px;
}
div#logo {
  float: left;
  width: calc(13.25 * 14px);
  /*
  height: calc(8.6 * 17px);
   */
  /*
  height: 400px;
   */

  /*width: 225px;
  height: 170px;
   */
  margin-left: calc(var(--gutter));
  margin-top: calc(var(--gutter));
  /*
  margin-left: 33px;
  margin-top:  12px;
  padding: 0 0 0 0;
   */
}
div.menu {
  position: fixed; /* Sticky is tricky, fixed is easy */
  width: calc(5 * 17px);
  /*top: 37px;*/
  margin-top: calc(var(--gutter));
  right: 20px;
  float: right;
}
div#contact {
  padding-top: 230px;
  height: 200px;
  padding-bottom : 70px;
}

img.logo
{
  width:  100%;
  height: 100%;
  object-fit: contain;
  text-transform: uppercase;
}

/* Layout: Main */
div#main-text-basic {
  /*padding-top: 230px;*/
  padding-top: 16vh;
  padding-left: calc(4 * var(--gutter) + 3*var(--column));
  width      : calc(4 * var(--gutter) + 4*var(--column));
}
div#jobs-text-basic {
  /*padding-top: 230px;*/
  padding-top: 16vh;
}
div#job-post {
  padding-bottom: 42px;
}
div.main-text-block {
    padding-top: 36px;
}

div#main-text-news {
  padding-top: 100px;
  padding-left: calc(5*var(--gutter) + 4*var(--column));
  width      : calc(4*var(--gutter) + 2*var(--column));
  padding-bottom: 100px;
}
div#main-text-toptier {
  padding-top: 130px;
  padding-left: calc(10*var(--gutter) + 9*var(--column));
  width      : calc(4*var(--gutter) + 2*var(--column));
}
div#main-text-studio {
  padding-left: calc(5*var(--gutter) + 4*var(--column));
  width      : calc(4*var(--gutter) + 5*var(--column));
}

div#main-text-mail {
  padding-left: calc(7*var(--gutter) + 6*var(--column));
  float: left;
  width:  calc(4*var(--gutter) + 4*var(--column));
}
div#main-text-social {
  float: left;
  width: calc(5*var(--gutter) + 5*var(--column));
}
div#main-text-twitter {
  float: left;
  width: calc(2*var(--gutter) + 2*var(--column));
}
div#main-text-youtube {
  float: left;
  width: calc(3*var(--gutter) + 3*var(--column));
}


p.link::before {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  position: relative;
  top: -0.2em;
  content: "\21B3";
  /* content: "\2192"; */
}
a:hover {
}
div#debuginfo {
  float: right;
  /* top: calc(100vh - 2em); */
  top: calc(var(--vh, 1vh) * 100 - 2em);
  left: calc(100vw - 35em);
  width: 35em;
  height: 1.4em;
  position: fixed; /* Sticky is tricky, fixed is easy */
  background-color: black;
  display: block;
}
div#debuginfo::after {
  content: "[hd screen] 0.2";
}


/* JOBS page */
body#jobs
{
  background-image: none;
  background-color: #283228;
  color: #EAEAEA;
  min-height: 100vh;
}
div#jobs {
  width: 100%;
  display: flex;
  flex-direction: row;
  /*
  margin-top: 100px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  */
}
div#job-text-mail {
    padding-top: 36px;
  /*margin-top: 180px;*/
  padding-left: calc(4 * var(--gutter) + 3*var(--column));
  width      : calc(3 * var(--gutter) + 4*var(--column));
}
div#job-text-desc {
    padding-top: 36px;
  /*margin-top: 180px;*/
  padding-left: calc(2 * var(--gutter) + 1*var(--column));
  width      : calc(4 * var(--gutter) + 5*var(--column));
}

ul {
  list-style-position: outside;
  padding-left: 0px;
  margin-block-start: 0.1em;
}
li { 
  list-style: none; 
} 
li::before{ 
  content: "\2192"; 
  padding-right: 0.8em;
} 

div#logos {
}
div#amdlogo{
  width:76px;
  height:100px;
  display:block;
  margin-left:auto;
  margin-right:47px;
}






/* ------------------------------------------------------------------------ */
/*                                  PHONE (PORTRAIT)                        */
/* ------------------------------------------------------------------------ */
@media only screen and (orientation:portrait) and (max-width:1000px) {
div#debuginfo::after { content: "[phone_portrait] 0.2"; }
body {
  /*width: calc(100vw - 20px);*/
  width: 100%;
  font-size: 25px;
  line-height: 1.5;
  text-size-adjust: none; /* disable text auto-sizing (typically on phones) */
}
h2 {
  font-size: 39px;
  line-height: 39px;
}
h3 {
  font-size: 27px;
}
div#main {
  padding-top: 0px;
  background-position: 40% 0%;
  /* background-size: auto calc(var(--vh, 1vh) * 100); */
  width: 100%;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
div#news {
  /*padding-top: 300px;*/
  padding-bottom: 300px;
  /*
  height: 500px;
  */
}
div#art {
  overflow: hidden;
  background-position: 100% 0%;
  /* background-size: auto 60%; */
  background-size: 100% 100%;
  width: 100%;
  /*width: 100vw;*/
  height: 40vh;
}
/* Layout: Main */
div.main-text-block {
    padding-top: 12px;
}
div#main-text-basic {
  padding-top: 370px;
  padding-left: 10vw;
  width      : 80vw;
}
div#main-text-news {
  padding-left: 10vw;
  width      : 80vw;
}
div#main-text-toptier {
  padding-top: 130px;
  padding-left: 10vw;
  width      : 80vw;
}
div#main-text-studio {
  padding-left: 10vw;
  width      : 80vw;
}
div#contact {
  padding-top: 400px;
  padding-left : 10vw;
  padding-right: 10vw;
  padding-bottom : 180px;
  width : 80vw;
  height: 500px;
}
div#main-text-mail {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  float: left;
  width: 100%;
}

div#main-text-social {
  width: 100%;
  float: left;
}
div#main-text-twitter {
  float: left;
  width: 45%;
}
div#main-text-youtube {
  float: right;
  width: 50%;
}
div#logo {
    float: left;
    /*
    width: 332px;
    height: 200px;
     */
  width: calc(13.25 * 25px);
  /*
  height: calc(8.6 * 25px);
   */
  margin-left: 10vw;
  margin-top:  10vw;
}
div.menu {
  position: absolute; /* fixed looks bad on phones */
  float: right;
  top:  10vw;
  width: 170px;
  margin-top: 0;
  padding-top: 0;
  /*
  right: 10vw;
  width: 4.0em;
   */
}
div#jobs {
    margin-top: 0;
  padding-top: 0px;
  display: block;
}
div#job-text-mail {
  padding-left : 10vw;
  padding-right: 10vw;
  width : 80vw;
}
div#job-text-desc {
  padding-left : 10vw;
  padding-right: 10vw;
  width : 80vw;
}
div#job-post {
  padding-bottom: 52px;
}
}

/* ------------------------------------------------------------------------ */
/*                               TINY SCREEN                                */
/* ------------------------------------------------------------------------ */
@media only screen and (orientation:landscape) and (max-width:1500px) {
  div#debuginfo::after { content: "[tiny_landscape] 0.2"; }
  body {
    font-size: 14px;
  }
  div#logo {
    width: calc(13.4 * 14px);
    /*
    height: calc(10 * 14px);
     */
}
h2 {
  font-size: 19px;
  line-height: 19px;
}
}

/* ------------------------------------------------------------------------ */
/*                                 4K SCREEN                                */
/* ------------------------------------------------------------------------ */
@media only screen and (orientation:landscape) and (min-width:1921px) {
  div#debuginfo::after { content: "[4K] 0.2"; }
  body {
    width: 100%;

    /*width: calc(100vw - 20px);*/
    font-size: 20px;
  }
  h2 {
    font-size: 38px;
    line-height: 38px;
  }
  h3 {
    font-size: 20px;
  }
  div#main {
    background-image: url("crater4k.jpg");
    /*
    background-size: auto 100vh;
     */
    width: 100%;
    height: 100vh;
    /*
    background-size: cover;
    background-position: 100% 100%;
     */
  }
  div#news {
    padding-top: 300px;
    padding-bottom: 300px;
    /*height: 500px;*/
  }
  div#art {
    background-image: url("canopy4k.jpg");
    width: 100%;
    /*width: 100vw;*/
    height: 100vh;
    background-size: cover;
  }
  div#logo {
    width: calc(13.25 * 20px);
  }
  div#job-text-mail {
    /*margin-top: 340px;*/
  }
  div#job-text-desc {
    /*margin-top: 340px;*/
  }
}

/* ------------------------------------------------------------------------ */
/*                                 PHONE (LANDSCAPE)                        */
/* ------------------------------------------------------------------------ */
/* FIXME: BROKEN */
@media only screen and (max-width:980px) and (max-height:600px) {

  div#debuginfo::after { content: "[phone_landscape]"; }
  body {
    font-size: 12px;
  }
  div#logo {
    width: calc(13.4 * 12px);
    height: calc(10 * 12px);
  }
}





/* ------------------------------------------------------------------------ */
/*                        KEY ART ASPECT RATIO ADJUSTMENT                   */
/* ------------------------------------------------------------------------ */
/* Ensuring key art on different aspect ratios */
/* AR >= 16:9 */
@media only screen and (min-aspect-ratio:16/9), (aspect-ratio:16/9) {
  div#main {
    background-size: 100vw auto;
    background-position: right bottom;
  }
}
/* AR < 16:9 */
@media only screen and (max-aspect-ratio:16/9) {
  div#main {
    background-size: auto calc(var(--vh, 1vh) * 100); /* auto 100 vh , adjusted for phone */
    background-position: right bottom;
  }
}
/* AR < 3:4 */
@media only screen and (orientation:portrait) {
  div#main {
    background-size: auto calc(var(--vh, 1vh) * 100); /* auto 100 vh , adjusted for phone */
    background-position: 33% bottom;
    height: calc(var(--vh, 1vh) * 100);
  }
}