/***********************************************************************
** START_HERE.css works with apex.css for the Apex Skin for PMWiki
** == Included here, are the image files you will want to customize for your site ==
** == Also you can add any custom CSS to this file to overide the default
**    apex.css file even if it refers to the same element. Much safer to edit here!
**
**  Copyright 2020 Kirk Siqveland (Kirk@Cybertamer.com)
**
**  This file is one of several Skin files for PmWiki; you may redistribute it 
**  and/or modify it under the terms of the GNU General Public License as published
**  by the Free Software Foundation; either version 2 of the License, or
**  (at your option) any later version.  See pmwiki.php for full details.
**
***********************************************************************/

/*  

    The Other big visual item variables are 
    from the /local/Config.php file:
    (see the README file, )
    
               $PageHeaderLogoSVG / $PageHeaderLogoPNG
    And The 	 $WikiTitle 
               $WikiSubTitle
               $WikiSideMoto  Which could be image instead of text
    and the    $WikiSearchTitle 


*/

/* This demonstrates how to add a special font-face to your page 
    Just copy a file of the font into the media folder and add the something like this to this page: 
    I can't include it in the demo - it makes the file too large to include the font. */
  @font-face {
    font-family: vibrolator;
    src: url("https://www.richrender.org/media/Vibrolator.ttf") ;
  }



body {

    background-repeat:      no-repeat;
    background-attachment:  fixed;
    background-size:        100% 100%;   
    background-color:       #000000;     

}

/**  Unless you have loaded a font called vibrolator, browsers will look to the next font, "Georgia", 
      or if not that, then "Times", etc.   **/
#wikititlebar{
  font-family: vibrolator, Georgia, Times, Palatino, serif;
  font-size: 325%;
} 

#wikisidebar {
  /** Here's where you would add a background image to your SideBar
  /** For my example I have added a /media directory to the pmwiki root directory 
  /**   to be used for your default images.  **/		
  /* background-image: url("/vbapex/media/DarkCircus.jpg");   */
}

#wikibody{
/**   This is the Main area, you can edit in the Wiki
      So if you want to set a color or backtround image do so here:**/  
}


/**  A little something for the Content-Folding I like to add, see the PmWiki site -- Cookbook: ClassTags and UnToggle recipies.  **/
img.toggle {display: inline-block}



/*.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.container::before {
  content: "";
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

    --u:  20px;
    --c1: #fbd163;
    --c2: #e4a228;
    --c3: #d68f2b;
    --c4: #4c302f;
    --gp: 50%/ calc(var(--u) * 10) calc(var(--u) * 17.2);
    --bp: calc(var(--u) * -5) calc(var(--u) * -8.6);
    height: 100vh;
    --bg: 
        conic-gradient(from 0deg at 76.75% 18.25%, var(--c4) 0 60deg, var(--c3) 0 120deg,  var(--c1) 0 120deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from -120deg at 23.5% 18.25%, var(--c3) 0 60deg,  var(--c1) 0 120deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from -32deg at 50% 25%, var(--c2) 0 64deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from 0deg at 77% 33.25%, var(--c1) 0 120deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from -120deg at 23% 33.25%, var(--c4) 0 120deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from -60deg at 50% 42%, var(--c1) 0 60deg, var(--c4) 0 120deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from -60deg at 73% 50%, var(--c3) 0 150deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from -90deg at 27% 50%, var(--c3) 0 150deg, #fff0 0 360deg) var(--gp),
        conic-gradient(from -90deg at 50% 50%, var(--c4) 0 90deg, var(--c1) 0 180deg, #fff0 0 360deg) var(--gp)
        ;
    background: var(--bg), var(--bg);
    background-position: var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    filter: brightness(0.35);
}
*/

:root {
  --sz: 8px; /*** size ***/
  --sp: 20s; /*** speed ***/
  --b1: #2a2523;
  --b2: #1e1c19;
  --b3: #1c1918;
  --c1: #ffeb3b;
  --ts: 50%/calc(var(--sz) * 17.5) calc(var(--sz) * 29.5);
  --b1: #3c3532;
  --b2: #1c1b18;
  --b3: #0c0b0a;
  /*--b4: #0c0b0840;*/
  --b4: #0c0b0ae0;
}

.container {
  position: relative;
  height: 100vh;
}

.container::before {
  content: "";
  position: fixed;
  inset: 0;           /* shorthand for top/right/bottom/left: 0 */
  z-index: 0;
  opacity: 0.2;

  background:

    /* black shadows */
    radial-gradient(circle at 50% 50%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 0% 0%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 0% 100%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 100% 0%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
    radial-gradient(circle at 100% 100%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),

    /* border bottom */
    conic-gradient(from 90deg at 97.5% 67%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts), /*repeated*/
    conic-gradient(from 90deg at 97.5% 67%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
    conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts), 

    /* border top */
    conic-gradient(from 270deg at 2.5% 33%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts), /*repeated*/
    conic-gradient(from 270deg at 2.5% 33%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
    conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%) var(--ts),

    /* bottom */
    conic-gradient(from 116.5deg at 50% 85.5%, var(--b2) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 116.5deg at 50% 85.5%, var(--b2) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from 116.5deg at 50% 85.5%, var(--b2) 0 127deg, #fff0 0 100%) var(--ts),
    conic-gradient(from 120deg at 50% 83%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),

    /* top */
    conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts), /*repeated*/
    conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
    conic-gradient(from -60deg at 50% 17%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),

    /* central gradient */
    conic-gradient(
      from 0deg at 50% 50%, 
      #fff0 0 2.5deg, 
      var(--b3) 3deg 30deg, 
      var(--b1) 0 57.5deg, 
      #fff0 58deg 62.5deg, 
      var(--b2) 63deg 90deg, 
      var(--b1) 0 117deg, 
      #fff0 117.5deg 122.5deg, 
      var(--b2) 123deg 150deg, 
      var(--b3) 0 177.5deg, 
      #fff0 178deg 182.5deg, 
      var(--b1) 183deg 210deg, 
      var(--b3) 0 237.5deg, 
      #fff0 238deg 242.5deg, 
      var(--b1) 243deg 270deg, 
      var(--b2) 0 297deg, 
      #fff0 297.5deg 302.5deg, 
      var(--b3) 303deg 330deg, 
      var(--b2) 0 357.5deg,
      #fff0 358deg 360deg
    ) var(--ts),

    /* bg */
    var(--c1);

  animation: colors var(--sp) linear 0s infinite;
}

@keyframes colors {
  100% { filter: hue-rotate(360deg); }
}

/* make sure content sits above */
.container > * {
  position: relative;
  z-index: 1;
}