catfish --path=%f%d

$color0:   #7B7691; // background
$color1:   #E8E7F3; // text

$c-body-bg:    #FFFFFF; 
$c-body-fg:    #424252; 

$c-a-link:     #9AA12D;
$c-a-hover:    #C2540D;
$c-a-visited:  #A185B9;

$c-code-bg:    #F3F1F2;

$c-about-bg:   #6F6A83;

$c-donate-bg:               #A1B067;
$c-donate-fg:               #E5EDB0;

$c-donate-bg-hover:         #E5EDB0;
$c-donate-fg-hover:         #D91C15;

$c-donate-icon-heart-hover: #D91C15;

$c-sticky-bar-bg:       #88839C;
$c-sticky-bar-fg:       #E8E7F3;
$c-sticky-bar-a-hover:  #E89A67;
$c-sticky-bar-a-hover:  #D7EA8E;

$c-sticky-bar-a-link:   #D2E292;
$c-sticky-bar-a-hover: #EBB795;

$c-find-a-link:    #CDDF86;
$c-find-a-hover:   #E9AF8A;

$c-next-a-link:         #B5D147;
$c-next-a-visited:      #A1B067;
$c-next-a-hover:        #E89A67;

body {
    background-color: $c-body-bg;
    color: $c-body-fg;
}

body>header {
    background-color: $c-body-bg;
}

h1 {
  background: transparent url(/ui/img/rounded-purpy-square.png) 0 1rem no-repeat;
  background-size: 3.2rem 3.2rem;
  padding: 0.5rem 0.5rem 0.5rem 5rem;
}

a {
    font-weight: normal;

    &:link {
        color: $c-a-link;
    }
    &:visited {
        color: $c-a-visited;
    }
    &:hover {
        color: $c-a-hover;
        text-decoration: underline;
    }
}

code { background-color: $c-code-bg;
	margin:0 .2rem 0 35px; ;
}

p>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

li>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

a>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

ul ul,ul ol,ol ol,ol ul{
	margin:1.5rem 0 1.5rem 3.5rem;
}

ol,ul{
	padding-left:5px
}

#about {
    background-color: $c-about-bg;
    color: #ffffff;
}

#banner {
    background-color: #6F6A83;
}

/* fixed header */
#sticky-bar {
    background-color: $c-sticky-bar-bg;
    color: $color1;

    a {
        color: $c-sticky-bar-a-link;
        &:hover {
            color: $c-sticky-bar-a-hover;
        }
    }

}

/* footer */
#find {
    background-color: $color0;
    color: $color1;

    a {
        &:link, &:visited {
            color: $c-find-a-link;
        }
        &:hover {
            color: $c-find-a-hover;
        }
    }

}

/* donate button */
.button.button-primary,
#sticky-bar .button.button-primary,
#find .button.button-primary {
    background-color: $c-donate-bg;
    border-color: $c-donate-bg;
    color: $c-donate-fg;
    padding: 0 2rem;

    &:focus,
    &:hover {
        background-color: $c-donate-bg-hover;
        border-color: $c-donate-bg-hover;
        color: $c-donate-fg-hover;
        text-decoration: none;
        font-weight: 600;

        .icon-heart {
            color: $c-donate-icon-heart-hover;
        }
    }
}

/* download button */
.button.button-dl,#sticky-bar .button.button-dl,#find .button.button-dl{
	background-color:#C5D27D;
	border-color:#C5D27D;
	color:#662984;
	padding:.25rem 2rem 0
}

/* download button hover */
.button.button-dl:focus,.button.button-dl:hover,#sticky-bar .button.button-dl:focus,#sticky-bar .button.button-dl:hover,#find .button.button-dl:focus,#find .button.button-dl:hover{
	background-color:#E5EDB0;
	border-color:#E5EDB0;
	color:#662984;
	text-decoration:none;
	font-weight:600
}

/* download button icon */
.button.button-dl:focus .icon-download,.button.button-dl:hover .icon-download,#sticky-bar .button.button-dl:focus .icon-download,#sticky-bar .button.button-dl:hover .icon-download,#find .button.button-dl:focus .icon-download,#find .button.button-dl:hover .icon-download{
	color:#662984
}