@charset "utf-8";

/* fonts
@import url(fonts.css);
*/

/* general style */
body    { font: 17px/25px 'Merriweather', serif; display: inline;
          margin: 0; padding: 0; font-weight: 400; color: black; }
a       { color: #8F4B5D; font-weight: 400; }
a:hover { color: #a57575; }

/* headlines */

h1, h2, h3, h4, h5, h6      { font-family: 'Questrial', sans-serif;
                              font-weight: 400; color: #3D3F4F }
h1 a, h2 a, h3 a, h4 a,
h5 a, h6 a                  { text-decoration: none; }
h1 a:hover, h2 a:hover,
h3 a:hover, h4 a:hover      { text-decoration: underline; }
h1                          { margin: 15px 0 25px 0; }
h2                          { margin: 25px 0 10px 0; }
h3                          { margin: 35px 0 10px 0; }
h1                          { font-size: 52px; line-height: 56px; }
h2                          { font-size: 42px; line-height: 44px; }
h3                          { font-size: 36px; line-height: 38px; }

h1 em                       { color: black; font-size: 32px; display: block;
                              margin-left: 25px; margin-top: -15px; }

/* layout elements */
div.container               { max-width: 880px; margin: 48px auto; padding: 0 40px; }
div.header                  { float: left; }
div.navigation              { float: right; }
div.header                  { height: 25px; margin-bottom: 42px; font-size: 40px;}
div.navigation              { height: 25px; margin-bottom: 42px; font-size: 25px;}
div.navigation ul           { margin: 0; padding: 0; list-style: none; }
div.navigation ul li        { display: inline; margin: 0 2px; padding: 0; }
div.body                    { clear: both; margin: 0 30px; line-height: 1.6; }
div.footer                  { margin-top: 55px; font-size: 16px;
                              text-align: right; color: #7b8894; }
div.footer p                { margin: 0; }
div.footer a                { color: #7b8894; }

/* margins and stuff */
p, div.line-block, ul, ol, pre,
    table                       { margin: 15px 0 15px 0; }
dt                              { margin: 25px 0 16px 0; padding: 0; }
dd                              { margin: 16px 0 25px 40px; padding: 0; }
ul ol, ol ul, ul ul, ol ol      { margin: 10px 0; padding: 0 0 0 40px; }
li                              { padding: 0; }
h1 + p.date                     { margin-top: -25px; font-style: italic; }
blockquote                      { font-style: italic; }

/* code formatting.  no monospace because of webkit (bug?) */
pre, code, tt   { font-family: 'Ubuntu Mono', 'Consolas', 'Deja Vu Sans Mono',
                  'Bitstream Vera Sans Mono', 'Monaco', 'Courier New', monospace;
                  font-size: 0.9em; }
pre             { line-height: 1.45; padding: 0;;
                  page-break-inside: avoid;
                  background: #eee;
                  border: 1px solid #ddd;
                  border-radius: 2px;
                  line-height: 1.6;
                  margin-bottom: 1.6em;
                  overflow: auto;
                  padding: 1em 1.5em;
                  display: block;
                  border-left: 3px solid #8F4B5D;
                  overflow-x: auto;}
code, tt        { background: #eee; }

/* tables */
table           { border: 1px solid #ddd; border-collapse: collapse;
                  background: #fafafa; }
td, th          { padding: 2px 12px; border: 1px solid #ddd; }

/* footnotes */
table.footnote          { margin: 25px 0; background: transparent; border: none; }
table.footnote + table.footnote { margin-top: -35px; }
table.footnote td       { border: none; padding: 9px 0 0 0; font-size: 15px; }
table.footnote td.label { padding-right: 10px; }
table.footnote td p     { margin: 0; }
table.footnote td p + p { margin-top: 15px; }

/* blog overview */
div.entry-overview                  { margin: 25px 122px 25px 102px; }
div.entry-overview h1,
div.entry-overview div.summary,
div.entry-overview div.summary p    { display: inline; line-height: 25px; }
div.entry-overview h1               { margin: 0; font-size: 20px;
                                      font-family: 'Merriweather', serif; }
/*div.entry-overview h1:after         { content: " —"; color: black; }*/
div.entry-overview h1 a             { color: #8F4B5D; }
div.entry-overview div.summary,
div.entry-overview div.date,
div.entry-overview div.summary p    { margin: 0; padding: 0; }
div.entry-overview div.detail       { margin-left: 140px; }
div.entry-overview div.date         { float: left; width: 120px; color: #7b8894;
                                      text-align: right; font-style: italic;
                                      font-size: 14px; }

@media only screen and (max-width: 900px) {
    div.entry-overview { margin: 25px 10px 25px 0; }
    div.entry-overview div.detail { margin-left: 130px; }
}

/* other alignment things */
img.align-center                    { margin: 15px auto; display: block; }
.figure.align-center                { text-align: center; }
.figure p.caption                   { font-size: 14px; margin-top: 0; }
.align-center                       { margin: 15px auto; display: block; }
/* set the max width and height to 100% in order to auto scale to parent */
img                                 { max-width:100%; max-height:100% }

/* pagination */
div.pagination          { margin: 36px 0 0 0; text-align: center; }
div.pagination strong   { font-weight: normal; font-style: italic; }

/* tags */
p.tags          { text-align: right; margin-top: 35px; }
ul.tagcloud     { font-size: 16px; margin: 36px 0; padding: 0;
                  list-style: none; line-height: 1.45; text-align: justify }
ul.tagcloud li  { margin: 0; padding: 0 10px; display: inline; }

/* latex math */
span.math img   { margin-bottom: -7px; }

/* strikethrough */
span.strike     { text-decoration: line-through; }

/* mobile */
@media only screen and (max-width: 800px) {
    div.body { padding: 0; margin: 0; }
    div.container { padding: 12px; margin: 0; }
    div.header { height: auto; margin: 0; }
    div.navigation { margin-bottom: 20px; }
    h1 { font-size: 42px; line-height: 44px; }
    h2 { font-size: 36px; line-height: 38px; }
    h3 { font-size: 28px; line-height: 30px; }
}

.mask-container {
  position: absolute;
  bottom: 0;
  opacity: .2;
  z-index: -1;
  width: 30vw;
}
/* mobile vine width, just expand*/
@media only screen and (max-width: 900px) {
  .mask-container {
    width: 100vw;
  }
}

.vine-wrapper {
  height: 100vh;
}

.mask-container.blog-opacity{
  opacity: .07;
}

.color-image {
  position: absolute;
  inset: 0;
  background-image: url("/static/pictures/vine_base/vines_drawing.jpg");
  background-size: cover;

  -webkit-mask-image: url("/static/pictures/vine_base/vine_base_layer_mask_only.png");
  -webkit-mask-size: cover;
  -webkit-mask-position: 0% 0%;
  mask-image: url("/static/pictures//vine_base/vine_base_layer_mask_only.png");
  mask-size: cover;
  mask-position: 0% 0%;

  transition: 
    -webkit-mask-position ;
}

.mask-animation {
  /**
  you need to alter steps(x) with how many frames you have
  If you set it to more than your frames, it'll end up animating
  the mask in a disjointed way
  */
  animation: 
    addColor 700ms steps(4) forwards;
}

@keyframes addColor {
  0% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
  100% {
    /*
    -webkit-mask-position: 100% 0% ;
    mask-position: 100% 0% ;
    */
    -webkit-mask-position: 0% 100% ;
    mask-position: 0% 100% ;
  }
}