/* Css formatted to match appearance of elements from top to bottom of HTML page. 
If you cannot find an item being styled, look at general placement and you'll have 
a good idea of where it fits on the page.*/

/* Color Pallete 
Coffee Black (background color) #362f2f;
Blue (main color for nav and footer) #1974c4;
Mellow Blue (sidecolor) #43a5fa;
Dim Gold (highlights and text) #edce9b;
White/ghostwhite (text);
*/

/*
Side colors: 
Light tan (chessboard and panel color) #f8ecda;
Light Brown (chessboard and panel color) #dac4b1;
Greyish blue (highlights board, accents) #6390b5;
Lighter blue (highlights board, accents) #a5b4cb;
*/

/* This is my preferred way to import global colors and use them as variables */
:root {
  --black: #362f2f;
  --blue: #1974c4;
  --mellow: #43a5fa;
  --gold: #f5e1c0;
  --tan: #fcf6ec;
  --oldtan: #faedda;
  --brown: #dac4b1;
  --greyblue: #6390b5;
  --lightblue: #a5b4cb;
  --red: #ff595e;
  --green: #6bf178;
  --azure: #4d6cfa;
  --darkazure: #26367d;
  --grimazure: #293145;
}

/*First, I'm going to style body and set predefined classes*/
body {
  /* The following removes the ability to copy */
  /*
  -webkit-touch-callout: none; /* iOS Safari */
  /*-webkit-user-select: none; /* Safari */
  /*-khtml-user-select: none; /* Konqueror HTML */
  /*-moz-user-select: none; /* Old versions of Firefox */
  /*-ms-user-select: none; /* Internet Explorer/Edge */
  /*user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  background-color: #fefefe;
  margin: 0; /* this is my standard practice of setting margin to 0 */
  width: 100vw; /* set body height and width to conform to screen size */
  height: 100vh;
  box-sizing: border-box; /* border-box is NOT an inherited property */
  overflow-x: hidden; /* hide horizontal overflow  */
}

/* These classes enable and disable elements for mobile and desktop browser compatibility*/
.desktopOnly {
  display: none;
}

.mobileOnly {
  display: inline-block;
}

/* When screen is wider than 600px*/
@media only screen and (min-width: 600px) {
  .desktopOnly {
    display: inline-block;
  }

  .mobileOnly {
    display: none;
  }
}

button {
  outline: none;
  border: 0;
  padding: 5px;
  transition: all 300ms linear;
  box-sizing: border-box;
}

button:hover {
  cursor: pointer;
}

.selectionButton {
  border: #335 3px solid;
  color: #335;
  background-color: var(--gold);
}

.selectionButton:hover {
  color: white;
  background-color: var(--greyblue);
  border-color: var(--mellow);
}

.disableClick {
  cursor: default;
}

/* Main body contents */
#mainContainer {
  display: grid;
  grid-template-areas:
    "n"
    "t"
    "c"
    "f";
  -o-transition: grid-template-columns 0.35s;
  -moz-transition: grid-template-columns 0.35s;
  -webkit-transition: grid-template-columns 0.35s;
  transition: grid-template-columns 0.35s;
  transition-timing-function: easeOutSine;
}

/* Style for Navigation Bar */
#navigation {
  grid-area: n;
  position: sticky;
  top: 0;
  background-color: var(--tan);
  border-bottom: var(--gold) 0.6vh solid;
  z-index: 2;
}

/* The introduction */
#title {
  grid-area: t;
  position: sticky;
  top: 0;
  padding: 2vh 1.5vh 2vh;
  height: calc(100vh - 60px);
  background-color: var(--grimazure);
  -o-transition: border-right 0.6s;
  -moz-transition: border-right 0.6s;
  -webkit-transition: border-right 0.6s;
  transition: border-right 0.6s;
  border-right: #fefefe calc(1vh + 0.2vw + 1px) solid;
  box-sizing: border-box;
}

#mainContainer.stage2 #title {
  height: 100vh;
  border-right: var(--brown) calc(1vh + 0.2vw + 1px) solid;
}

#title img {
  margin-top: 12px;
  width: 13vw;
  border-radius: 49%;
}

#mainContent {
  grid-area: c;
  height: 1000px;
  width: calc(62vw - 15px);
  margin-bottom: 20px;
  margin-left: 5px;
  padding-left: 2vw;
  padding-right: 2vw;
}

#mainContent h1 {
  margin-top: calc(16px + 1vh);
}

footer {
  grid-area: f;
  width: auto;
  background-color: var(--tan);
  font-size: 0.85em;
  padding: 8px;
  border-top: var(--gold) 0.6vh solid;
}

/* Resposive style for screens larger than 600px in resolution */
/* All desktop monitors and medium tablets fit into this range */
@media only screen and (min-width: 600px) {
  #mainContainer.stage1 {
    grid-template-columns: 25vw auto 73vw;
    grid-template-areas:
      "n n n"
      "t . c"
      "t f f";
  }

  #mainContainer.stage2 {
    grid-template-columns: 25.5vw auto 73vw;
    grid-template-areas:
      "t n n"
      "t . c"
      "t f f";
  }

  footer {
    font-size: 0.95em;
    padding: 10px;
  }
}

/* When screen is less than 180px in width or height, tell user they are breaking everything. */
@media only screen and (max-width: 180px), (max-height: 180px) {
  #mainContainer {
    display: none;
  }
  #indignantMessage1 {
    display: block;
  }
}

/* When screen is less than 100px in width or height, give user a condescending glare. */
@media only screen and (max-width: 100px), (max-height: 100px) {
  #indignantMessage1 {
    display: none;
  }
  #indignantMessage2 {
    display: block;
  }
}