body {
    font-family :  'Roboto Condensed', sans-serif ;
    font-size : 14pt ;
    background-color : white ;
    color : #111 ;
    width : 80% ;
    min-width : 360px ;
    max-width : 800px ;
    min-height : 200px ;
    margin : 5px auto ;
    display : block ;
}
.wrapper {
    padding : 1em ;
    border : thin solid #72899a ;
    border-radius : 5px ;
}

a :link    { color : blue ; text-decoration : none ;      }
a :hover   { color : blue ; text-decoration : underline ; }
a :visited { color : blue ;                               }

h1 a { color : inherit !important }
h2 a { color : inherit !important }
h3 a { color : inherit !important }
h4 a { color : inherit !important }
h5 a { color : inherit !important }
h6 a { color : inherit !important }

pre {
    margin : 2em 1em 2em 4em ;
}

figure {
    margin : 10px ;
    padding : 5px ;
    border : 1px solid #AAA ;
    border-radius : 5px ;
}
figure img {
    width : 100% ;
    height : auto ;
    border-radius : 5px ;
}

header#banner {
    background-repeat : no-repeat ;
    background-size : contain ;
    background-position : center ;
    background-image : url("/images/Fossil FM Logo 400.png") ;
    min-height : 400px ;
    gap : 1ch ;
    border-radius : 5px 5px 0 0 ;
}
header#banner h1 {
    color : #000 ;
    /*font-family :  'Roboto Slab', serif ;*/
    font-family :  'Roboto Condensed', sans-serif ;
    font-size : 45pt ;
    font-weight : 600 ;
    text-align : center ;
    text-decoration : none ;
    display : none ;
}


footer.body {
    padding : 1em ;
    text-align : center ;
/*
    border : thin solid #72899a ;
    border-radius : 5px ;
*/
}
div.backtotop {
    margin : 10px 5px ;
    font-size : 75% ;
    text-align : right ;
}

#menu li {
    display : inline ;
}

#post-list {
    list-style : none ;
    margin-bottom : 1em ;
    margin-top : 1em ;
    padding-left : 0 ;
}
#post-list li  {
    margin-top : 0 ;
    margin-bottom : 1em ;
}
#post-list li + li {
    border-top : 1px solid #888 ;
    clear : both ;
}

#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    font-family :  'Roboto Slab', serif ;
    margin-top : 10px ;
}

#by-author {
    border-top : 1px solid #888 ;
}
#by-author #post-list h2 {
    font-size : 18pt ; /* h2 is 21pt */
}

footer.post-info {
    min-width : 60px ;
    max-width : 200px ;
    border : 1px solid #666 ;
    border-radius : 5px ;
    float : right ;
    margin-left : 5px ;
    padding : 10px 5px 20px 5px ;
}

nav.neighbor {
    display : flex ;
    padding : 5px ;

    border : 1px solid #666 ;
    border-radius : 5px ;
}
nav.neighbor span {
    width : 100% ;
}
nav.neighbor span.prev {
    text-align : left ;
}
nav.neighbor span.next {
    text-align : right ;
}


div.grid {
  display : grid ;
}
div.flex {
  display : flex ;
}

span.hidden,
div.hidden {
    display : none !important ;
}


#audio-player-container {
    max-width : 500px ;
    min-height : 50px ;
    border : 3px solid #ed1c24 ;
    border-radius : 4px ;
    margin : 0 auto ;
    padding : 0 ;
    display : flex ;
    flex-direction : row ;
    justify-content : space-between ;
    align-items : center ;
}
#audio-player-container > * {
    margin-left : 10px ;
    margin-right : 5px ;
}
#audio-player-container > *:last-child {
    margin-right : 5px ;
}
#audio-player-container audio {
    display : none ;
}

#audio-player-container svg#play-icon {
    background-color : transparent ;
    border : 0 ;
    height : 28px ;
    width : 28px ;
    flex-shrink : 0 ;
    vertical-align : text-top ;
    fill : #000 ;
}
#audio-player-container svg#play-icon:hover {
}
#audio-player-container svg#play-icon path {
    d : path("M239.96875,128a15.9,15.9,0,0,1-7.65625,13.65625L88.34375,229.64062A15.9978,15.9978,0,0,1,64,215.99219V40.00781A15.99781,15.99781,0,0,1,88.34375,26.35937L232.3125,114.34375A15.9,15.9,0,0,1,239.96875,128Z") ;
}
#audio-player-container svg#play-icon.playing path {
    d : path("M216,48V208a16.01833,16.01833,0,0,1-16,16H164a16.01833,16.01833,0,0,1-16-16V48a16.01833,16.01833,0,0,1,16-16h36A16.01833,16.01833,0,0,1,216,48ZM92,32H56A16.01833,16.01833,0,0,0,40,48V208a16.01833,16.01833,0,0,0,16,16H92a16.01833,16.01833,0,0,0,16-16V48A16.01833,16.01833,0,0,0,92,32Z") ;
}

