/* 2024-10-21 Insurrection Day + 3 years, 290 Days */

/*    The CSS Box Model    https://www.w3schools.com/css/css_boxmodel.asp
  Explanation of the different parts:
    Content - The content of the box, where text and images appear
    Padding - Clears an area around the content. The padding is transparent
    Border - A border that goes around the padding and content
    Margin - Clears an area outside the border. The margin is transparent
  The box model allows us to add a border around elements, and to define space between elements. */

/*    CSS Selectors    https://www.w3schools.com/css/css_selectors.asp
    element Selector
        The element selector selects HTML elements based on the element name.
        Example:
            Here, all <p> elements on the page will be center-aligned, with a red text color: 
                p {
                  text-align: center;
                  color: red;
                }
    id Selector
        The id selector uses the id attribute of an HTML element to select a specific element.
        The id of an element is unique within a page, so the id selector is used to select one unique element!
        To select an element with a specific id, write a hash (#) character, followed by the id of the element.
        Example:
            The CSS rule below will be applied to the HTML element with id="para1": 
                #para1 {
                  text-align: center;
                  color: red;
                }
    class Selector
        The class selector selects HTML elements with a specific class attribute.
        To select elements with a specific class, write a period (.) character, followed by the class name.
        Example:
            In this example all HTML elements with class="center" will be red and center-aligned: 
            .center {
              text-align: center;
              color: red;
            }
        You can also specify that only specific HTML elements should be affected by a class.
        Example:
            In this example only <p> elements with class="center" will be red and center-aligned: 
            p.center {
              text-align: center;
              color: red;
            }
        HTML elements can also refer to more than one class.
        Example:
            In this example the <p> element will be styled according to class="center" and to class="large": 
            <p class="center large">This paragraph refers to two classes.</p>
    Universal Selector
        The universal selector (*) selects all HTML elements on the page.
        Example:
            The CSS rule below will affect every HTML element on the page: 
            * {
              text-align: center;
              color: blue;
            }
    Grouping Selector
        The grouping selector selects all the HTML elements with the same style definitions.
        Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
            h1 {
              text-align: center;
              color: red;
            }
            h2 {
              text-align: center;
              color: red;
            }
            p {
              text-align: center;
              color: red;
            }
        It will be better to group the selectors, to minimize the code.
        To group selectors, separate each selector with a comma.
        Example:
            In this example we have grouped the selectors from the code above: 
            h1, h2, p {
              text-align: center;
              color: red;
            }
*/

/* Source: https://fonts.google.com/selection/embed, but only 400 weight */
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

/* ~~~~~~~ var() global variables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {
  --colorBackground: #000033; /* maroon for testing */
  --colorBackgroundLink: #000066;
  --colorBackgroundLinkOnHover: #009900;
  --colorBackgroundUserInput: #99ff99;
  --colorBorderInputSubmit: red;
  --colorFontBlog: #ffdd99;
  --colorFontInputSubmit: white;
  --colorFontNotBlog: #ccffff;
  --colorFontOnHover: #ccffff;
  --colorFontUserInput: #000000;
  --fontSizeH1: 48pt;
  --fontSizeNormal: 16pt;
  --lineHeightH1: 48Pt;
  --lineHeightNormal: 24pt;
  --paddingTopH1: 36pt;
  --radiusBorderInputSubmit: 6pt;
  --widthStyleColorBorderForActionItem: 1px solid #6666ff;
}
/* ~~~~~~~ End var() global variables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* This applies to every style on the page */
/* Redefine styles from the .css files,    global_forms    reset    main    */
* {
  background-color: var(--colorBackground);
  border: none; /* this prevents the fixed top drop-down from having a border */
  color: var(--colorFontBlog);
  font-family: "Times New Roman", serif;
  font-size: var(--fontSizeNormal);
  line-height: var(--lineHeightNormal);
  margin: 1pt 2pt 0pt 2pt;    /*    top    right    bottom    left    */
}
body {
  margin: 0;
}
.noIndent {
  text-indent: 0pt;
}
.notBlog {
  /*background-color: var(--colorBackground);*/
  color: var(--colorFontNotBlog);
}

