@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Customize the background color to match your design.
   */
  
  ::-moz-selection {
    background: rebeccapurple;
    text-shadow: none;
  }
  
  ::selection {
    background: rebeccapurple;
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }

/*

BRODINGO DOT COM THE MOST FUN WEBSITE EVARRRRRRR!!!!!

*/

/* READY? 3-2-1 FIGHT! */

/* MAIN STYLES */

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

html {
  /*min-height: 100vh;*/
  /*overflow: hidden;*/
  /*padding-bottom: 100vh;*/
}

body {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  /*padding-bottom: 100vh;*/
  background-image: linear-gradient(to bottom, #445566, #001122);
  color: #eaeaea;
  text-shadow: 2px 2px 0 rgba(0,0,0,.1);
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  transform-style: preserve-3d;
  perspective: 20em;
}

/*
body::before,
body::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  background-color: rgba(0,0,0,.015);
  box-shadow: 0 0 100px rgba(255,255,255,.1);
  border-radius: 8px;
  transform: matrix(1.035,0.834,-0.806,0.825,0.554,-3.449);
  will-change: transform;
}

body::after {
  left: auto;
  right: 100%;
  background-color: rgba(255,255,255,.05);
  box-shadow: 0 0 100px rgba(0,0,0,.05);
}
*/

body::before {
  /*content: '';*/
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(0deg, 
      transparent 24%,
      rgba(255, 255, 255, .1) 25%,
      rgba(255, 255, 255, .1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(255, 255, 255, .1) 75%,
      rgba(255, 255, 255, .1) 76%,
      transparent 77%, transparent),
    linear-gradient(90deg,
      transparent 24%,
      rgba(255, 255, 255, .1) 25%,
      rgba(255, 255, 255, .1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(255, 255, 255, .1) 75%,
      rgba(255, 255, 255, .1) 76%,
      transparent 77%,
      transparent);
  background-position: center;
  background-size:50px 50px;
  transform: rotateX(262deg) translateY(20%) translateZ(1em);
}

img {
  display: block;
  max-width:100%;
  height: auto;
}

section {
  position: relative;
  z-index: 2;
  padding: 60px 1em;
  max-width: 800px;
  /*min-height: 80vh;*/
  margin: 0 auto;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
  font-size: 60px;
  font-family: Oswald, sans-serif;
  text-shadow:
    1px 1px 0 rgb(123, 123, 118),
    2px 2px 0 #8e8e86,
    3px 3px 0 rgb(66, 66, 62),
    4px 4px 8px rgba(0,0,0,.5);
}

h2 {
  margin-top: 0;
  font-family: Oswald, sans-serif;
  font-weight: 200;
}

footer {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 1em;
  margin: 0 auto;
  background-color: #223;
  text-align: center;
  box-shadow: inset 0 4px 4px rgba(0,0,0,.2);
  border-radius: 8px;
}

footer a {
  display: block;
  padding: .25em;
  font-size: 24px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

#whale {
  background: url(../img/whale.gif) no-repeat center center;
  background-size: contain;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}

a {
  color: #85bff3;
  text-decoration:none;
}

a:hover {
  color: #fff;
  text-decoration:underline;
}

a.btn { 
  display: block;
  padding: .25em .5em;
  margin: 2px auto;
  text-decoration: none;
  background-color: RebeccaPurple;
  color: #eee;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 6px 8px -2px rgba(255,255,255,.2), inset 0 -4px 8px -2px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
}

a.btn:hover {
  background-color: purple;
  color: #fff;
  text-decoration: none;
}

/* hr {
  border: 0;
  border-top: 12px solid grey;
  box-shadow: 5px 5px 0 rgba(0,0,0,.2);
} */

/* Tera MUD */

a.teralink {
  padding: .5em 1em;
  border-color: darkgreen;
  background-color: green;
  font-size: 24px;
}

a.teralink:hover {
  background-color: darkgreen;
}

/* ERRORS */

.number { 
  font-size: 150px;
  margin-top: 80px;
}

.summary {
  font-size: 36px;
  margin-bottom: 10px;
}

/* ORREY */

#orrey {
  /*position: fixed;*/
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  /*width: 100%;*/
  /*height: 100%;*/
  opacity: .06;
  /*top: 90%;*/
  /*right: 50%;*/
  /*transform: translateX(-50%) translateY(-50%);*/
}

#orrey.outline div {
  outline: 1px solid red;
  
}

.planet:before {
  z-index: 2;
  background-color: #fff;
}

#nirn {
  width: 200px;
  height: 200px;
}

#orbit1 {
  width: 800px;
  height: 800px;
  z-index: 6;
}

#julianos {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 160px;
  height: 160px;
  transform: translateX(-50%) translateY(-50%);
}

#akatosh {
  position: absolute;
  top: 50%;
  left: 0;
  width: 180px;
  height: 180px;
  transform: translateX(-50%) translateY(-50%);
}

#stendarr-orbit {
  position: absolute;
  width: 160%;
  height: 160%;
}

