/* Base */

@font-face {
    font-family: "Spleen";
    src: url(https://death.town/~amanita/fonts/spleen.ttf) format("truetype");
}

@font-face {
    font-family: "Spleen Small";
    src: url(https://death.town/~amanita/fonts/spleen_small.ttf) format("truetype");
}

@font-face {
    font-family: "Spleen Big";
    src: url(https://death.town/~amanita/fonts/spleen_big.ttf) format("truetype");
}

@font-face {
    font-family: "Spleen Bigger";
    src: url(https://death.town/~amanita/fonts/spleen_bigger.ttf) format("truetype");
}

html,
body {
    background-color: #100;
    min-height: 100%;
    line-height: 1.5;
    background-image: url("images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body {
    color: #fafafa;
    text-shadow: 2px 2px 2px #333;
    font-family: "Spleen";
}

@layer {
   body {
    background-color: #111;
    }
}

::selection {
    background-color:  #2ecc40;
    color: white;
}

/* Glowing */
@-webkit-keyframes glow {
    from {
      text-shadow: 3 -3 1px #404, -2 -2 3px #400, 1 -1 5px #333, 0 0 7px #333, -1 1 8px #333, 2 2 9px #333, -3 3 10px #333;
    }
    to {
      text-shadow: 0 0 1px #200, 0 0 2px #400, 0 0 3px #600, 0 0 4px #800, 0 0 5px #a00, 0 0 6px #800, 0 0 7px #600;
    }

}

@keyframes alarm {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Keyframes for an animation in which the text jitters or shivers uncomfortably */
/* Thanks GPTel ~amanita */
@-webkit-keyframes jitter {
  0%   { transform: translate(0); }
  5%   { transform: translate(-2px, 3px); }
  10%  { transform: translate(2px, -2px); }
  15%  { transform: translate(-3px, 1px); }
  20%  { transform: translate(1px, 4px); }
  25%  { transform: translate(3px, -3px); }
  30%  { transform: translate(-4px, 2px); }
  35%  { transform: translate(-2px, -4px); }
  40%  { transform: translate(4px, 1px); }
  45%  { transform: translate(-1px, 3px); }
  50%  { transform: translate(2px, -5px); }
  55%  { transform: translate(-3px, 4px); }
  60%  { transform: translate(5px, 0); }
  65%  { transform: translate(-2px, 2px); }
  70%  { transform: translate(3px, -3px); }
  75%  { transform: translate(0, 5px); }
  80%  { transform: translate(-4px, -2px); }
  85%  { transform: translate(1px, 4px); }
  90%  { transform: translate(-3px, 3px); }
  95%  { transform: translate(0, -2px); }
  100% { transform: translate(2px, 2px); }
}

/* Responsive content positioning */
/* @media only screen and (min-width: 1020px) /\* Large screens *\/ */
/* { */
/*     body{ */
/*         padding: 10vh 25vw; */
/*     } */
/* } */

/* @media only screen and (max-width: 1020px) and (min-width: 750px) /\* Small screens *\/ */
/* { */
/*     body{ */
/*         padding: 5vh 10vw; */
/*     } */
/* } */

/* @media only screen and (max-width: 750px) /\* Small screens *\/ */
/* { */
/*     body{ */
/*         padding: 2vh 5vw; */
/*     } */
/* } */

/* Headers */
h1{
    font-size: 1.3rem;
    color: #800000;
    font-family: "Spleen";
    /* animation: glow 3s ease-out infinite alternate; */
}
h2{
    font-size: 1.7rem;
    /* background-color: #000; */
    /* text-align: center; */
    text-shadow: 2px 2px 6px #F00000;
    color: #F00000;
    font-family: "Spleen";
    /* animation: glow 3s ease-in infinite alternate; */
}
h3{
    font-size: 1.5rem;
    color: #FF0000;
    font-family: "Spleen Bigger";
    /* animation: glow 3s ease-out infinite alternate; */
}
h4{
    font-size: 1.3rem;
    color: #800080;
    font-family: "Spleen Big";
    /* animation: glow 3s ease-in infinite alternate; */
}

.title{
    margin-bottom: 2.5rem;
    font-size: 2rem;
    font-family: "Spleen Bigger";
}

/* Padding & Margin */
* {margin: 0; padding: 0;}
pre, blockquote, ul, ol, p, table{
    margin: 1rem 0;
}

ul {
    list-style-type: square;
}

li {
    padding: 0px;
    margin: 16px 32px 16px 16px;
}

h1, h2{margin-top: 2rem; line-height: 2rem;}
h3, h4, h5, h6{margin-top: 1rem;}


/* Links  */
a, a:visited {
    color: #01ff70;
    text-decoration: bold;
}

a:hover, a:focus, a:active {
    color: #2ecc40;
    text-decoration: bold;
}

/* Code */
pre {
    font-family: "Courier New";
    padding: .5rem;
    background-color: #333;
    padding: 0.5rem;
    border-radius: 0.2rem;
    font-size: 0.9rem;
    color: #80B;
    overflow-x: auto;
}

code {
    font-family: "Courier New";
    background-color: #000;
    padding: 0.2rem;
    border-radius: 0.2rem;
    font-size: 0.9rem;
    color: #F0F;
}

.org-keyword{
    color: #01ff70;
}

.org-rainbow-delimiters-depth-1{
    color: #2ecc40;
}

.org-rainbow-delimiters-depth-2{
    color: #01ff70;
}

/* Blockquotes */
blockquote {
    border-left: 3px solid #01ff70;
    padding-left: 1rem;
}

/* Tags */
.tag{
    /* display: inline-end; */
    float: right;
    position: relative;
    bottom: 2px;
    color: white;
    font-size: var(--font-size-xsmall);
    margin: 0px 0px -2px;
}

.tag > span{
    font-weight: 400;
    font-size: 0.666rem;
    background-color: #444;
    text-transform: uppercase;
    border-radius: 2px;
    width: fit-content;
    height: auto;
    padding: 1px 2px;
}

/* Keywords */
.todo{
    color: #2ecc40;
}

.done{
    color: #444;
}
.timestamp {
    color: red;
    text-align: center;
}
.timestamp-kwd { color: #f59ea0; }
/* Overflows */
.outline-text-2, .outline-text-3, .outline-text-4{
	  max-width: 100%;
	  overflow-x: auto;
}

/* Table */
tr:nth-child(even) {
    background-color: #333;
}

th, td{
    padding: 0.5rem;
    text-align: center;
}

.underline{
    text-decoration: underline;
}

img{
    max-width: 100%;
    height: auto;
}



/* Styles for org-info.js */

.org-info-js_info-navigation
{
  border-style:none;
}

#org-info-js_console
{
  color:#333333;
  margin:0px;
  background-color:#ffffff;
}

#org-info-js_console-input
{
  background-color:#ffffff;
  border-style:none;
  color:#333333;
  padding-left:10px;
  vertical-align:middle;
}

#org-info-js_console-label
{
  font-size:11px;
  font-weight:bold;
  padding-left:10px;
  font-family:;
  vertical-align:middle;
  animation: glow 2s ease infinite alternate;
}

.org-info-js_console-label-warning
{
  color:#cc0000;
}

#org-info-js_console-container
{
    border: 1px solid #666;
    animation: glow 2s ease infinite alternate;
}

.org-info-js_search-highlight
{
  background-color:#adefef; /* emacs default */
  color:#000000;
  font-weight:bold;
}
/* END STYLES FOR org-info.js */