/*
             * Avara by Raphaël Bastide, with the contribution of Wei Huang, Lucas Le Bihan, Walid Bouchouchi, Jérémy Landes. Distributed by velvetyne.fr.
             * Designer(s): B3-Ana Bogos Esa Le 75
            */
:root {
    --intro: url("/ethel/bg.webp");
    --golden: url("/ethel/golden/bg.webp");
    --inbred: url("/ethel/inbred/bg.webp");
    --preachers: url("/ethel/preachers/bg1.webp");
    --preachers2: url("/ethel/preachers/bg2.webp");
    --perverts: url("/ethel/perverts/bg.webp");
    --willoughby: url("/ethel/willoughby/bg.webp");
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    max-width: 100%;
    font-family: "ding";
    font-size: 1.3em;
}
@font-face {
    font-family: "Avara";
    src: url("https://file.garden/Zj1sfPoh-G9Y8BHe/avara.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "ding";
    src: url("https://file.garden/Zj1sfPoh-G9Y8BHe/elemental.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
section {
    min-height: 100vh;
    position: relative;
    width: 100%;
    padding: 1px;
}
#intro {
    background: var(--intro);
}
#golden {
    background: var(--golden);
}
#inbred {
    background: var(--inbred);
}
#preachers {
    background: var(--preachers);
}
#preachers2 {
    background: var(--preachers2);
}
#perverts {
    background: var(--perverts);
}
#willoughby {
    background: var(--willoughby);
}

#intro,
#golden,
#inbred,
#preachers,
#preachers2,
#perverts,
#willoughby {
    background-size: cover;
}
#preachers2{  background-position: bottom;}
.container {
    border-image-slice: 17 17 17 17;
    border-image-width: 17px 17px 17px 17px;
    border-image-outset: 17px 17px 17px 17px;
    border-image-repeat: repeat repeat;
    border-image-source: url("/ethel/lace.webp");
    border-style: solid;
    background: rgba(185, 144, 92, 0.8);
    width: 750px;
    padding: 0px 5px 0px 5px;
    position: relative;
    margin: 5em auto;
}
h1 {
    font-family: "Avara";
    position: absolute;
}
h2,
h3 {
    font-family: "Avara";
    text-align: center;
}
i {
    background-color: #ffefc0;
    padding: 5px 5px 0px 0px;
    color: #412c0e;
}
.quote {
    display: block;
    padding: 5px;
}

