/***********************************************************************
** 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.cybertamer.com/pmwiki/media/Vibrolator.ttf") ;
  }



body {
  /** For my example I have added a /media directory to the pmwiki root directory 
      to set the page background use something like:
      background-image: url("/pmwiki/media/background.png");      **/ 	
    /*background-image: url("https://www.cybertamer.com/pmwiki/media/DarkCircus.jpg"); */
    /*background-image: url("https://www.setfiles.org/pmwiki/media/ElyVault.jpg"); */
    /** Now define how to show it: Here I stretch one picture across the whole screen **/  
    background-repeat:      no-repeat;
    background-attachment:  fixed;
    background-size:        100% 100%;   
    background-color:       #000000;      /**  If the image doesn't load right you see the background... **/

}

/**  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; /* changed from absolute */
  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);
}