/*
CLASSIC
*/

body {
  font-family: 'Roboto', sans-serif;
  background:#000;
}

section {
  max-width:1000px;
  padding:0 20px;
  margin:0 auto 90px auto;
}

header {
  padding:50px 10px 0 10px;
  max-width:1000px;
  margin:0 auto;
}

section#introtext {
  font-size:20px;
  text-align:left;
  color:#efefef;
  margin-bottom:60px;
}

section#intro {
  font-size:34px;
  text-align:justify;
}

section#introtext em {
  font-style: italic;
  text-shadow: 2px 2px #000;
  font-weight:bold;
  font-family: 'Germania One', cursive;
  font-size:1.2em;
}

img {
  width:100%;
  height:auto;
}

h1#gamename {
  display:none;
}

header img {
  animation:2s float infinite alternate ease-in-out;
}

#treeworld header figure {
  margin-bottom:130px;
}


/* PULL QUOTES */

figure.quote {
  width:100%;
  max-width:300px;
  text-align: center;
  margin:0 auto;
}

blockquote {
  font-style: italic;
  font-weight: bold;
  font-size:30px;
  line-height:36px;
  color:#efefef;
  text-shadow: 2px 2px #000;
}

blockquote::before {
    content: "“";
    display:block;
    font-size:54px;
    line-height:0.5em;
    font-family:times, serif;
    font-weight: bold;

}

figcaption {
  margin-top:16px;
  font-size:22px;
  color:#efefef;
  text-shadow: 1px 1px #000;
}

/* HEADLINES */

h2.floathead {
  color:#efefef;
  font-size:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  text-transform: uppercase;
  font-weight:900;
  font-style: italic;
  margin-bottom:30px;
  animation:2s headline infinite alternate ease-in-out;
  text-shadow: 2px 2px #000;
}

h2 {
  color:#efefef;
  font-size:32px;
  line-height:32px;
  width:100%;
  text-align:center;
  text-transform: uppercase;
  font-weight:900;
  font-style: italic;
  margin-bottom:20px;
  text-shadow: 4px 4px #000;
}

#biggrey h2 {
  margin-bottom:60px;
}


/* TRAILER EMBED */

section#trailer {
  padding-top:40px;
  margin-bottom:90px;
}

section#makeawish {
  padding-top:16px;
  margin-bottom:12px;
}

figure.softwareproduct {
  width:100%;
  box-shadow: 8px 8px #000;
  border:4px solid #000;
  background:#ccc;
}

.window {
  width:100%;
  border:4px solid #ccc;
  border-top-color: #eee;
  border-bottom-color: #aaa;
  box-sizing: border-box;
}

.windowtitle {
  font-size:16px;
  width:100%;
  background:#0000ff;
  color:#fff;
  text-transform: uppercase;
  text-align:center;
  padding:8px;
  box-sizing: border-box;
  font-weight: bold;
  font-family:courier, monospace;
  font-style:italic;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube {
	position: relative;
	padding-bottom: 53.55%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.ytvideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* "DESIGN" */

div#checkers {
  background:url(../images/checkers.svg);
  background-size:240px;
  animation:100s checkers infinite linear;
}

div#treeworld {
  background:url(../images/keyart-slimed.jpg) center center;
  background-size:cover;
  position:relative;
}

div#bigblue {
  /* background:url(../images/blue.svg); */
  background:#0000ff;
  background: linear-gradient(#000, #0000ff);
  padding-bottom:5px;
}

div#biggrey {
  /* background:url(../images/blue.svg); */
  background:#151515;
  padding-top:80px;
  color:#aeaeae;
  font-size:24px;
}

div#biggrey section {
  text-align:center;
  margin:0 auto 80px auto;
  max-width:800px;
}

div#biggrey p a {
  color:#efefef;
  border-bottom:2px solid #efefef;
}

h3 {
  color:#efefef;
  font-size:28px;
  line-height:28px;
  width:100%;
  text-align:center;
  text-transform: uppercase;
  font-weight:900;
  font-style: italic;
  margin-bottom:6px;
  text-shadow: 4px 4px #000;
}

nav#top {
  color: #000;
  background:url(../images/warn.svg) repeat-x yellow;
  background-size: auto 100%;
  font-size:16px;
  line-height:16px;
  text-transform: uppercase;
  padding: 10px 12px 2px 12px;
  width: 100%;
  box-sizing: border-box;
  text-align:center;
  border-bottom:4px solid #000;
  font-weight: bold;
  animation:100s warn infinite linear;
}

nav#top li {
  display:inline-block;
  margin-right:12px;
  margin-bottom:4px;
}

nav#top li:last-child {
  margin-right:0px;
}

nav#top a:after {
	content: '';
	display: block;
	margin: auto;
	height: 3px;
	width: 0px;
	background: transparent;
	transition: width .2s ease, background-color .2s ease;
}
nav#top a:hover:after {
	width: 100%;
	background: #000;
}

nav#top a {
  color:#000;
  display:inline-block;
}

