/* Makes measurements easier */
* {
  box-sizing: border-box;
}
/* Make it so that cursor-highlighted text uses 
   a custom colour, not blue */
*::selection {
  background: var(--altLinkCol);
  color: var(--textCol);
}

/* Colour definitions */
@property --bgCol {
  syntax: "<color>";
  inherits: true;
  initial-value: #0a0a0a;
}
/* The general colour of text */
@property --textCol {
  syntax: "<color>";
  inherits: true;
  initial-value: #cccccc;
}
/* The colour of standard links */
@property --linkCol {
  syntax: "<color>";
  inherits: true;
  initial-value: #5a5d87;
}
/* Secondary colour of links */
@property --altLinkCol {
  syntax: "<color>";
  inherits: true;
  initial-value: #7a7dA7;
}
/* The colour of link boxes */
@property --linkBoxCol {
  syntax: "<color>";
  inherits: true;
  initial-value: #3a3d67;
}
/* The colour of hovered link boxes */
@property --hoverLinkBoxCol {
  syntax: "<color>";
  inherits: true;
  initial-value: #4a4d77;
}
/* The colour of <hr> tags */
@property --hrCol {
  syntax: "<color>";
  inherits: true;
  initial-value: #242424;
}




/* General Body Qualities */
body {
    background-color: var(--bgCol);
    margin: 0;
    padding: 0;
    color: var(--textCol);
    font-family: Sans-Serif;
    font-size: 17px;
    text-align: center;
}
/* Colour of standard links */
a {
    color: var(--linkCol);
    transition: color 0.25s;
}

/* A div that controls everything except the title/stars at the top */
.mainBody {
    width: 50%;
    max-width: 20cm;
}


/* Links at the bottom of the page */
ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/* Links within a list assume some special properties
   with regards to links */
li > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px 0;
}
/* Navigation links should appear as coloured boxes that change
   colour when hovered. */
.nav > li {
  background-color: var(--linkBoxCol);
  width: 25%;
  margin: 4px 4px;
  transition: background-color 0.25s;
}
.nav > li > a {
  color: var(--textCol);
  text-decoration: none;
  text-align: center;
}
.nav > li:hover, .nav > li:active {
  background-color: var(--hoverLinkBoxCol);
}
/* Email links should appear as normal text, but assume the
   entire size of the box. */
.email > li {
    width: 50%;
    margin: 4px 4px;
}
.email > li:hover a, .email > li:active a {
    color: var(--altLinkCol);
}

/* The div that contains everything on the page */
.container {
    margin: auto;
}
/* The div that contains both the logo and the stars image */
.title {
    height: 100%;
    background:
        url("sky_web.jpeg") no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% -26.5%;
    position: relative;
    text-align: center;
}
.logo {
    width: 90%;
    max-width: 640px;
    height: auto;
    margin: 20px auto;
}
.gradient {
    position: absolute;
    bottom: 0; /* Position it at the bottom */
    left: 0;
    width: 100%;
    height: 10%; /* You can adjust the height of the gradient */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, var(--bgCol) 100%); /* Gradient */
}

/* Special custom line break */
.diamonds {
    font-size: 1.88em;
}
.diamonds:before {
    content: "◇◆◇";
}
/* Div that contains Character profiles as well as footer links */
.pageend {
    /* empty */
}
.twitter-timeline {
    width: 67%;
}
/* Lists containing Character profiles */
.profiles {
   /* empty */
}
.profiles li {
    width: 25%;
}
.profiles > li img {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
/* The text boxes that appear when you hover on a Character */
.desc {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
}
/* Used by text that wants to look like a quote (i.e. fancy) */
blockquote { 
    font-family: Serif;
    font-weight: lighter;
    font-style: italic;
    text-shadow: 1px 1px #261a47;
}
/* Game Tagline */
.bigQuote {
    font-size: 2.59em;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 0px;
    margin-left: 0px;
}
/* Description of the game */
.littleQuote {
    /*width: 50%;*/
    font-size: 1.18em;
}
/* Description of the game */
p.description {
    margin: auto;
    width: 84%;
    text-align: justify;
    text-justify: auto;
}
/* Big Link, i.e. Blogger Link */
.bigLink {
    color: var(--linkBoxCol);
    font-family: Serif;
    font-weight: lighter;
    text-decoration: none;
    font-size: 2.82em;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
}
.bigLink:visited {
    color: var(--linkCol);
}
.bigLink:hover {
    color: var(--altLinkCol);
}
/* Horizontal Rules */
hr {
    border: 0;
    width: 67%;
    margin-left: 16.67%;
    margin-right: 16.67%;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 3px;
    size: 0.59em;;
    color: var(--hrCol);
    background-color: var(--hrCol);
}
/* Special short hr */
.short > hr {
    width: 33%;
}


/* Adjust layout for smaller screens */
@media (max-width: 1400px) { 
    .mainBody {
        width: 67%;
    }
}
@media (max-width: 1200px) { 
    .mainBody {
        width: 75%;
    }
}
@media (max-width: 1000px) { 
    .mainBody {
        width: 87%;
    }
}