@font-face {
    font-family: "JunicodeCondensed";
    src: url("/static/fonts/Junicode-RegularCondensed.ttf");
}
@font-face {
    font-family: "JunicodeCondensed";
    src: url("/static/fonts/Junicode-BoldCondensed.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "JunicodeRegular";
    src: url("/static/fonts/Junicode.ttf");
}

body {
    background: #c0c0c0;
    color: black;
    font-family: JunicodeRegular, Times New Roman, Serif;
    font-size: 1em;
    margin: 0;
}

/* what's up */
#content {
    min-height: 75vh;
}

@media (max-width: 900px) {
    body {
        font-size: 0.9em;
    }
    li.cup-item {
        padding-top: 4em !important;
    }
    li.cup-item div.cup-content strong.cup-subject {
        font-size: 1.4em !important;
/*        font-weight: 600 !important;*/
    }
    li.cup-item div.cup-content div.cup-body {
/*        font-size: 1em;*/
/*        line-height: 1.4em !important;*/
    }
}

/* More good colors

#401818
#2b0000

*/

h1#title {
    color: rgb(131 135 122 / 13%);
    text-align: center;
    letter-spacing: -0.1em;
}

div.warning {
/*    text-align: center;*/
    font-size: 0.9em;
}

div.warning.top {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: right;
    padding-right: 4em;
}

div.warning.bottom {
    margin-top: 1em;
    text-align: center;
    padding: 0;
}

/* .cup-subject::before {
    content: "⚘ ";
    } */
ul.cup-list {
    list-style-type: none;
    padding-left: 3px;
    padding-top: 2em;
    padding-right: 1em;
    border-left: 1px rgba(255,255,255,0.1) solid;
    margin-left: 2em;
}

@media (min-width: 900px) {
    ul.cup-list {
        max-width: 800px;
/*        margin: 0 auto;*/
    }
}
@media (max-width: 899px) {
    ul.cup-list {
        max-width: 80vw;
/*        margin: 0 auto;*/
    }
}

ul.cup-list li.cup-item {
    padding-top: 2em;
    padding-right: 10%;
    padding-left: 1em;
    padding-bottom: 1em;
}

ul.cup-list li.date-change {
    margin-top: 2em;
    font-size: 1.35em;
    /*text-decoration: underline;*/
}

li.cup-item div.cup-content {
    /*text-align: left;*/
    padding: 2em;
    border-radius:3px;
    transition: 0.5s;
}
li.cup-item div.cup-content:hover {
    transition: 0.5s;
    background: white;
}

li.cup-item div.cup-content div.cup-body {
    line-height: 1.3em;
    vertical-align: top;
/*    text-indent: 3em;*/
    display: block;
    letter-spacing: -0.2px;
    text-align: justify;
    margin-left: 1em;
}
li.cup-item div.cup-content div.cup-body p {
    margin-bottom: 0;
    margin-top: 0;
}

li.cup-item div.cup-content strong.cup-subject {
    font-weight: normal;
    color: #401818;
    font-size: 1.2em;
    line-height: 1em;
    vertical-align: top;
    margin: 0 auto;
    text-align: left;
    display: block;
}

li.cup-item div.cup-content .cup-subject-shadow {
    position: relative;
    top: -20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    filter: blur(5px);
}