div#zigzag, div #zigzag-grey {
  width:100%;
  background-size: auto 100%;
  background-position: bottom;
  animation:50s zigzag infinite linear;
  height:32px;
  bottom:0;
  margin-top:40px;
  transform: translateY(1px);
  -webkit-transform: translateY(1px);
}

div#zigzag {
  background:url(../images/zigzag.svg) repeat-x;
}

div #zigzag-grey {
  background:url(../images/zigzag-grey.svg) repeat-x;
}

div#bubbles {
  width:100%;
  background:url(../images/bubbles.svg) repeat-x;
  background-size: auto 100%;
  background-position: top;
  animation:50s zigzag infinite linear;
  height:64px;
  transform: translateY(-1px);
  -webkit-transform: translateY(-1px);
}

div#bubbles-black {
  width:100%;
  background:url(../images/bubbles-black.svg) repeat-x;
  background-size: auto 100%;
  background-position: top;
  animation:60s zigzag infinite linear;
  height:80px;
  margin-bottom:40px;
}

div#coolvrplatform {
  max-width:300px;
  margin:0 auto 24px auto;
}

div#platformlinks {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

h1#platformhead {
  font-size:1em;
  color:white;
  display: block;
  text-align: center;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
}

div#platformlinks a {
  display:block;
  width:23%;
  height:120px;
  box-sizing: border-box;
  transition: 0.1s;
  opacity: 0.8;
  font-size:0.1em;
}

div#platformlinks a:hover {
  opacity: 1.0;
  transition: 0.1s;
  transform: scale(1.1);
}

a.plsteam {
  background:url(../images/steam.svg) center center no-repeat;
  background-size:80% 80%;
}

a.ploculus {
  background:url(../images/oculus.svg) center center no-repeat;
  background-size:70% 70%;
}

a.plviveport {
  background:url(../images/vive.svg) center center no-repeat;
  background-size:70% 70%;
}

a.plpsvr {
  background:url(../images/psvr.svg) center center no-repeat;
  background-size:75% 75%;
}

/* signup */

form {
  margin:20px 0;
}
input#email {
  border:4px solid #ccc;
  padding:10px 12px 7px 12px;
  margin-bottom:10px;
  background:#000;
  max-width:240px;
}

/* SCREENIE SECTION */

section#screenshots {
  padding-top:20px;
}

figure.screenshotimg {
  width:100%;
  display:block;
  margin-bottom:20px;
}

.screenshotimg img {
  border:4px solid #000;
  box-shadow: 8px 8px #000;
}

.screenshotleft {
  float:left;
  margin-right:40px;
}

.screenshotright {
  float:right;
  margin-left:40px;
}

.screenshot p {
  display:block;
  color:#efefef;
  font-size:30px;
}

.scrcap {
  padding-top:40px;
  font-style: italic;
  font-weight: bold;
  text-shadow:2px 2px #000;
}


div.screenshot::after {
  content: "";
  display: block;
  clear: both;
  margin-bottom:30px;
}


/* COOL JOKE AT THE END */

section#theend {
  margin-top:3000px;
}

/* FOOTER - THE MOST UNDERAPPRECIATED PART OF THE MODERN WEB SITE */

footer {
  color:#666;
  max-width:600px;
  margin:0 auto;
  padding:60px 20px;
  font-style: italic;
}

footer a:hover {
  color:#999;
}

#disclaimer {
  text-align: center;
}

#disclaimer img {
  max-width:258px;
  margin-bottom:12px;
}

#disclaimer p {
  padding-top:34px;
}

#disclaimer::after {
  content:"";
  clear:both;
}

.companylogos {
  margin:0 auto;
  text-align: center;
}

.column-left img, .column-right img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.9;
  transition: 0.1s;
  width:100%;
  height:auto;
}

.column-left img:hover, .column-right img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  transform: rotate(-4deg);
  opacity: 1.0;
  transition: 0.1s;
}

.companylogos h3 {
  margin-bottom:20px;
  font-size:18px;
}

.companylogos::after {
  content: "";
  display: block;
  clear: both;
  margin-bottom:30px;
}

.companylogos .column-left {
  float:left;
  width:48%;
}

.companylogos .column-right {
  float:right;
  max-width:48%;
}

#pizza {
  max-width:200px;
  margin:0 auto 20px auto;
  animation:1.5s float infinite alternate ease-in-out;
}

footer span {
  margin-right:12px;
}

footer span:last-child {
  margin-right:0;
}

/* PREORDER */

div#preorder {
  width:100%;
  max-width:500px;
  margin:0 auto;
  position:relative;
}

div#preorder img {
  animation:1.5s float infinite alternate ease-in-out;
  margin-left:0;
}


#submitbutton {
  background:url(../images/gloss.svg) #fffb00;
  background-size:1000px;
  background-position: -400px 0;
  text-transform: uppercase;
  font-weight:bold;
  padding:12px 24px;
  font-size:20px;
  line-height:32px;
  transition:0.8s;
  font-style: italic;
  box-shadow: 8px 8px #000;
  width:240px;
  color:#000;
  border-radius:0 !important; /* thanks maria */
}

