/* The above lines are necessary for liquid integration */

/* Lora Font import */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/* color scheme */
/* gruvbox https://user-images.githubusercontent.com/31720261/147415431-13f6c6af-2f76-46c9-8448-20c71e359fc5.png */
:root {
  /* gruvbox colors */
  --black-darkest:      #242424;
  --black-grey-dark:    #282828;
  --black-grey:         #504945;
  --black-grey-light:   #665C54;
  --grey-light:         #DEDEDE;
  --yellow-unsaturated: #EEBD35;
  --yellow-saturated:   #FABD2F;
  --orange:             #D65D0E;
  --red-light:          #FB4934;
  --red:                #CC241D;
  --green:              #98971A;
  --blue-green:         #689D6A;
  --blue-green-light:   #8EC07C;
  --purple:             #B16286;
  --purple-light:       #D4879C;
  --sky-blue:           #7FA2AC;
  --sky-blue-grey:      #458588;
  --blue-grey:          #83A598;
  --cream:              #E7D7AD;

  /* Background Image */
  --newspaper-background: url(https://moofy.org/images/newspaper_background.jpg);

  /* Active Theme */
  --primary-text:           var(--grey-light); 
  --background:             var(--cream); 
  --foreground:             var(--black-grey-dark);
  --code-block-background:  var(--black-grey);
  --separator:              var(--black-grey-light);
  --emph:                   var(--yellow-unsaturated);
  --unemph:                 var(--black-grey-light);
  --link:                   var(--purple-light);
  --link-hover:             var(--purple);
  --header:                 var(--sky-blue);
  --string:                 var(--green);
  
  --background-img:         var(--newspaper-background);

  --monospace-font: 'Source Code Pro', DejaVu Sans Mono, Roboto Mono, monospace;
  --serif-font: Lora, "Times New Roman", Times, serif;
  --sans-serif-font: Helvetica, Arial, sans-serif;

  --font-size-standard: 16px;
  --font-size-large: calc( var(--font-size-standard) + 4px );
  --font-size-small: calc( var(--font-size-standard) - 2px );
}

/* Major Components */

code {
  font-family: var(--monospace-font);
  font-style: normal;
  font-size: var(--font-size-small);
}

html, body { 
  height: 100%; 
  margin: 0; 
}

body {
  background-color: var(--background);
  background-image: var(--background-img);
  font-family: var(--sans-serif-font);
  font-size: var(--font-size-standard); 
  color: var(--primary-text);
}

main {
  display: flex;
  justify-content: center;
  flex-flow: column;
  background: var(--foreground); 
  line-height: unset !important;
  padding-right: 2vw;
  padding-left: 2vw;
  padding-top: 3vh;
  margin: 1em auto;
  border: 2px solid var(--grey-light);
  text-align: left;
}

main > header {
  flex: 0 1 auto;
  padding-bottom: 1em;
  border-bottom: 1px dashed var(--separator);
}

#contact-container {}

#contact {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

#contact > li {}

header p {
  text-align: left;
  margin: 0;
}

main > footer {
  text-align: center;
  font-family: var(--serif-font);
  font-style: italic;
  width: 100%;
  border-top: solid 2px var(--separator);
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 2vh;
  flex: 0 1 auto;
}

main > .content {
  flex: 1 2 auto;
  text-align: justify;
}

.menu {
  display: inline;
  margin-top: 1em;
  margin-bottom: 1em;
}

.menu > ul {
  margin-top: 6px;
  margin-bottom: 6px;
  padding-left: 0px;
}

.menu > ul > li {
  display: inline;
  margin-right: 5px;
}

.menu > ul > li > a {
  text-decoration: none;
}

/* Mobile Support */

@media only screen and (min-width: 1500px)
{
  main {
    width: 40%;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1500px)
{
  main {
    width: 60%;
  }
}

@media only screen and (max-width: 1000px)
{
  body {
    background: var(--foreground);
  }

  main {
    padding-top: 1vw;
    width: 94%;
    padding-left: 3%;
    padding-right: 3%;
    margin: 0;
    border: none;
  }

  h1 { font-size: 1.5em; }
  h2 { font-size: 1.4em; }
  h3 { font-size: 1.3em; }
  h4 { font-size: 1.2em; }

  .menu { font-size: var(--font-size-small); }
}

@media only screen and (max-width: 250px)
{
  #contact > li {
    width: 100%;
    font-size: var(--font-size-small);
  }
}

/* Animations */

.letter-flip-animation {
  position: relative;
}
.letter-flip-animation span {
  position: relative;
  display: inline-block;
  font-size: 40px;
  color: #fff;
  text-transform: uppercase;
  animation: flip 2s infinite;
  animation-delay: calc(.2s * var(--i))
}
@keyframes flip {
  0%,80% {
    transform: rotateY(360deg) 
  }
}

/* Micro Rules */

h1, h2, h3, h4 {
  font-family: var(--sans-serif-font);
  color: var(--header);
}

a {
  text-decoration: none;
  color: var(--link);
  font-family: var(--monospace-font);
}

a:hover {
  color: var(--link-hover);
}

.normal { 
  color: var(--primary-text);
  font-size: var(--font-size-standard);
  font-family: var(--sans-serif-font);
}

.emph { color: var(--emph); }
.unemph { color: var(--unemph); }
.mono { font-family: var(--monospace-font); }
.string { color: var(--string); }
.small { font-size: var(--font-size-small); }
.serif { font-family: var(--serif-font); }
.italic { font-style: italic; }
.fs-normal { font-style: normal; }
.largefont { font-size: var(--font-size-large); }
.green { color: var(--green); }
.red { color: var(--red); }
.quote {
    font-family: var(--serif-font);
    font-style: italic;
    font-size: var(--font-size-small);
}

pre {
  background-color: var(--code-block-background);
  border: 1px dashed var(--separator);
  padding: 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow:auto;
}

img {
  width: 80%;
  margin-left: 10%;
  border: 1px dashed var(--separator);
  padding: 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}


iframe {
  width: 98%;
  height: 22em;  
  max-height: 30em;
  border: 1px dashed var(--separator);
  padding: 8px;
  margin-bottom: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.feed-recomendation {
  border-top: 1px dashed var(--separator);
  padding-top: 1em;
}

.posts {
  font-family: var(--monospace-font);
  font-size: var(--font-size-small);
}

blockquote {
  border-left: unset;
  margin: unset;
  font-size: var(--font-size-small);
}

/* Table style */
audio {
  width: 90%;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

td {
  border: 1px dashed var(--separator);
}

caption {
  display: none;
}

table a {
  color: white;
}