@charset "UTF-8";

    :root {
            --main-color: #06c;
            --accent-color: #006;
            --af-garden-light: #eefbb5; 
            --af-base:  #ccc;     /*lighter gray than base1 */
            --af-light: #f1f1f1;  /* same as base3 */

            --base2:     #eee8d5;  /* nearly white */
            --base03:  #073642; /* nearly black */
            --red: #dc322f; 

            --link-color: #567e30;
            --limit-small: 480px;
            --limit-medium: 1000px;
        
        }
        .light-background {background-color: var(--af-garden-light);
        }

        div.sticky {
          position: -webkit-sticky;
          position: sticky;
          top: 0;
          background-color: var(--af-garden-light);
          /* padding: 50px; */
          font-size: 20px;
        }
        .af-tiny  {
            font-size: 1.2rem;
            line-height: 1.5;
        }
         /* replace with vars    */
            /* .base03  { background-color: #002b36; }
            .base02  { background-color: #073642; }
            .base01  { background-color: #586e75; }
            .base00  { background-color: #657b83; }
            .base0   { background-color: #839496; }
            .base1   { background-color: #93a1a1; }
            .base2   { background-color: #eee8d5; }
            .base3   { background-color: #fdf6e3; }
            .yellow  { background-color: #b58900; }
            .orange  { background-color: #cb4b16; }
            .red     { background-color: #dc322f; }
            .magenta { background-color: #d33682; }
            .violet  { background-color: #6c71c4; }
            .blue    { background-color: #268bd2; }
            .cyan    { background-color: #2aa198; }
            .green   { background-color: #859900; } */

          /* to avoid blockquotes only halfway rendered (see https://github.com/jez/pandoc-sidenote/issues/4) */
            span.blockquote, span.sourceCode {
                display:block;
                float:left;
                left:1rem;
                margin-top:-5%;
                margin-bottom:5%;
                clear:both;
                width:90%;
                position:relative;
                border-left:0.5rem solid #ccc;
                padding:0.5rem
            }
            .bottomleft {
                position: absolute;
                bottom: 8px;
                left: 16px;
                font-size: 18px;
                }
            @media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
            /* @media (max-width:var(--limit-medium)) and (min-width:var(--limit-small)){.w3-hide-medium{display:none!important}}             */
            @media (max-width:1000px) and (min-width:480px){.w3-hide-medium{display:none!important}}
            @media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
            .w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
            .w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
            .w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
            .w3-main,#main{transition:margin-left .4s}
            /* .w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)} */
            /* .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} */
            .w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
            .w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
            .w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
            .w3-bar .w3-button{white-space:normal}
            .w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
            .w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
            .w3-right-align{text-align:right!important}
            .w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color: var(--af-garden-light)}.w3-centered tr th,.w3-centered tr td{text-align:center}
            .w3-left{float:left!important}
            .w3-right{float:right!important}
            .w3-xxxlarge{font-size:48px!important}
            .w3-display-container{position:relative;}
            .w3-container,.w3-panel{padding:0.01em 16px}
            .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
                    .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
            .w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:var(--af-light)!important}

                /* order media queries from large to small, later overrides earlier ones! */
                
            html { font-size: 14px; }   
            /* @media only screen and (max-width: var(--limit-medium)) {
                html { font-size: 12px; }   
            }
            @media only screen and (max-width: var(--limit-small)) {
                        html { font-size: 10px; }  
            } */
            @media only screen and (max-width: 1000px) {
                html { font-size: 12px; }   
            }
            @media only screen and (max-width: 480px) {
                        html { font-size: 10px; }  
                }