h1 {
  background-color: var(--colorBackground);
  /* font-size: small; */ /* Use small font-size to verify that the drobdown is not increasing the line height */
  font-size: var(--fontSizeH1);
  font-family: "Kalam","Lucida Handwriting",casual, sans-serif;
  font-weight: normal;
  line-height: var(--lineHeightH1);
  padding-top: var(--paddingTopH1); /* So the top menu does not overwrite the h1 title */
  text-align: center;
}

input {
  background-color: var(--colorBackgroundUserInput);
  border: var(--widthStyleColorBorderForActionItem);
  border-radius: var(--radiusBorderInputSubmit);
  color: var(--colorFontUserInput);
  width: 98%;
}

textarea {
  background-color: var(--colorBackgroundUserInput);
  border: var(--widthStyleColorBorderForActionItem);
  border-radius: var(--radiusBorderInputSubmit);
  color: var(--colorFontUserInput);
  width: 98%;
}

p {
  background-color: var(--colorBackground);
  padding-top: 3ch;
  text-indent: 4ch; /* first line indent */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~ Immovable Top Menu with Hoverable DropDown ~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* This is the same as
    <div class="divLinkHoverable" style="position:fixed; top:0; width:100%;"> */

/* This will be a    div    class */
.divLinkHoverable {
  background-color: black; /* color of the bar at the top */
  color: white;
  margin-top:1px;
  padding: 0pt 2pt 0pt 2pt;    /*    top    right    bottom    left    */
  position: relative;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~ Hoverable Dropdown ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* The container <div> - needed to position the dropdown content */
/* https: //www.w3schools.com/css/css_positioning.asp */
.divDropDownHoverable {
  background-color: var(--colorBackgroundLink);
  border: var(--widthStyleColorBorderForActionItem);
  border-radius: var(--radiusBorderInputSubmit);
  color: white; /* = color of "Jump to" */
  display: inline-block;
  margin-top: 1px;
  padding: 0pt 4pt 0pt 4pt;    /*    top    right    bottom    left    */
  position: fixed;
  right: 0pt;
  top: 0pt;
}

.divDropDownHoverable:hover {
  background-color: var(--colorBackground);
  padding-bottom: 8pt;
}

/* The on-hover actions for all 'link' and 'input_submit' items are the same */
/* Change their color when you hover over items that look like buttons */
.divDropDownHoverable-content a:hover,
.divLinkHoverable             a:hover,
.divLinkHoverable             input[type=submit]:hover {
  background-color: var(--colorBackgroundLinkOnHover);
  color: var(--colorFontOnHover);
}

/* Dropdown Content, all the links as ONE BIG BLOCK,
  hidden until activated by hovering, but some properties are set here. */
.divDropDownHoverable-content {
  background-color:var(--colorBackground);
  display: none; /* Hidden until activated by hovering */
}

/* Show the dropdown menu on hover */
/* This is for the entire content block */
.divDropDownHoverable:hover .divDropDownHoverable-content {
  display: block;
  z-index: 1; /* I don't know why this is required. */
}

/* These are the links that look like buttons */
/* All 'link' and 'input_submit' items should look the same */
.divDropDownHoverable-content a,
.divLinkHoverable             a,
.divLinkHoverable             input[type=submit] {
  background-color: var(--colorBackgroundLink);
  border: var(--widthStyleColorBorderForActionItem);
  border-radius: var(--radiusBorderInputSubmit);
  color: white;
  display: block;
  float: left;
  margin: 0pt 2pt;    /*    top_&_bottom    right_&_left    Outside space between borders of adjacent items */
  padding: 0pt 4pt;   /*    top_&_bottom    right_&_left    Inside space between text and border */
  text-align: center;
  text-decoration: none;
  width:fit-content;
}

/* For the formEmailMe input-submit "button", this overrides the style
    elements common to all 'link' and 'input_submit' items that we set above */
.divLinkHoverable             input[type=submit]{
      font-size:150%;
      font-weight:bold;
      padding: 4pt 6pt 6pt 6pt; /* top right bottom left   Larger font requires more padding to look right. */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~ End Hoverable Dropdown ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */