/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*#bglight {
  height: 100px;
  width: 100px;
  background: url("/bg/light.png");
  background-size: 100px 100px;
}*/

@font-face {
  font-family: GermaniaOne;
  src: url("fonts/GermaniaOne-Regular.ttf");
}

@font-face {
  font-family: WebDings;
  src: url("fonts/webdings.ttf");
}

@font-face {
  font-family: WingDings;
  src: url("fonts/wingding.ttf");
}

body {
  background-color: #6666ff;
  color: #00ff7b;
  font-family: GermaniaOne;
  /*background-image: #bglight;*/
  background-image: url(img/bg/lightsmall.png);
}

.center {
  text-align: center;
}

.center2 {
  margin: auto;
}

.moon {
  position: fixed;
  width: auto;
  height: auto;
  z-index: 0;
  top: 0;
  right: 0;
  margin-top: 25px;
  margin-right: 5%;
  text-align: center;
}

.swatchclock {
  position: fixed;
  width: 20%;
  height: auto;
  z-index: 0;
  top: 0;
  right: 0;
  margin-top: 175px;
  margin-right: 20px;
}

.sidenav {
  /*height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 10%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  margin-top: 5px;
  margin-left: 11%;
  background-color: #4444cc; /* Black */
  overflow: visible;
  /*padding-top: 20px; */
  padding: 10px;
  border: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  background-image: url(img/bg/darksmall.png);
}

.sidenavlow {
  /*height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 10%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 0; /* Stay on top */
  bottom: 0; /* Stay at the top */
  left: 0;
  margin-bottom: 5px;
  margin-left: 11%;
  background-color: #4444cc;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding: 10px;
  /*padding-top: 20px;*/
  border: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  background-image: url(img/bg/darksmall.png);
}

.mezzo {
  /*height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 17%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 0;
  bottom: 0;
  right: 0;
  margin-bottom: 5px;
  margin-right: 5px;
  background-color: #4444cc;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding: 10px;
  /*padding-top: 20px;*/
  border: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  background-image: url(img/bg/darksmall.png);
}

.mezzo2 {
  background-image:url("img/bg/darksmall.png");
  /*margin-left: 355px;
  margin-right: 355px;*/
  width: 314px;
  height: 321px;
  margin: auto;
  margin-bottom: 20px;
  /*background: #4444cc;*/
  padding: 10px;
  outline: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  text-align: center;
}

 .sidenav a {
/*  padding: 6px 8px 6px 16px; */
  text-decoration: none;
/*  font-size: 25px; */
/*  color: #818181; 
  display: block; */
}

/*@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}*/

.sideblink {
  position: relative;
  left: -5px;
}

.main {
  /*margin-left: 355px;
  margin-right: 355px;*/
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 9px;
  background: #4444cc;
  padding: 10px;
  outline: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  /*background-image: url(/img/bg/darksmall.png);*/
}

.drip { 
  overflow: visible;
  position: absolute;
  left: 20px;
  bottom: -110px; /*Remember to change this to the height of the image I put hanging down. If I wanted something to look like it's peeking out from behind the element, I'd add the border width to this number too.*/
}

/*p {
  background: #4444cc;
  padding: 10px;
  border: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
/*  background-image: url(/img/bg/dark.png); 
}*/

p {
 margin-top: 0px; 
 margin-bottom: 0px;
 padding: 5px;
 text-shadow: 2px 2px #412BAF;
 font-size: 100%;
}

ul {
  
  text-shadow: 2px 2px #412BAF;
  list-style-image: url("img/gifs/arrowspinrsmall.gif");
  margin-left: 40px;
  border-radius: 50%;
}

/*ul {
  text-indent: 40px;
  background: #4444cc;
  padding: 10px;
  border: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
/*  background-image: url(/img/bg/dark.png);
}*/

h1, h2, h3, h4, h5, h6 {
  /*color: #00ff7b;
  padding: 10px;
  border: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  background-image: url(/img/bg/darksmall.png);*/
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  text-shadow: 2px 2px #412BAF;
}

h2 {
  color: #ff00ff;
  /*padding: 10px;
  border: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  background-image: url(/img/bg/darksmall.png);*/
}

.boldtable {
  font-family: sans-serif;
  font-size: 16pt;
  color: #00ff7b;
  background-color: #00ff7b;
  text-shadow: 2px 2px #412BAF;
  border: 3px solid #00ff7b;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.boldtable td {
  font-family: sans-serif;
  font-size: 16pt;
  color: #00ff7b;
  background-color: #4544CD;
  text-shadow: 2px 2px #412BAF;
  padding: 10px;
}

.boldtable th {
  font-family: sans-serif;
  font-size: 16pt;
  color: #00ff7b;
  background-color: #412BAF;
  text-shadow: 2px 2px #1F0C7F;
  padding: 10px;
}

/*Remove the borders from all table elements*/
table, th, td {
  border: none; 
}

/*Apply a background color to the table heading*/
thead {
  background-color: #a7a37e;
}

/*Apply a background color to every other row in the table body*/ 
tbody tr:nth-child(even) {
  background-color: #efecca;
}

/*Apply a background color to every other row in the table footer*/
tfoot tr:nth-child(odd) {
  background-color: #efecca;
} 

hr {
    display:block;
    border:0px;
    margin-left: auto;
    margin-right: auto;
}

.hr-img {
	height:128px;
    width:256px;
    background-image:url("img/divs/rosediv2.png");
}

.hr-text {
  /*line-height: 1em;*/
  position: relative;
  outline: 0;
  border: 0;
  color: #00ff7b;
  text-align: center;
  height: 1em;
  font-size: 3em;
  font-family: WingDings;
  margin: 10px auto;
  /*opacity: .5;*/
  /*&:before {
    content: '';
    /* use the linear-gradient for the fading effect
    // use a solid background color for a solid bar
    background: linear-gradient(to right, transparent, #818078, transparent);*/
    /*position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }*/
  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: #00ff7b;

    /*padding: 0 .5em;
    /*line-height: 5em;
    /* this is really the only tricky part, you need to specify the background color of the container element...*/
    background-color: #4444cc;
  }
}

.feetpix {
  background-image:url("img/bg/darksmall.png");
  /*margin-left: 355px;
  margin-right: 355px;*/
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  /*background: #4444cc;*/
  padding: 10px;
  outline: 4px solid #00ff7b;
  text-shadow: 2px 2px #412BAF;
  text-align: center;
}

.pages {
  /*margin-left: 355px;
  margin-right: 355px;
  margin-top: 9px;
  margin-bottom: 20px;
  /*background: #4444cc;*/
  /*padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;*/
  /*outline: 4px solid #00ff7b;
  /*text-shadow: 2px 2px #412BAF;*/
  /*background-image:url("img/book/openclean.png");
  /*background-size: 1624px;
  background-repeat: no-repeat;
  background-align: center;
  background-size: 840px;*/
  display: flex;
  flex-direction: row;
  /*width: 840px;*/
}

.column {
  flex: 50%;
  /*width: 410px;
  height: 720px;
  padding: 10px;*/
}











a:link {
  color: #ff00ff;
}

a:visited {
  color: #66aaff;
}

a:hover {
  color: #ff0000;
}

a:active {
  color: #00ff7b;
}


/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-8/nat791.cur), auto !important;} /* End https://www.cursors-4u.com */

/* Start offline cursor * {cursor: url(nat791.cur), auto !important;} /* End offline cursor */