/* https://tympanus.net/codrops/2020/03/31/css-only-marquee-effect/ */
#audio-player-container span#now-playing-container {
    display : inline-block ;
    overflow : hidden ;
    white-space : nowrap ;
    font-size : 28px ;
    max-width : 350px ;
    flex-grow : 1 ;
    --offset : 50px ; /* "#now-playing-inner > span" padding +  "> *" margin-left */
    --move-initial : calc(-25% + var(--offset)) ; /* 25% based on 4 identical items */
    --move-final : calc(-50% + var(--offset)) ; /* 50% based on 4 identical items */
}

#audio-player-container span#now-playing-container > span#now-playing-inner {
    width : fit-content ;
    display : flex ;
    justify-content : space-around ;
    align-items : center ;
    transform : translate3d(var(--move-initial), 0, 0) ;
    /* animation properties */
    animation-name : scroll-text ;
    animation-delay : 0s ;
    animation-duration : 20s ;
    animation-iteration-count : infinite ;
    animation-timing-function : linear ;
    animation-play-state : paused ;
}
#audio-player-container span#now-playing-container > span#now-playing-inner > span.songinfo {
    display : inline-block ;
    padding : 0 40px ;
}
@keyframes scroll-text {
    0% {
        transform : translate3d(var(--move-initial), 0, 0) ;
    }
    100% {
        transform : translate3d(var(--move-final), 0, 0) ;
    }
}

#audio-player-container span#now-playing-container span#now-playing > span.ellipsis:nth-of-type(1) {
    animation-name : spin-ellipsis-one ;
}
#audio-player-container span#now-playing-container span#now-playing > span.ellipsis:nth-of-type(2) {
    animation-name : spin-ellipsis-two ;
}
#audio-player-container span#now-playing-container span#now-playing > span.ellipsis:nth-of-type(3) {
    animation-name : spin-ellipsis-three ;
}
#audio-player-container span#now-playing-container span#now-playing > span.ellipsis {
    visibility : hidden ;
    animation-duration : 2000ms ;
    animation-iteration-count : infinite ;
    animation-timing-function : steps(1) ;
    animation-fill-mode : forwards ;
    animation-direction : normal ;
    animation-play-state : paused ;
}
@keyframes spin-ellipsis-one {
    0% {
        visibility : hidden ;
    }
    25% {
        visibility : visible ;
    }
}
@keyframes spin-ellipsis-two {
    0% {
        visibility : hidden ;
    }
    50% {
        visibility : visible ;
    }
}
@keyframes spin-ellipsis-three {
    0% {
        visibility : hidden ;
    }
    75% {
        visibility : visible ;
    }
}

#audio-player-container .time {
    display : inline-block ;
    text-align : center ;
    font-size : 28px ;
    vertical-align : middle ;
    user-select : none ;
}

#audio-player-container svg#volume-icon {
    border : 0 ;
    background-color : transparent ;
    vertical-align : text-top ;
    height : 28px ;
    width : 28px ;
    flex-shrink : 0 ;
    fill : #000 ;
}
#audio-player-container svg#volume-icon:hover {
}
#audio-player-container svg#volume-icon.high path {
    d : path("M159.99414,31.99707v192a7.99386,7.99386,0,0,1-12.90625,6.3125l-69.84375-54.3125h-45.25a16.01583,16.01583,0,0,1-16-16v-64a16.01583,16.01583,0,0,1,16-16h45.25l69.84375-54.3125a7.99451,7.99451,0,0,1,12.90625,6.3125Zm32,64.00293a8.00039,8.00039,0,0,0-8,8v48a8,8,0,0,0,16,0V104A8.00039,8.00039,0,0,0,191.99414,96Zm32-16a8.00039,8.00039,0,0,0-8,8v80a8,8,0,0,0,16,0V88A8.00039,8.00039,0,0,0,223.99414,80Z") ;
}
#audio-player-container svg#volume-icon.medium path {
    d : path("M159.99414,31.99707v192a7.99386,7.99386,0,0,1-12.90625,6.3125l-69.84375-54.3125h-45.25a16.01583,16.01583,0,0,1-16-16v-64a16.01583,16.01583,0,0,1,16-16h45.25l69.84375-54.3125a7.99451,7.99451,0,0,1,12.90625,6.3125Zm32,64.00293a8.00039,8.00039,0,0,0-8,8v48a8,8,0,0,0,16,0V104A8.00039,8.00039,0,0,0,191.99414,96Z") ;
}
#audio-player-container svg#volume-icon.low path {
    d : path("M159.99414,31.9971v192a7.99386,7.99386,0,0,1-12.90625,6.3125L77.24414,175.9971h-45.25a16.01582,16.01582,0,0,1-16-16v-64a16.01583,16.01583,0,0,1,16-16h45.25l69.84375-54.3125a7.99451,7.99451,0,0,1,12.90625,6.3125Z") ;
}
#audio-player-container svg#volume-icon.muted path {
    d : path("M183.97656,152V104a8,8,0,0,1,16,0v48a8,8,0,1,1-16,0Zm40-72a8.00039,8.00039,0,0,0-8,8v80a8,8,0,1,0,16,0V88A8.00039,8.00039,0,0,0,223.97656,80ZM53.91992,34.61813A8.0006,8.0006,0,1,0,42.08008,45.3818L73.55127,80H32A16.01833,16.01833,0,0,0,16,96v64a16.01833,16.01833,0,0,0,16,16H77.25488l69.834,54.31445A7.99958,7.99958,0,0,0,160,224V175.09372l42.08008,46.28808a8.0006,8.0006,0,1,0,11.83984-10.76367Zm92.16016,77.59277A8.0004,8.0004,0,0,0,160,106.82907V32a7.99958,7.99958,0,0,0-12.91113-6.31446L107.23926,56.67965a7.99966,7.99966,0,0,0-1.00879,11.69629Z") ;
}