#stendarr {
  position: absolute;
  top: 50%;
  left: 0;
  width: 60px;
  height: 60px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit2 {
  width: 600px;
  height: 600px;
  animation-duration: 60s;
  z-index: 5;
}

#zenithar {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translateX(-50%) translateY(-50%);
}

#mara-orbit {
  position: absolute;
  width: 210%;
  height: 210%;
}

#mara {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  transform: translateX(-50%) translateY(-50%);
}

#dibella-orbit {
  position: absolute;
  width: 180%;
  height: 180%;
}

#dibella {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit3 {
  width: 400px;
  height: 400px;
  animation-duration: 30s;
  animation-direction: reverse;
  z-index: 4;
}

#masser {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit4 {
  width: 360px;
  height: 360px;
  animation-duration: 28s;
  animation-direction: reverse;
  z-index: 3;
}

#secunda {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit5 {
  width: 480px;
  height: 480px;
  animation-duration: 36s;
  animation-direction: reverse;
  z-index: 3;
}

#kynareth {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translateX(-50%) translateY(-50%);
}

#orbit6 {
  width: 500px;
  height: 500px;
  animation-duration: 40s;
  z-index: 3;
}

#arkay {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 120px;
  height: 120px;
  transform: translateX(-50%) translateY(-50%);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.rotate:before {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  animation: rotate 20s infinite linear;
}

.orbit {
  animation: orbit 80s infinite linear;
  transform-origin: 0 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  border-radius: 50%;
}

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes orbit {
  from {
    transform: rotateZ(0deg) translateX(-50%) translateY(-50%);
  }
  to {
    transform: rotateZ(360deg) translateX(-50%) translateY(-50%);
  }
}

@media only screen and (min-width: 560px) {

  body {
    font-size: 24px;
  }

  section {
    text-align: left;
  }

  a.btn {
    display: inline-block;
    margin: 0 5px;
  }
  
  .zoom {
    transition: all .2s ease-out;
    will-change: transform;
  }
  
  .zoom:hover {
    transform: scale(1.1);
  }
  
}

@media only screen and (min-width: 800px) {

  section {

  }

  footer {
    padding: 3em 2em;
  }

  footer a {
    display: inline-block;
    padding: 1em;
    font-size: 24px;
  }

  #whale {
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: 0;
    width: 640px;
    height: 480px;
    padding: 0;
    margin-top: -240px;
  }
  

  .pan {
    animation: pan 20s infinite ease-in-out;
  }
  
  #orrey {
    /*transform: scale(2);*/
  }

}

@keyframes pan {
  0%   { left: 100%; }
  100% { left: -100%; }
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

 .hidden,
 [hidden] {
   display: none !important;
 }
 
 /*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
 
 .visually-hidden {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
   /* 1 */
 }
 
 /*
  * Extends the .visually-hidden class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */
 
 .visually-hidden.focusable:active,
 .visually-hidden.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;
   overflow: visible;
   position: static;
   white-space: inherit;
   width: auto;
 }
 
 /*
  * Hide visually and from screen readers, but maintain layout
  */
 
 .invisible {
   visibility: hidden;
 }
 
 /*
  * Clearfix: contain floats
  *
  * The use of `table` rather than `block` is only necessary if using
  * `::before` to contain the top-margins of child elements.
  */
 
 .clearfix::before,
 .clearfix::after {
   content: "";
   display: table;
 }
 
 .clearfix::after {
   clear: both;
 }
 
 /* ==========================================================================
    EXAMPLE Media Queries for Responsive Design.
    These examples override the primary ('mobile first') styles.
    Modify as content requires.
    ========================================================================== */
 
 @media only screen and (min-width: 35em) {
   /* Style adjustments for viewports that meet the condition */
 }
 
 @media print,
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 1.25dppx),
   (min-resolution: 120dpi) {
   /* Style adjustments for high resolution devices */
 }
 
 /* ==========================================================================
    Print styles.
    Inlined to avoid the additional HTTP request:
    https://www.phpied.com/delay-loading-your-print-css/
    ========================================================================== */
 
 @media print {
   *,
   *::before,
   *::after {
     background: #fff !important;
     color: #000 !important;
     /* Black prints faster */
     box-shadow: none !important;
     text-shadow: none !important;
   }
 
   a,
   a:visited {
     text-decoration: underline;
   }
 
   a[href]::after {
     content: " (" attr(href) ")";
   }
 
   abbr[title]::after {
     content: " (" attr(title) ")";
   }
 
   /*
    * Don't show links that are fragment identifiers,
    * or use the `javascript:` pseudo protocol
    */
   a[href^="#"]::after,
   a[href^="javascript:"]::after {
     content: "";
   }
 
   pre {
     white-space: pre-wrap !important;
   }
 
   pre,
   blockquote {
     border: 1px solid #999;
     page-break-inside: avoid;
   }
 
   tr,
   img {
     page-break-inside: avoid;
   }
 
   p,
   h2,
   h3 {
     orphans: 3;
     widows: 3;
   }
 
   h2,
   h3 {
     page-break-after: avoid;
   }
 }