/* Variable definitions, for easier color editing */
:root {
    --background: #0d1b2a;
    --main: #1b263b;
    --secondary:  #415a77;
    --highlight: #cfa117;  /* yellowish */
    --button: #778da9; --text: #e0e1dd;
    --width: 60vw;
    --radius: 40px;
    --gapSize: 1.5em;
}

html {
  box-sizing: border-box;
  background-image: url("assets/aquagalaxy_small.gif"); 
  background-attachment: fixed; /* fixes scrolling issue */
}

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

.mainGrid {
  display: grid;
  grid-template:
    "header header " /* row 1 */
    "aside main "  /* row 2 */
    "footer footer" /* row 3 */
	/ 1fr 4fr ;  /* column widths (1fr = one fraction) */
  grid-gap: 1em;   /* (optional) space between areas */
}

.twoColGrid {
    display: grid;
    grid-template:
    "header header"
    "leftHeader rightHeader"
    "left right"
    / 1fr 1fr;
    grid-gap: 1em;
    justify-items: center;
}

.leftHeader { 
    grid-area: leftHeader; 
    width: 100%;
}

.rightHeader { 
    grid-area: rightHeader; 
    width: 100%;
}

.left { 
    grid-area: left; 
    width: 90%;
}

.right { 
    grid-area: right; 
    width: 90%;
}

/* assign your elements to the areas you defined in the grid-template rule: */
header { grid-area: header; }
aside { grid-area: aside; }
main { grid-area: main; }
footer { grid-area: footer; }

.rounded,
.rounded * {
    border-radius: var(--radius);
}

* {
    font-family: Verdana, sans-serif;
}

body {
    margin: 0 auto;
    padding: 0.75em 10em 0.25em 10em;
}

p, 
figcaption,
li,
h1,
h2,
h3{
    color: var(--text); 
}

p,
figcaption {
    line-height: 2;
    margin: 0em auto;
}

p:not(:last-child) {
  margin-bottom: 1em;
}

a:link {
    color: cyan;
}
a:visited{
    color: magenta;
}

h1, h2 {
    margin-top: 0;
    text-align: center;
}

h2, h3 {
    text-align: center;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 0.125em;
}


/* Main body portions */
header,
aside,
main,
section,
article,
footer {
    background-color: var(--main);
    padding: var(--radius);
    display: block;
}

header{
    width: 100%;
    padding-bottom: calc(var(--radius) / 2);
}

aside {
    padding: calc(var(--radius) / 2);
    background-color: var(--secondary);
}

article,
section{
    justify-self: center;
    margin: 0 auto;
    width: 90%;
}

footer {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

nav {
    background: var(--secondary);
    text-align: center;
    margin: 0em auto;
}


nav ul {
    /* gets rid of bullet points */
    list-style-type: none;
    padding: 1em;
    margin: 0px auto;
    gap: 1em;
}

/* Putting the paddings here rather than the li element make the whole "button"
 * clickable */
/* TODO I wrote this quite a long time ago, I bet its really silly */
nav a {
    background-color: var(--button);
    text-align: center;
    padding: 0.75em;
    margin: 0em auto;
    min-width: 8em;
    max-width: 10em;
    /* Makes buttons and their padding take up height in surrounding li */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    color: var(--text)
}
nav a:visited {
    color: var(--text);
}

nav a * {
    display: inline-block;
}

/* Images inside of nav elements */
nav img {
    border-radius: 0 !important;
    height: 1.25em;
    margin: 0.125em;
}

nav a:link{
    color: var(--text);
}

nav a:hover{
    background-color: var(--highlight);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.section-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

section{
  border: 2px solid transparent; /* to prevent shifting */
  border-radius: var(--radius);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

section > div {
    padding: calc(var(--radius) / 2);
}

/* Only applies to sections within a elements */
a > section:hover{
  border-color: var(--highlight);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  cursor: pointer;
}




/* This probably isn't the right way to do it */
.greeblies {
    text-align: center;
    margin-bottom: var(--gapSize);
}
.greeblies:last-of-type {
    margin-bottom: 0em;
}
/* All images and links in the greeblie box */
.greeblies * {
    border-radius: 0;
    margin: 0 auto;
    padding: 0;

    /* fixes the link peeking out the bottom */
    vertical-align: bottom;
    image-rendering: crisp-edges;
}


.flexboxColumn {
    display: flex;
    flex-direction: column;
    gap: var(--gapSize);
}

.flexboxColumn.bottomSpace > :last-child {
    margin-bottom: 100px;
}


/* Use this to hold things left to right*/
.flexboxRow {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.flexboxRow > div{
    flex: 1 0;
    min-width: 12em;
    padding: calc(var(--radius) / 2);
}

.flexboxRow > aside{
    flex: 0 1;
    object-fit: contain; 
    padding: calc(var(--radius) / 4);
}

/* Align children to top of row (allows children to shrink to fit vertically */ 
.flexboxRow > * {
    align-self: center;
}

figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1em auto;
}

figcaption {
    font-style: italic;
    padding: 1em;
}