/*****************************************************************************
 *    Copyright (C) 2018  Wozgonon
 *
 *    This program is free software: you can redistribute it and/or modify
 *    it under the terms of the GNU Affero General Public License as published
 *    by the Free Software Foundation, either version 3 of the License, or
 *    (at your option) any later version.
 *
 *    This program is distributed in the hope that it will be useful,
 *    but WITHOUT ANY WARRANTY; without even the implied warranty of
 *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *    GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *****************************************************************************/

/*****************************************************************************
 * Global variables and font sizes
 *****************************************************************************/

* {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

html {
  font-size: 16px;
}

:root {
    --golden-ratio-phi: 1.61803399;
    --code-text-width: 90%;
    
    --title-color: black;
    --table-header-bg:  #c4e0a4;
    --table-header-fg: black;

    --main-bg-color: rgb(255, 193, 7); /*  material design*/
    --main-bg-color: rgb(255, 224, 130); /*  material design*/
    --main-bg-color: rgb(255, 213, 79); /*  material design*/
    --main-bg-color:  hsl(102, 64%, 50%);
    --main-bg-color:  gold;
    --second-bg-color: silver;

    --article-bg-color: #fff;
    --second-color: var(--title-color);
    --hover-color: var(--main-bg-color);

    /*--accent-color: */
    --shadow:     0 .25rem 1em rgba(0, 0, 0, 0.15);
    /*font-size: 1.8em;*/
    --plot-color-1: blue;
    --plot-color-2: green;

    --article-width: 55rem;  /* TODO 50em makes text width look better but not so good on mobile, could just set max-width */
    --top-offset-for-icon : 1.5rem
}

@media only screen and (max-width: 1000px) {
    html {
	font-size: 24px;
    }
    .imageFill {
	width: 110vw
    }
    :root {
	--top-offset-for-icon : 2.5rem
    }
}

button:hover, button:hover {
    background-color: var(--hover-color);
    color: white;
}

/*****************************************************************************
 * Styles the semantic elements
 *****************************************************************************/

/* Since header and footer have position:fixed,
   add padding to top and bottom to prevent the contents slipping underneath the header and footer.
*/
body {
    padding-top: 6rem;
    padding-bottom: 3rem;
    scroll-margin-top: 5rem;
}

header {
    top:0;
    position: fixed;
    width: 100%;
    padding: 1rem;
    text-align: center;
    /*background: var(--main-bg-color);*/
    color: var(--title-color);
    color: black;
    font-size: 1rem;
    box-shadow: var(--shadow);
    background-image: linear-gradient(to right, var(--main-bg-color), var(--second-bg-color));
    z-index: 100;
    /*font-family: Comic Sans, Lucida, Cursive;*/
}

header h1::before {
    content: url(images/site/dancer_yellow_thumb.png);  /*"Woz";*/
    left: 3rem;
    top: var(--top-offset-for-icon);
    position: absolute;
}
abc {
    text-shadow: 2px 2px var(--second-bg-color);
    /*background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color));*/
    font-style: oblique;
    font-family: Courier;
    position: absolute;
    left: 3rem;
    padding: .1em;
    /*border-style: ridge;*/   /* groove, ridge, outset inset */
    box-shadow: var(--shadow);
    border-radius: .3em;
    font-weight: normal;
}

header h1::after {
    content: "\2630";
    position: absolute;
    right: 6rem;
}

.hidden {
    display: none;
    visibility: hidden;
    opacity : 0;
    position: fixed;
    top: 0;
    right: 0;
}

.visibleMenu {
    display: block;
    visibility: visible;
    opacity : 1;
    position: fixed;
    top: 5rem;
    right: 0;
    background-color: white;
    width: 16rem;
}

footer {
    font-weight: bold;
    clear: both;
    position: fixed;
    bottom: .5rem;
    right: .5rem;
    margin-top:auto;
    font-size: .6rem;
    text-align: right;
    /*writing-mode: vertical-lr;
    right: 0rem;
    height: 15rem;
    text-orientation: upright;*/
}

footer:after {
    content: "\00A9 2020  Wozgonon";
}

code, .codeBorder {
    white-space: pre-line;
    font-family: monospace;
}

.codeBorder {
    display: block;
    border-style: ridge;   /* groove, ridge, outset inset */
    width: var(--code-text-width); /** TODO not working */
}

time::before {
    content: " "
}

/*****************************************************************************
 * Styles the links for navigation
 *****************************************************************************/

nav {
    box-shadow: var(--shadow);
    width: 20%
}

nav a {
    display: block;
    color: var(--title-color);
    padding: .5em 1em; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    text-decoration: none;
}

nav a:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
input[type="file"], nav a:hover {
    background-color: var(--hover-color)
}

/*****************************************************************************
 *  Styling for 
 *****************************************************************************/

.apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.apps a {
    margin: 1rem;
    padding: .5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align:center;

    display: block;
    color: var(--title-color);
    cursor: pointer; /* Pointer/hand icon */
    text-decoration: none;
    box-shadow: var(--shadow);

    width: calc(4rem*var(--golden-ratio-phi));  /* Height ought to be 4rem */
}

.apps a img {
    margin:auto;
    padding: .5em;
    display:block;
    text-align:center;
    width: 3em;
    height: 3em;
}

.apps a .char {
    display:block;
    margin:auto;
    font-size: 3rem;
    font-weight: bold;
    text-align:center;
}

/*****************************************************************************
 *  Style checkboxes
 *****************************************************************************/


label, details, th, td, p {
    font-size: 1rem;
}

button, input, textarea, select {
    font-size: inherit
}

textarea {
    display: block;
    width: var(--code-text-width); 
    margin: auto;
    border-style: ridge;   /* same as codeBorder */ 
}

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-moz-range-track {
    height: .5rem;
    background: var(--second-bg-color);
    border: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: .5rem;
    background: var(--second-bg-color);
    border: none;
}

input[type=range]::-ms-track {
    height: .5rem;
    background: var(--second-bg-color);
    border: none;
}


input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -.5rem;
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 50%;
    background: var(--main-bg-color);
    cursor: ew-resize;
}