#chat {
    display : flex ;
    flex-direction : column ;
    position : relative ;
    max-width : 500px ;
    border : 3px solid #72899a;
    border-radius : 4px ;
    margin : 0 auto ;
    margin-top : 1em ;
    padding : 0 ;
}

#chat #hide {
    display : flex ;
    position : absolute ;
    flex-direction : column ;
    z-index : 10 ;
    background-color : rgba(114, 137, 154, .8);
    height : 100% ;
    width : 100% ;
    justify-content : center ;
}
#chat #hide .join {
    display : block ;
    text-align : center ;
    cursor : pointer ;
    user-select : none ;
}
#chat #hide .join > span.ellipsis:nth-of-type(1) {
    animation-name : spin-ellipsis-one ;
}
#chat #hide .join > span.ellipsis:nth-of-type(2) {
    animation-name : spin-ellipsis-two ;
}
#chat #hide .join > span.ellipsis:nth-of-type(3) {
    animation-name : spin-ellipsis-three ;
}
#chat #hide .join > span.ellipsis {
    visibility : hidden ;
    animation-duration : 2000ms ;
    animation-iteration-count : infinite ;
    animation-timing-function : steps(1) ;
    animation-fill-mode : forwards ;
    animation-direction : normal ;
    animation-play-state : paused ;
}

#chat .top {
    display : flex ;
    flex-direction : row ;
    font-size: 11pt ;
    height : 300px ;
    overflow : hidden ;
}
#chat .top .messages {
    flex-grow : 1 ;
    overflow-y : scroll ;
}
#chat .top .messages div.meta {
    font-style : italic ;
}
#chat .top .messages div.chat-box span.user {
    font-weight : bold ;
}
#chat .top .messages div.error {
    color : red ;
}
#chat .top .line,
#chat .top input {
    width : 6px ;
    height: 80px ;
    position : relative ;
}
#chat .top .line {
    z-index : 4 ;
    cursor : ew-resize ;
    user-select : none ;
    border-radius : 5px ;
    background-color : #ed1c24 ;
    margin : auto -3px ;
}
#chat .top input {
    z-index : 5 ;
    cursor : ew-resize ;
    user-select : none ;
    opacity : 0 ;
    margin : auto -3px ;
}
#chat .top .line input:focus {
    outline : 0 ;
    outline-width : 0 ;
}
#chat .top .sidebar {
    border-left : 1px solid #72899a ;
    transition-duration : 1000ms;
    width : 120px ;
}
#chat .top input:checked ~ .sidebar {
    transition-duration : 1000ms;
    width : 10px ;
}
#chat .top .sidebar ul.userlist {
    list-style : none ;
    margin : 0 ;
    padding : 5px ;
    width : 120px ;
    overflow-y : scroll ;
    overflow-x : hidden ;
}
#chat .top .sidebar ul.userlist li {
    margin : 0 ;
    padding : 0 ;
}

#chat .sendmsg {
    display : flex ;
    flex-direction : row ;
    font-size: 10pt ;
    margin : 0 ;
    width : 100% ;
    border-top : 1px solid #72899a ;
    line-height : normal ;
}

#chat .sendmsg .username {
    font-weight: bold ;
    padding : 5px ;
    border-right : 1px solid #72899a ;
    white-space : nowrap ;
    user-select : none ;
}

#chat .sendmsg .send {
    width : 100% ;
    border: 0 ;
}
#chat .sendmsg input.send:focus {
    outline : 0 ;
    outline-width : 0 ;
}
#chat .sendmsg button {
    margin : 0 ;
    margin-left : 1px ;
    border : 0 ;
    border-radius : 0 ;
    border-left : 1px solid #72899a ;
}

/* vim: set expandtab sw=4 softtabstop=4 : */