/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */
/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */
/* basic elements */
/* 
////// self - citations below

 'lit' from Tanya “sunshinexoxx” Johnson


////// image citations below
Fire title gif “Beautiful Fiery Wall” and single flame at footer“Realistic flame on Transparent Tackground” released under Creative Commons License cc0 and courtesy of 
©ACEGIF.COM https://acegif.com/fire-on-gifs/


Smoke texture by lakela, with the requirement that if published I send her a link. 
https://www.deviantart.com/lakela

Font For title overlay is 
California Sun
Desktop license purchased from https://fontkong.com/product/california-sun/
overlaytemplate
iksa_boyz@yahoo.co.id


Font used in body is Sell Your Soul Font By Chris Hansen.
https://www.1001fonts.com/sell-your-soul-font.html
Update 2020: This font is free for commercial use and you are encouraged to make a donation to the koala hospital in NSW if you wish. 

Sincerely
Christopher


I made a 10$ donation to the little chlamydia riddled fluffers, I encourage everyone else to do so too:
https://www.koalahospital.org.au/

*/
* {
  margin: 3px;
  padding: 3px;
  font-size: 62.5%;
  position: relative;
}
@font-face {
  font-family: coronos;
  src: url("Song Of Coronos.ttf.ttf");
}
@font-face {
  font-family: souled;
  src: url("Sell Your Soul copy.ttf");
}
a:link, abbr, a:visited {
  text-decoration: none;
  color: rgba(234, 104, 14, 1);
}
a:hover, a:active, abbr {
  text-decoration: none;
  color: rgba(230, 59, 12, 1);
}
footer, ul li a:hover {
  vertical-align: middle;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: rgba(225, 29, 1, .25);
  background: radial-gradient(rgba(125, 29, 1, .3) 0%, rgba(225, 29, 1, .2) 10%);
  box-shadow: 0 0 100px rgba(225, 29, 1, .7);
}
h1, h2, h3 {
  font-family: souled;
  font-kerning: 22em;
  color: rgba(236, 224, 188, .8);
}
p {
  font-family: souled;
  color: #ECE0BC;
  font-size: 12em;
  padding: 10px;
  align-content: center;
}
html::before {
  content: url("intro920_280.png");
  position: absolute;
  display: inline-block;
  width: 920px;
  top: 45px;
  left: 50%;
  margin-left: -320px;
  z-index: 2;
}
html {
  background-image: url("a_smoke_texture_1_by_lakela_d6mja5t.jpg");
  background-repeat: no-repeat;
  z-index: -1;
}
html::after {
  content: url("ezgif.com-optimize.gif");
  position: absolute;
  width: 900px;
  display: inline-block;
  left: 50%;
  margin-left: -300px;
  top: 60px;
  z-index: 1;
}
.page-wrapper {
  padding: 10px;
  background-color: rgba(25, 25, 27, .4);
  font-family: souled;
}
.wrapper {}
body {
  background: linear-gradient(180deg, rgba(27, 25, 25, 0.4) 60%, rgba(190, 94, 31, 0.4) 100%);
  text-align: center;
  margin-left: 300px;
  width: auto;
  z-in: 0;
}
header {
  width: auto;
  height: auto;
  font-size: 1em;
  top: 300px;
}
h1 {
  font-size: 13em;
  top: -150px;
}
header h2 {
  font-size: 16em;
  width: auto;
}
header h2 {
  width: auto;
  margin-top: 35px;
}
h3 {
  padding: 10px 30px;
  margin: 0 -30px 20px;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  color: #ECE0BC;
  border-radius: 5px;
  background: radial-gradient(#060200, #F36F2C);
}
/*all this is bar gradient*/
h3::before, h3::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent #C9602B;
}
h3::after {
  left: auto;
  right: 0;
  border-width: 0 0 10px 10px;
}
/*box control for hexs*/
ul li {
  width: 120px;
  height: 69.28px;
  background-color: rgba(39, 35, 35, 1);
  margin: 34.64px 0;
  box-shadow: 0 0 120px rgba(235, 95, 12, .55);
  z-index: 0;
}
/*diamond shape and size*/
ul li::before, ul li::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 86px;
  height: 86px;
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.0);
}
/*diamond positioning*/
ul li::before {
  top: -43px;
}
ul li::after {
  bottom: -43px;
}
/*top box on sidebar, now over HC*/
.design-selection nav ul {}
/*this controls positioning of HC*/
.design-selection nav li {
  display: inline-block;
  z-index: 0;
  font-size: 33em;
  border: none;
}
/*select a design*/
.select {
  display: inline-block;
  width: 150px;
  top: 15px;
}
/*A demonstration*/
.summary p:nth-child(1) {
  width: auto;
  height: auto;
  text-align: center;
  margin-top: 15px;
  padding-bottom: 0px;
  top: 100px;
}
/*download example*/
.summary p:nth-child(2) {
  top: 0px;
  margin-top: 10px;
  font-size: 10em;
}
.intro {
  padding-top: 200px;
  background-color: rgba(111, 186, 68, 0);
  text-align: center;
}
.summary {
  text-align: center;
}
.preamble {
  margin-top: 250px;
}
.main, .preamble {
  display: inline-block;
  width: auto;
}
.explanation {
  background-color: rgba(210, 201, 86, 0);
}
.sidebar {
  position: absolute;
  width: 300px;
  left: -300px;
  top: 23px;
}
.design-selection {
  display: inline-block;
}
.design-name {
  display: block;
  font-size: 1.2em;
}
.designer-name {
  display: inline-block;
  font-size: .8em;
}
.archives {
  display: inline-block;
  width: 150px;
  top: 5px;
}
.design-archives {}
/*this controls position honeycomb*/
.design-archives nav li {
  display: inline-block;
  text-align: center;
  z-index: 0;
  font-size: 35em;
}
.resources {
  display: inline-block;
  top: -45px;
  margin-top: 60px;
  width: 150px;
}
.indicator {}
.viewall a {
  font-size: 1.5em;
  display: inline-block;
}
.next a {
  font-size: 1.5em;
  display: inline-flex;
  text-align: center;
}
.view-css, .css-resources, .zen-faq, .zen-submit, .zen-translations {
  display: inline-block;
  vertical-align: middle;
  top: -40px;
  font-size: 40em;
  width: 120px;
  height: 69.28px;
  background-color: rgba(39, 35, 35, 1);
  margin: 34.64px 0;
  box-shadow: 0 0 100px rgba(235, 95, 12, .55);
  z-index: 0;
}
.zen-faq {
  font-size: 50em;
}
.requirements {
  padding-bottom: 250px;
}
.requirements::after {
  content: url("fire-65 (1).gif");
  position: absolute;
  transform: scale(.7);
  top: 230px;
  left: 50%;
  margin-left: -200px;
  width: auto;
  background-position: 50%;
  z-index: 2;
}
footer {
  top: 43px;
  font-size: 13em;
  width: auto;
}
.zen-validate-css {}
.zen-license {}
.zen-accessibility {}
.zen-github {}
.indicator {}