/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: 'PressStart2P';
    src: url('/fonts/ps2p/PressStart2P.woff') format('woff'), 
         url('/fonts/ps2p/PressStart2P.ttf') format('truetype'); 
}

@font-face {
    font-family: 'Yoster';
    src: url('/fonts/yoster/yoster.woff') format('woff'), 
         url('/fonts/yoster/yoster.ttf') format('truetype'); 
}

@font-face {
    font-family: 'Virale';
    src: url('/fonts/virale/virale.woff') format('woff'), 
         url('/fonts/virale/virale.ttf') format('truetype'); 
}

.scaledimg {
  min-width: 10%;
  max-width:  100%;
  min-height: 10%;
  max-height: 100%;
}

.center {
  padding: 3em 0;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  font-size: 12px;
}

.top {
  padding: 0 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  height: 15%;
}

.bottom {
  padding: 0 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  flex-grow: 1;
}

.mainpage {
  padding: 2px 0;
  border-radius: calc(5px + 1vw);
  border: 5px solid #213127;
  background-image: url("images/greendot.jpg");
  background-repeat: repeat;
  font-family: 'PressStart2P';
  font-size: 14px;
  height: 496px;
}

.subregion {
  margin-left: 2.5%;
  margin-right: 2.5%;
  flex-grow: 1;
  display: block;
  border-radius: calc(5px + 1vw);
  background-color: #87daa0;
}

.textregion {
  padding: 0px 20px;
  text-align:left;
}

.tablewrapper { 
  display:table;  
}

.tablecell { 
  display:table-cell;  
}

.planet {
  display:block;
  transform: scale(0.5,0.5) translate(-500px, -500px);
  position: absolute;
  /* Need absolue position, rescaler transformer too */
}

.planetlink { 
  font-family: 'Virale';
  font-size: 32px;
  color: yellow; /* need a gold yellow; p4 type vibe */
  position: absolute;
}

#footer {
  text-align: center;
  bottom: 0;
  font-size: 10px;
  font-family: 'Yoster';
  color: white;
  width: 100%;
  clear: both;
}

/*
#sidebar {
  padding: 0 0px;
  display: block;
  border-radius: calc(5px + 1vw);
  border: 5px solid #213127;
  background-color: #4fb771;
  /*background-image: url("/images/purpgls1.jpg");
  background-position: right top;
  background-repeat: repeat;
} 
*/

/* Would be cool to dynamically switch bg colour at 50% page scroll boundary; 
   means there's no colour diff when scrolling too far & hitting ends of the doc*/
html {
  background-attachment: fixed;
  background-color: #658d70;
  color: #213127;
  background-image: url("/images/pixel-drip-bg-dim.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  width: 100%;
  height: 100%;
}

html:not([data-scroll='0']) {
  background-color: #141d17;
}

/* This should get replaced with an entirely different css file below 850px,
   but since I'm still playing with the design, I think this is appropriate for now :) */
@media only screen and (max-width: 850px) {
    
    .planet {
      position:static;
      transform: scale(1,1);
    }
    
    .center {
      margin-left: auto;
      margin-right: auto;
      width: 92vw;
    }
}

/*
html:before {
  position: absolute;
  content: '';
  background-image: url("/images/pool-water-transparent.png");
  background-size: cover;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
*/

/* This is just to get the page looking nice whilst there's nowt on it; gonna need removing when i add more content! */
body {
  height:100vh;  
}