/* * * START CSS TIPS * * *
  * Great places to learn about CSS
  * * https://css-tricks.com
  * * https://www.w3schools.com/
  * * https://www.google.com/
  * List of available CSS properties:
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  * List of shorthand properties:
  https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
  * Directory paths:
  https://css-tricks.com/quick-reminder-about-file-paths/
  * To know which browsers support what property: https://caniuse.com/
  * Alphabetizing your CSS properties makes for easier reading
  * Indenting by 2 spaces helps for readability
  * When developing with CSS use classes as much as possible leave
  id(s) for Javascript
  * Give everything a meaningful name
  * By default all elements are set to position:static: Default value.
   Elements render in order, as they appear in the document flow
  * Single property items can be on the same line as enclosing bracket

   { } saves on whitespace while developing
  * Whitespace is ignored, will not render in HTML file
  * Every property should end with a semi colon
  * Remember to compress your imagery:
   https://enviragallery.com/9-best-free-image-optimization
   -tools-for-image-compression/
   no one want to wait and download a 1 MB image on a mobile device
  * Fonts - web safe fonts will give you the most speed when someone
   is trying to view your site at an airport, museum, in a canyon -
   somewhere there is a slow connection, not everyone travels at the
    same speed
 * * * END CSS TIPS * * */

    * {
      box-sizing: border-box;
      font-family: sans-serif;
      /* font-family: 'Comfortaa', cursive; */
    }

    html, body {
      height: 100%;
      margin: 0;
    }

    .container {
      padding: 0;
      min-height: 100%;

      margin-top: 0px;
      margin-bottom: -70px;
      margin-left: auto;
      margin-right: auto;
    }

    img {
      width: 70%;
      height: auto;
    }

    header {
      background-color: #36a877;
    }

    header div {
      width: 80%;

      padding-top: 30px;
      padding-right: 0;
      padding-bottom: 30px;
      padding-left: 0;

      margin-top: 0;
      margin-bottom: 0;
      margin-right: auto;
      margin-left: auto;
    }

    .main-logo {
      color: black;
      /* background-color: black; */

      font-family: 'arial black', arial, helvetica, sans-serif;
      /* Multiple fonts in case  the computer doesn't have the first
      Computer selects leftmost available font
      Always include serif or sans-serif so computers always have a font */

      font-size: 6vh; /*vh = 1% of the viewport height*/

      /* margin-left: 5%; */
      padding-left: 1%;
      text-decoration: none;
      position: relative;
      display: block;
    }

    .page-title {
      color: black;
      font-family: 'Cambria', times, serif;
      font-size: 5vh;
      padding-left: 1%;
      position: relative;

    }

    section {
      background-image: url("..\\images\\stars.jpg");
      /* needs double slash to open in Atom */
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      min-height: 800px;
      padding-top: 50px
    }

    .content {
      background-color: rgba(232, 233, 235, 0.8); /*r, g, b, opacity*/
      margin: 0 auto; /*using shorthand*/
      min-height: 700px;
      padding: 50px;
      width: 80%;
    }


    nav {
      left: 25px;
      position: relative;
      top: 10px;
      margin: 0 auto;
      width: 80%;
      margin-top: 10px;
    }

    nav a {
      background-color: #36a877;
      color: #ffffff;
      font-family: 'arial black', arial, sans-serif;
      margin-right: 10px;
      padding: 1px 5px;
      text-decoration: none;
      transition: background-color 0.5s ease;
    }

    .nav-minor {background-color: black;}

    /* The container <div> - needed to position the dropdown content */
    .dropdown {
      display: inline-block;
      position: relative;
    }

    /* Dropdown "Button" */
    .dropdown .dropper {    }

    /* Dropdown List (Hidden by Default) */
    .dropdown .dropdown-content {
      display: none;
      position: absolute;
      overflow: auto;
      /* min-width: 80px; */
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */
    .dropdown .dropdown-content a {
      background-color: black;
      color: white;
      display: block;
      margin: 0px;
      padding: 2px 5px;
      text-decoration: none;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {display: block;}

    /* Change color of current page's button */
    .nav-current,
    body.home-page .nav-home,
    body.realms-page .nav-realms,
    body.powers-page .nav-powers,
    body.beings-page .nav-beings,
    body.bios-page .nav-bios,
    body.stories-page .nav-stories,
    body.about-page .nav-about {
      background-color: white;
      color: black;
     }

    /* change color of buttons on hover */
    nav a:hover {background-color: #2b8760;}

    .nav-minor:hover {background-color: #545454;}

    /* Change the background color of
    the dropdown button when the dropdown content is shown */
    .dropdown:hover .nav-realms,
    .dropdown:hover .nav-powers,
    .dropdown:hover .nav-beings,
    .dropdown:hover .nav-bios,
    .dropdown:hover .nav-stories,
    .dropdown:hover .nav-about {background-color: #2b8760;}

    /* Change color of dropdown links on hover */
    .dropdown .dropdown-content a:hover {background-color: #545454;}

    /* change current button's color on hover */
    .nav-current:hover,
    body.home-page .nav-home:hover {background-color: #bdbdbd;}

    /* Change background of current dropdown button
     when dropdown content is shown */
    .realms-page .dropdown:hover .nav-realms,
    .powers-page .dropdown:hover .nav-powers,
    .beings-page .dropdown:hover .nav-beings,
    .bios-page .dropdown:hover .nav-bios,
    .stories-page .dropdown:hover .nav-stories,
    .about-page .dropdown:hover .nav-about {background-color: #bdbdbd};


    /* footer {
      position: relative;
      margin: 0 auto;
      width: 80%;
      height: 70px;
    }

    footer div {
      position: absolute;
      right: 0;
      width: 112px;
      z-index: 1;
    }

    footer div a {
      background-size: 100% 100%; /*using shorthand property END-COMMENT
      display: inline-block;
      height: 50px;
      overflow: hidden; /*Property specifies what happens if content overflows and element's box END-COMMENT
      text-indent: 101%;
      width: 50px;
    } */