@import "black-keys.css";
@import "snippets_onecol.css";
@import "snippets_twocol.css" screen and (min-width: 886px);


.content .outline-1 {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    /* shift background up, then compensate for content with padding */
    position: relative;
    top: -15vh;
    margin: 0 0 -15vh;
    /* torn-paper border */
    border: 0;
    border-top: 50px solid transparent;
    border-image-source: url(images/backgrounds/torn_paper.png);
    border-image-repeat: repeat;
    border-image-slice: 50 fill;
}

.content .outline-1:first-of-type {
    border: none;
    position: static;
    /* padding-top:0; */
    margin: 0;
}

.content .outline-1.tag-intro {
    margin-bottom: 20vh;  /* compensate shift + some extra space */
    height: auto;
}

.content .outline-1.snippet-footer {
    height: auto;
}


/* snippet links */

.content .outline-1 a.clickable-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* hide link text */
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
}

.content .outline-1 {
    /* transition: top .5s; */
}    

.content .outline-1:hover {
    /* top: -200px; */
    /* transition: top .5s; */
    border-image-source: url(images/backgrounds/torn_paper_highlight.png);
}

.content .outline-1:first-of-type:hover {
    background-color: #eeffff;
    /* reinstate dog-ear (gets clobbered by background color) */
    background-image: url(images/backgrounds/dog-ear.png);
    background-repeat: no-repeat;
}

.content .outline-1.tag-intro:hover {
    background-color: transparent;
    background-image: none;
}


/* rss link */

#sidebar a#rss {
    position: absolute;
    top: 0;
    right: 0;
}

#sidebar a#rss img {
    width: 25px;
    height: 25px;
}


/* copyright line */

.snippet-footer h1 {
    text-align: left;
    padding-bottom: 15vh;
}

.snippet-footer h1:after {
    content: "Generated using GNU Emacs and org-mode. \2002  Copyright \00a9  2004-2020 Toby Cubitt";
    font-size: 0.7rem;
    position: relative;
    font-weight: normal;
}

.content:after {
    content: "";
}