#submitbutton:hover {
  transform: translate(0,-8px);
  transition:0.4s;
  box-shadow: 10px 20px #000;
  background-position: 400px 0;
}

a.goldbutton {
  background:url(../images/gloss.svg) #fffb00;
  background-size:1000px;
  background-position: -400px 0;
  display:block;
  text-transform: uppercase;
  font-weight:bold;
  padding:12px 24px;
  font-size:20px;
  transition:0.8s;
  font-style: italic;
  box-shadow: 8px 8px #000;
  max-width:300px;
  color:#000;
  margin:20px auto;
}

.goldbutton {
  cursor:pointer;
}

a.goldbutton:hover {
  transform: translate(0,-8px);
  transition:0.4s;
  box-shadow: 10px 20px #000;
  background-position: 400px 0;
}





a#preorder-button {
  background:url(../images/gloss.svg) #fffb00;
  background-size:1000px;
  background-position: -400px 0;
  display:block;
  position:absolute;
  right:0;
  bottom:0;
  text-transform: uppercase;
  font-weight:bold;
  padding:12px 24px;
  font-size:20px;
  margin-right:0;
  transition:0.8s;
  font-style: italic;
  box-shadow: 8px 8px #000;
}

a#preorder-button:hover {
  transform: translate(0,-8px);
  transition:0.4s;
  box-shadow: 10px 20px #000;
  background-position: 400px 0;
}

#preorder-button span {
  font-size:0.8em;
}

p.privacy {
  font-size:0.6em;
  margin:12px 0 40px 0;
}

.grecaptcha-badge {
  margin:0 auto 20px auto;
  opacity:0.4;
}

/* IT'S GOTTA WORK ON ALL KINDS OF SCREENS */

@media screen and (min-width: 720px) {
  h1 {
    font-size:80px;
    line-height:80px;
  }

  h2 {
    font-size:80px;
    line-height:80px;
  }
  section {
    padding:0 40px;
  }
  section#introtext {
    font-size:34px;
  }
  div#preorder img {
    margin-left:-40px;
  }
  a#preorder-button {
    font-size:32px;
    margin-right:-20px;
  }

  section#introtext {
    text-align:justify;
  }
  a.goldbutton, #submitbutton {
    font-size:32px;
  }

  input#email {
    max-width:320px;
  }

  /* all that screenshots stuff */

  section#screenshots {
    padding-top:20px;
  }

  figure.screenshotimg {
    width:60%;
    display:block;
  }

  .screenshotimg img {
    border:4px solid #000;
    box-shadow: 8px 8px #000;
  }

  .screenshotleft {
    float:left;
    margin-right:40px;
  }

  .screenshotright {
    float:right;
    margin-left:40px;
  }

  .screenshot p {
    display:block;
    color:#efefef;
    font-size:30px;
  }

  .scrcap {
    padding-top:40px;
    font-style: italic;
    font-weight: bold;
    text-shadow:2px 2px #000;
  }

  div.screenshot::after {
    content: "";
    display: block;
    clear: both;
    margin-bottom:30px;
  }
}

/* ANIMATION */

@keyframes checkers{
  100%{
    background-position:1500px -3000px;
  }
}

@keyframes warn{
  100%{
    background-position:-3000px 0;
  }
}

@keyframes zigzag{
  100%{
    background-position:3000px bottom;
  }
}

@keyframes float{
  0% {
    transform: translate(0,7px);
  }
  100% {
    transform: translate(0,-7px);
  }
}

@keyframes headline{
  0% {
    transform:rotate(2deg);
  }
  50% {
    transform:rotate(4deg);
  }
  100% {
    transform:rotate(2deg);
  }
}

.easteregg {
  position:absolute;
  z-index:999;
  width:100px;
  height:100px;
  background-size:cover;
  -webkit-transition: all 0.1s ease-in-out;
}

.easteregg:hover {
  cursor:pointer;
  transform: translateY(-4px);
  transform: scale(1.1);
}

.egg-hwyf {
  top:50vh;
  left:70vw;
  background-image:url(https://crowscrowscrows.com/assets/images/egg-hwyf.png);
}

.egg-kbbc {
  top:220vh;
  left:20vw;
  background-image:url(https://crowscrowscrows.com/assets/images/egg-kbbc.png);
}

.webbybadgecontainer {
  position:absolute;
  top:0;
  width:100%;
  height:50vh;
  z-index:999;
}

.webbybadge {
  position:absolute;
  z-index:999;
}

.webby1 {
  background-image:url(../images/webby-win-animated.gif);
  background-size:cover;
  width:30vw;
  height:30vw;
}

.webby2 {
  background-image:url(../images/webby-win-1.png);
  background-size:cover;
  width:15vw;
  height:15vw;
}

.webbybadge:hover {
  transform: scale(1.04);
  cursor:pointer;
}