input[type=range]::-moz-range-thumb {
    margin-top: -.5rem;
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 50%;
    background: var(--main-bg-color);
    cursor: ew-resize;
}

input[type=range]::-ms-thumb {
    margin-top: -.5rem;
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 50%;
    background: var(--main-bg-color);
    cursor: ew-resize;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}


/*  Buttons */
button, input[type="submit"], input[type="button"]  { /* Or better yet try giving an ID or class if possible*/
    background-color: var(--main-bg-color);
    border-radius: 5px;
}

/* TODO change background color of checkboxes
input[type="checkbox"]:checked {
    
    //filter: invert(100%) hue-rotate(18deg) brightness(1.7);
    //outline: 2px solid lightblue;
    //content: 'abc';
    //background-color: var(--main-bg-color);
    //background: var(--main-bg-color);
    //opacity:  0.00000001; // Hide the check box
		    
}
*/

/*****************************************************************************
 *  Styling for tables
 *****************************************************************************/

/*
//table, th, td {
//  border: 1px solid black;
//  border-collapse: collapse;
//}
*/

.schedule {
    border-collapse: collapse;
    width: 100%;
}

.schedule td, #schedule th {
  border: 1px solid #ddd;
  padding: 8px;
}

.schedule tr:nth-child(even){background-color: #f2f2f2;}

.schedule tr:hover {background-color: #ddd;}

.schedule th {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    text-align: left;
    background-color: var(--table-header-bg);  /*#4CAF50;*/
    color: var(--table-header-fg);
}

.money, .negativeMoney, .number {
    text-align: right;
}

.negativeMoney {
    color: red;
}



/*****************************************************************************
 *  Styling for articles
 *****************************************************************************/

article {
    width: var(--article-width);  /* TODO 50em makes text width look better but not so good on mobile, could just set max-width */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--article-bg-color);
    box-shadow: var(--shadow);
    margin:  2em auto;
}

@media only screen and (max-width: 1000px) {
article {
    width: 50rem;  /* TODO 50em makes text width look better but not so good on mobile, could just set max-width */

}
}

article details, .article {
    box-sizing: border-box;
    margin: auto;
    padding: 1rem
}

details[open] summary {
    margin-bottom: 1rem
}

details[open] summary:before {
    content: "-  "; 
    color: var(--second-color);
    font-weight: bold;
}

details:not([open]) summary:before {
    content: "+  "; 
    color: var(--second-color);
    font-weight: bold; 
}

summary::-webkit-details-marker {
    display: none;
}
summary { /* Firefox */
    list-style-type: none;
}
summary::marker {
    display: none;
}

article details summary {
    background-image: linear-gradient(to right, var(--main-bg-color), var(--second-bg-color));
    margin: -1em; /* This is important to get the summary to be flush with the article, although it is a nice effect without */
    padding: 1rem; /* This is important to give a border around the text to make it look like a bar */
    box-shadow: var(--shadow);
    font-weight: bold;
    font-size: 1rem;
    position: relative;
    color: var(--title-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

summary time {
    /*color: var(--second-bg-color);*/
    font-style: italic;
    font-size: small;
    font-weight: normal;
    right: 1rem;
    position: absolute;
}

article details p {
    font-size: 1rem;
}

p, li {
    max-width: 64rem;
    word-wrap:break-word;
}

article details > * {
    padding-left: 1rem;
    padding-right: 1rem;
}

/*****************************************************************************
 *  Styling for plots
 *****************************************************************************/

.plot2dlegend {
    box-shadow: var(--shadow);
    padding: 8px;
    display: grid;
    grid-template-columns: auto auto;
    z-index: 50;
}

.plot2d {
    box-shadow: var(--shadow);
    width: 100%;
    /*height: calc(100%/ 1.618) */ /* phi `= 1.618 golden ratio */

    /*
    padding-left: 0;
    padding-right: 0;
    padding: 0;
    margin:  0;
      margin-left: auto;
      margin-right: auto;
      left:0px;
      top:0px;
      right:0;
      bottom:0;
   */
}

.wozcanvas {
    box-shadow: 0 .25em 1em rgba(0, 0, 0, 0.15);
    width: 100%;
    height: calc(100%/ 1.618);  /* phi `= 1.618 golden ratio */
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;

    left:0px;
    top:0px;
    right:0;
    bottom:0;
    height:70%;
}

/*****************************************************************************
 *  Parallax
 *****************************************************************************/

.aqua-parallax {
  background-image: url("../static/images/aqua_IMG_20200814_153256629.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

/*
  https://www.w3.org/Style/Examples/007/figures.en.html
  "float and width are essential, others for decoration"

*/
figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5rem;
  padding: 0.5rem;
}

.comingsoon, .notewell {
    border-color: black;
    background-color: lightyellow;
    border-style:solid;
    border-radius: 1rem;
    padding:1rem;
    font-weight: bold;
}
.comingsoon::before {
    content: "\1F6A7  ";
    font-weight: bold;
    font-size: 2rem;
    
}
.notewell::before {
    content: "\24D8   "; /* 2139 */
    color: blue;
    font-weight: bold;
    font-size: 2rem;
}

.box {
    font-weight: bold;
    font-size:8rem;
    background-color:red;
    border-color:blue;
    border-width:2px
}

.fullScreen {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:300;
}

.probGrid {
    display: grid;
    grid-template-columns:  auto auto auto;
    grid-template-rows:   auto auto;
    grid-gap: 1rem;
    margin: auto;
    justify-content: center;
    box-shadow: var(--shadow);
}


.finGrid {
    display: grid;
    grid-template-columns:  auto auto auto;
    grid-template-rows:   auto auto;
    grid-gap: 1rem;
    box-shadow: var(--shadow);
}

.finGrid2 {
    display: grid;
    grid-template-columns:  auto auto ;
    grid-template-rows:   auto auto ;
    grid-gap: 1rem;
    box-shadow: var(--shadow);
}

.finCashFlow {
    display: grid;
    grid-template-columns:  auto ;
    box-shadow: var(--shadow);

}