/***********************************************************************
** 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: 30px;
  --hue: hue-rotate(170deg);
  --opacity: 0.3;
  --c1: #92472f;
  --c2: #d2562f;
  --c3: #ffbc58;
  --cs: #6b2e1b;
  --gp: 50% / calc(var(--u) * 12) calc(var(--u) * 12.8);
  filter: var(--hue);
  opacity: var(--opacity);
  background:
    repeating-conic-gradient(
        from 61.93deg at 75% 36.5%,
        var(--c1) 0%,
        var(--c1) 2%,
        var(--cs) 16%,
        #fff0 0% 100%
      )
      var(--gp),
    repeating-conic-gradient(
        from 118.07deg at 75% 87.5%,
        var(--c3) 0% 34.5%,
        #fff0 0% 100%
      )
      var(--gp),
    repeating-conic-gradient(
        from 118.07deg at 50% 75%,
        #fff0 2%,
        var(--cs) 17.15%,
        #fff0 0% 100%
      )
      var(--gp),
    repeating-conic-gradient(
        from 61.93deg at 50% 50%,
        var(--c3) 0% 15.59%,
        var(--c2) 0% 32.79%,
        #fff0 0% 100%
      )
      var(--gp),
    repeating-conic-gradient(
        from -118.07deg at 25% 12.5%,
        var(--c2) 0% 32.79%,
        var(--c1) 0% 50%,
        #fff0 0% 100%
      )
      var(--gp),
    repeating-conic-gradient(
        from -61.93deg at 25% 87.5%,
        #fff0 0 67.25%,
        var(--c2) 0% 100%
      )
      var(--gp),
    repeating-conic-gradient(
        from -61.93deg at 50% 75%,
        #fff0 0% 66.5%,
        var(--c1) 0% 84.25%,
        var(--c3) 0% 100%
      )
      var(--gp),
    repeating-conic-gradient(
        from -61.93deg at 25% 37.5%,
        var(--c3) 0% 34.5%,
        var(--c1) 0% 67.25%,
        var(--c2) 0% 100%
      )
      var(--gp);
}