li.cup-item.row-one div.cup-content .cup-subject-shadow {
    background: radial-gradient(circle at center, white, transparent 40%), 
                conic-gradient(from 45deg, #ffcece 52deg, #ffffff 65deg, #e6f6e4 120deg 307deg, #fff000 353deg);
}

li.cup-item.row-two div.cup-content .cup-subject-shadow {
    background: radial-gradient(circle at center, white, transparent 40%), 
                conic-gradient(from 45deg, #e6f6e4 52deg, #ffffff 65deg, #ffcece 120deg 307deg, #fff000 353deg);
}

li.cup-item.row-three div.cup-content .cup-subject-shadow {
    background: radial-gradient(circle at center, red, transparent 40%),
                conic-gradient(from 45deg, cyan 52deg, blue 65deg, rgba(0, 255, 100, 0.2) 120deg 307deg, #fff000 353deg);
}
    /*background: radial-gradient(circle at center, #001420, transparent 40%),*/
    /*conic-gradient(from 45deg, rgba(200,0,200,0.1) 52deg, rgba(0, 205, 50, 0.66) 65deg, #e6f6e4 120deg 307deg, #fff000 353deg);*/

li.cup-item.row-four div.cup-content .cup-subject-shadow {
    background: radial-gradient(circle at center, blue, transparent 40%),
                conic-gradient(from 45deg, red 52deg, cyan 65deg, rgba(0, 255, 100, 0.2) 120deg 307deg, #fff000 353deg);
}

li.cup-item div.cup-content div.cup-body strong {
    color: #17c000;
}

li.cup-item .cup-meta {
/*    padding-left: 25%;*/
    padding-top: 1.5em;
    margin-left: 2em;
}

li.cup-item .cup-meta .cup-create-date {
/*    letter-spacing: -1px;*/
}

li.cup-item .cup-meta .cup-du-initials {
    font-size: .7em;
    line-height: 1em;
/*    color: #17c000;*/
    /*font-weight: 1000;*/
}

span.flower {
    display: none;
}
span.afterflower {
    display: none;
}

.pagination {
    font-size: 1.1em;
    text-align: center;
    margin-top: 4em;
}

/* Kiss form */

/* Disabled the kisses */
div.cup-kisses {
    display: none;
}

div.cup-kisses {
    text-align: left;
    font-size: 1em;
    margin-top: 0;
    line-height: 1em;
    vertical-align: bottom;
    color: #17c000;
}

div.cup-kisses span.kiss-divider {
    padding-left: .7em;
    padding-right: 0em;
}

form.kiss-form {
    display: inline;
}

form.kiss-form input[type="submit"] {
    background: transparent;
    font-size: 1.2em;
    cursor: pointer;
    border: 0;
}

form.kiss-form input[type="submit"]:hover {
    color: #17c000;
}

/* Announce visit form */
form.announce-visit-form input[type="submit"] {
    display: div;
    background: transparent;
    color: blue;
    font-size: 0.7em;
    cursor: pointer;
    border: 0;
}

@media (max-width: 1500px) {
    form.announce-visit-form input[type="submit"] {
        font-size: 1em;
    }
}

form.announce-visit-form input[type="submit"]:hover {
    color: #9f00ff;
}

.announce-visit-button {
    font-family: Junicode;
}

.half-hour,
.last-day {
    /*margin-top: 2.5em;*/
    /*font-size: 0.85em;*/
    color: blue;
/*    color: #ba463f;*/
}

.spacer {
    color: #ccb7b7;
    text-align: right;
    padding-top:400px;
    font-family: monospace;
}

footer {
    margin-top: 3em;
    width: 100%;
    text-align: right;
}
footer a {
/*    color: white;*/
    color: #81a0ff;
    text-decoration: none;
    padding: 4px;
    padding-left: 6px;
    font-size: .7em;
    display: inline-block;
    background: black;
}
footer a:hover {
    color: blue;
    border-bottom: 1px rgba(0,255,0,0.3) solid;
}
.momey-shadow {
    position: absolute;
    right: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    filter: blur(5px);
    background: radial-gradient(circle at center, red, transparent 40%),
                conic-gradient(from 45deg, cyan 52deg, blue 65deg, rgba(0, 255, 100, 0.2) 120deg 307deg, #fff000 353deg);
}


ul, ol, dl {
    padding-left: 4em;
    text-indent: 0;
    line-height: 1;
    padding-bottom: .5em;
    padding-top: .5em;
}

.cup-body h1, .cup-body h2, .cup-body h3, .cup-body h4 {
    font-size: 1em;
    margin: 0;
    padding: 0;
    text-decoration: underline;
    text-indent: 0;
    text-align: center;
}