#intro h1 {
    top: -1.6em;
    left: -0.2em;
    color: transparent;
    background: linear-gradient(
        150deg,
        rgba(143, 94, 60, 1) 0%,
        rgba(194, 147, 66, 1) 25%,
        rgba(245, 222, 120, 1) 50%,
        rgba(198, 207, 78, 1) 75%,
        rgba(61, 150, 32, 1) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(1px 1px #3d280d) drop-shadow(-1px -1px #bb8138) drop-shadow(-1px 1px #bb8138)
        drop-shadow(1px -1px #bb8138) drop-shadow(2px 2px white) drop-shadow(-2px -2px white)
        drop-shadow(-2px 2px white) drop-shadow(2px -2px white) drop-shadow(1px 1px #7a4a0d)
        drop-shadow(-1px -1px #7a4a0d) drop-shadow(-1px 1px #7a4a0d) drop-shadow(1px -1px #7a4a0d);
}

#golden h1 {
    top: -1.6em;
    left: -0.2em;
    color: transparent;
    background: linear-gradient(
        150deg,
        rgb(255, 134, 55) 0%,
        rgb(255, 193, 86) 25%,
        rgb(255, 224, 82) 50%,
        rgb(255, 167, 114) 75%,
        #8f5700 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(1px 1px #3d280d) drop-shadow(-1px -1px #bb8138) drop-shadow(-1px 1px #bb8138)
        drop-shadow(1px -1px #bb8138) drop-shadow(2px 2px white) drop-shadow(-2px -2px white)
        drop-shadow(-2px 2px white) drop-shadow(2px -2px white) drop-shadow(1px 1px #7a4a0d)
        drop-shadow(-1px -1px #7a4a0d) drop-shadow(-1px 1px #7a4a0d) drop-shadow(1px -1px #7a4a0d);
}
#golden .container {
    background: rgba(185, 175, 92, 0.8);
}

#inbred h1 {
    top: -1.6em;
    left: -0.2em;
    color: transparent;
    background: linear-gradient(
        150deg,
        rgb(255, 75, 75) 0%,
        rgb(255, 91, 61) 25%,
        rgb(255, 149, 17) 50%,
        rgb(255, 136, 0) 75%,
        #8f5700 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(1px 1px #3d280d) drop-shadow(-1px -1px #bb8138) drop-shadow(-1px 1px #bb8138)
        drop-shadow(1px -1px #bb8138) drop-shadow(2px 2px white) drop-shadow(-2px -2px white)
        drop-shadow(-2px 2px white) drop-shadow(2px -2px white) drop-shadow(1px 1px #7a4a0d)
        drop-shadow(-1px -1px #7a4a0d) drop-shadow(-1px 1px #7a4a0d) drop-shadow(1px -1px #7a4a0d);
}
#inbred .container {
    background: rgba(221, 153, 117, 0.8);
}

#preachers h1 {
    top: -1.6em;
    left: -0.2em;
    color: transparent;
    background: linear-gradient(
        150deg,
        rgb(55, 255, 236) 0%,
        rgb(61, 204, 255) 25%,
        rgb(17, 255, 120) 50%,
        rgb(219, 255, 0) 75%,
        #fff600 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(1px 1px #3d280d) drop-shadow(-1px -1px #bb8138) drop-shadow(-1px 1px #bb8138)
        drop-shadow(1px -1px #bb8138) drop-shadow(2px 2px white) drop-shadow(-2px -2px white)
        drop-shadow(-2px 2px white) drop-shadow(2px -2px white) drop-shadow(1px 1px #7a4a0d)
        drop-shadow(-1px -1px #7a4a0d) drop-shadow(-1px 1px #7a4a0d) drop-shadow(1px -1px #7a4a0d);
}
#preachers .container {
    background: rgba(255, 235, 152, 0.99);
}

#preachers2 h1 {
    top: -1.6em;
    left: -0.2em;
    color: transparent;
    background: linear-gradient(
        150deg,
        rgb(150, 0, 0) 0%,
        rgb(114, 13, 0) 25%,
        rgb(100, 36, 0) 50%,
        rgb(89, 47, 0) 75%,
        #110700 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(1px 1px #4a0000) drop-shadow(-1px -1px #4a0000) drop-shadow(-1px 1px #4a0000)
        drop-shadow(1px -1px #4a0000) drop-shadow(2px 2px white) drop-shadow(-2px -2px white)
        drop-shadow(-2px 2px white) drop-shadow(2px -2px white) drop-shadow(1px 1px #7a4a0d)
        drop-shadow(-1px -1px #7a4a0d) drop-shadow(-1px 1px #7a4a0d) drop-shadow(1px -1px #7a4a0d);
}
#preachers2 .container {
    background: rgba(49, 18, 13, 0.8);
    color: white;
}
#preachers2 td {
    color: black;
}

#perverts h1 {
    top: -1.6em;
    left: -0.2em;
    color: transparent;
    background: linear-gradient(
        150deg,
        rgb(255, 255, 255) 0%,
        rgb(196, 196, 196) 25%,
        rgb(130, 130, 130) 50%,
        rgb(90, 90, 90) 75%,
        #110700 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(1px 1px #000000) drop-shadow(-1px -1px #000000) drop-shadow(-1px 1px #000000)
        drop-shadow(1px -1px #000000) drop-shadow(2px 2px white) drop-shadow(-2px -2px white)
        drop-shadow(-2px 2px white) drop-shadow(2px -2px white) drop-shadow(1px 1px #7a4a0d)
        drop-shadow(-1px -1px #7a4a0d) drop-shadow(-1px 1px #7a4a0d) drop-shadow(1px -1px #7a4a0d);
}
#perverts .container {
    background: rgba(49, 49, 49, 0.8);
    color: white;
}
#perverts td {
    color: black;
}

#willoughby h1 {
    top: -1.6em;
    left: -0.2em;
    font-size: 1.6em;
    color: transparent;
    background: linear-gradient(
        150deg,
        rgb(255, 204, 137) 0%,
        rgb(255, 243, 144) 25%,
        rgb(246, 255, 97) 50%,
        rgb(189, 255, 110) 75%,
        #4fc000 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(1px 1px #5a3d14) drop-shadow(-1px -1px #5a3d14) drop-shadow(-1px 1px #5a3d14)
        drop-shadow(1px -1px #5a3d14) drop-shadow(2px 2px white) drop-shadow(-2px -2px white)
        drop-shadow(-2px 2px white) drop-shadow(2px -2px white) drop-shadow(1px 1px #7a4a0d)
        drop-shadow(-1px -1px #7a4a0d) drop-shadow(-1px 1px #7a4a0d) drop-shadow(1px -1px #7a4a0d);
}
#willoughby .container {
    background: rgba(224, 182, 123, 0.8);
}

.tracklist-title {
    font-size: 1rem;
    font-weight: bold;
    background: #ffe687;
    border: 1px solid #88932f;
    border-bottom: none;
    padding: 4px 8px;
}
.tracklist-title i {
    background: none;
}
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
    border: 1px solid #793a18;
}
thead tr {
    background: #916c3d;
    color: #ffffff;
}
thead th {
    padding: 5px 8px;
    text-align: left;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 0.82rem;
    border-right: 1px solid #725536;
}
thead th:first-child {
    text-decoration: underline;
    cursor: pointer;
}
thead th.right {
    text-align: right;
}
tbody tr:nth-child(odd) {
    background: #c7ce6e;
}
tbody tr:nth-child(even) {
    background: #dde57c;
}
tbody td {
    padding: 4px 8px;
    border-right: 1px solid #9db52b;
    font-family: sans-serif;
    font-size: 0.82rem;
}
tbody td:last-child {
    border-right: none;
    text-align: right;
}
tbody td:first-child {
    text-align: right;
    color: #133108;
    width: 24px;
}
td p {
    margin: 0;
    display: inline-block;
}
td .ft {
    font-size: 0.78rem;
    color: #471818;
}
.total-row td {
    background: #916c3d;
    color: #ffffff;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 0.82rem;
    text-align: right;
    padding: 5px 8px;
    border-top: 1px #793a18 solid;
}
.total-row td:first-child {
    background: #ffe687;
    color: #674617;
    border-top: 1px #793a18 solid;
    text-align: right;
}
.container img {
    width: 30%;
    margin: 5px;
}
.right {
    float: right;
}
.left {
    float: left;
}