/* 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 used for fancy accents -- REPLACE with your own!*/
@font-face {
  font-family: Azkasia; /*Internal name of the font you'll use for this stylesheet.*/
  src: url("Azkasia%20Demo.ttf"); /*Put the url of the font on your site here. DO NOT HOTLINK.*/
}

body {
  margin: 0;
  padding: 0;
  color: #fff;
  background: #00071c;
  font-size: 0.95em;
  font-family: "Liberation Mono", "Source Code Pro", "Courier New", monospace;
  }
  
a {
  color: #c1cdf1; 
  }
  
/*Increased spacing to compensate for current font - may want to change if you use something else.*/
p {
  line-height: 150%;
  }
  
/*Set font for headings.*/
h1, h2, h3 {
  text-align:center;
  font-family: Azkasia, Cursive, serif;
  letter-spacing: 0.175em;
  word-spacing: 0.2em;
  }

/*Make the first letter slightly bigger and a different color :) */
h1::first-letter, h2::first-letter, h3::first-letter {
  color: #aae6ff;
  font-size: 1.25em;
  font-weight:bold;
  }
  
/*Make lowercase headers bigger, since this font's a little harder to read.*/
h1 {
  font-size: 2.325em;
  }  

/*Make h2 and h3 in ALLCAPS.*/
h2, h3 {
  text-transform: uppercase;
  }
  
/*h3 is left-aligned and indented.*/
h3 {
  text-align: left;
  margin-left: 1em;
  font-size: 1.25em;
  }
  
/*Change color when bold or italic.*/
b {
  color: #aae6ff;
  }
  
i {
  color: #cdf0ff;
  }
  
hr {
  border: 0;
  background: linear-gradient(rgb(0,0,0,0), rgb(255,255,255,1), rgb(0,0,0,0));
  height:1px;
  margin: 2em 1em;
  }
  
blockquote {
  font-style:italic;
  border-left: 1px solid #aae6ff;
  background: rgb(170,230,255,0.15);
  padding: 5px 20px;
  }
  

/***

NOTE: This stylesheet uses elements instead of div classes in a few places (nav1, nav2). 
If you want to use them as classes, put "." in front of all the custom element names in the stylesheet here.
For example: nav1 .navlink {} would be .nav1 .navlink {} instead.

***/

/*Content all goes in here.*/
.wrapper {
  display: block;
  margin: 0 auto;
  width: 800px;
  position:relative;
  }
  
/*This is where the pretty header image goes! Replace the url with the location of your own.*/
.header {
  display: block;
  background: linear-gradient(rgb(0,7,28,0.99), rgb(0,7,28,0)), url("/skaiabg.png") no-repeat; /*REPLACE ME!*/
  background-size: 900px auto;
  height:400px;
  top: 0;
  }
  
/*Miscellanous fancy styling for the title inside the header area.*/
.header h1 {
  font-size: 3.25em;
  padding-top: 100px;
  text-transform:lowercase;
  }
  
.header h1::first-letter {
  color: #fff;
  }
  
/*Puts "[]" around the title.*/
.header h1:before {
  content: "[";
  }
  
.header h1:after {
  content: "]";
  }
  
  
/*Nav1 is for the link buttons on the side.*/
nav1 {
  display: block;
  position: absolute;
  float: right;
  margin-left: 800px;
  top: 100px;
  }
  
nav1 .navlink {
  display: block;
  margin: 15px 0px;
  padding: 5px 2px;
  width: 100px;
  text-align: center;
  background: #333;
  font-family: Azkasia;
  font-size: 1.5em;
  text-transform: uppercase;
  border-radius: 0 15px 5px 0px;
  }
  
nav1 .navlink a {
  color: #fff;
  text-decoration: none;
  }

nav1 .navlink:hover, nav1 .navlink:focus-within {
  background: #555;
  padding-left:5px;
  transition:ease 0.5s; /*So the tab button appears to 'move' instead of instantly changing and popping outwards.*/
  }
  
/*Nav2 is for the links directly below the header.*/
nav2 {
  display: block;
  width: 100%;
  background: #444e6f;
  text-align: center;
  }
  
nav2 .navlink {
  display: inline-block;
  margin: 10px 5px;
  padding: 2px;
  font-size: 1.5em;
  text-decoration:none;
  font-family: "Symbola", "Palatino Linotype", Garamond, serif;
  font-weight:bold;
  }
  
nav2 .navlink a {
  color: #fff;
  text-shadow: 0 0 2px #c3cdea; 
  }
  
nav2 .navlink a:hover, nav2 .navlink a:focus {
  text-shadow: 0 0 3px #dae1f5;
  transition: ease 5s;
  }
  
/*Main page content goes in here. (Replace the image with your own footer image.)
  The rgb color in the linear-gradient here should match your actual main div background color, so the image
  appears to 'fade in' from the image to solid background. */
.main {
  display: block;
  margin: 0;
  position: relative;
  /*In order: gradient overlay (opacity going from 1 to 0.875), actual background color, footer image*/
  background: linear-gradient(rgb(16,24,50,1), rgb(16,24,50,0.875)), #101832 url("/skaiabg.png") no-repeat;
  background-size: 900px auto;
  background-position:bottom center;
  }
  
/*Inside div. I don't remember why this was a div and nothing else, but it is. 
  If you do change that, remember to add display:block; to the element first.*/
.inner {  
  padding: 1px 20px 20px 20px; /*The 1px is to prevent paragraph margin overflow from mucking up the background. CSS is weird sometimes.*/
  }
  
/*Prevent image overflow.*/
.inner img {
  max-width: 100%;
  height:auto;
  }
  
/*Footer with small text at the bottom of the page.*/
.footer {
  display: block;
  padding: 0.75em 20px;
  text-align: center;
  font-size: 0.85em;
  background: #444e6f;
  line-height: 150%;
  }
  
.footer a {
  color: #dfdfdf;
  }
  
  
  
/***

For narrower screens that can't handle the full version of the page.

***/

/*For desktop screens that are too narrow for the default width, keep the default layout, but with a narrower column.*/
@media(max-width:1050px) {
  .wrapper {
    width: 600px;
    }
  nav1 {
    margin-left:600px;
    }
  }

/*For smallest screens, switch to percentage-based width, and move the side tab buttons to the space under the header as centered buttons.*/
@media(max-width:900px) {
  .wrapper {
    width: 80%;
    }
  nav1 {
    position:static;
    margin-left:0;
    margin: 0 auto;
    width: 100%;
    text-align:center;
    }
  nav1 .navlink {
    display: inline-block;
    border-radius: 15px 5px;
    margin: 15px 0;
    padding: 5px 15px 10px 15px;
    width: auto;
    }
    
  nav1 .navlink:hover {
    padding-left: 15px;
    }
  }

/*If on mobile, maximize the space available by increasing width to 95%.*/
@media(orientation:portrait) {
  .wrapper {
    width: 95%;
    }
  }