:root{
/*~~~~~~~~~~~~~ only edit below this line ~~~~~~~~~~~*/

--tickercontent: '.                                 If you have encountered a Volkswagen you may be entitled to compensation' ;
/*what you want to scroll across*/

--tickerwidth: 576px;
/* adjust for length of content  */

--tickercolor: #dae0f3;
/*text color*/

--tickercustemoji: url(https://cdn.discordapp.com/attachments/584960557891846144/1087913450124083260/shrikes-vs-volkswagen-2.gif);
/*url for a emote or image to show (may be buggy), optional*/
/*normal unicode emojis can just be put inside content*/
/*keep url between the () */

--emojipos:left;
/*"right" or "left"*/
/*add some spaces to either side of ticker content to fit*/

/*~~~~~~~~~~~~~ only edit above this line ~~~~~~~~~~~*/
}

@media (any-pointer: fine){

@keyframes bussing{
    0% {transform: translate(100vw)}
    100% {transform: translate(calc(0vw - var(--tickerwidth)))}
}

@media (max-width: 360.1px){
    .app-body::before{
     animation: bussing 15s linear infinite;
    }
}

@media (min-width: 360.1px) and (max-width: 990px){
    .app-body::before{
     animation: bussing 20.5s linear infinite;
    }
}
@media (min-width: 990.1px) and (max-width: 1920px){
    .app-body::before{
     animation: bussing 25s linear infinite;
    }
}

@media (min-width: 1920px) and (max-width: 3840px){
    .app-body::before{
     animation: bussing 30s linear infinite;
    }
}

.app-body::before {
    content: var(--tickercontent);
    width: var(--tickerwidth);
    color: var(--tickercolor);
    background-image: var(--tickercustemoji);
    background-repeat:no-repeat;
    background-size: contain;
    background-position: var(--emojipos);
    z-index: 4;
    height: 23px;
    display: block;
    text-align: center;
    line-height: 23px;
    border-radius: 5px;
    align-items: center;
    font-size: 15px;
    position:absolute;
    white-space: pre;
}
.app-body.layout-multiple-columns::before {
    top: -15px;
}

.app-body.layout-single-column::before {
    top: 2px;
}

.app-body.theme-mastodon-light::before {
        background-color: #ffffff;
}

.app-body.theme-default::before {
        background-color: #393f4f;
}

.app-body.theme-contrast::before {
        background-color: #393f4f;
}

@media (min-width: 630.1px){
body.app-body {
    margin-top:17px;
    height: calc(100vh - 24px) !important;
    overflow-x:hidden !important;
}
}
@media (max-width: 630px){
body.app-body {
    margin-top:26px;
    height: calc(100vh - 24px) !important;
    overflow-x:hidden !important;
}
}




}


@media (any-pointer: coarse){
.app-body::before {
content: none !important;
}
}

@media (any-pointer: fine){

@keyframes bussing{
    0% {transform: translate(100vw)}
    100% {transform: translate(calc(0vw - var(--tickerwidth)))}
}

@media (max-width: 360.1px){
    .public-layout::before{
     animation: bussing 15s linear infinite;
    }
}

@media (min-width: 360.1px) and (max-width: 990px){
    .public-layout::before{
     animation: bussing 20.5s linear infinite;
    }
}
@media (min-width: 990.1px) and (max-width: 1920px){
    .public-layout::before{
     animation: bussing 25s linear infinite;
    }
}

@media (min-width: 1920px) and (max-width: 3840px){
    .public-layout::before{
     animation: bussing 30s linear infinite;
    }
}

.public-layout::before {
    content: var(--tickercontent);
    width: var(--tickerwidth);
    color: var(--tickercolor);
    background-image: var(--tickercustemoji);
    background-repeat:no-repeat;
    background-size: contain;
    background-position: var(--emojipos);
    z-index: 4;
    height: 23px;
    display: block;
    text-align: center;
    line-height: 23px;
    border-radius: 5px;
    align-items: center;
    font-size: 15px;
    position:absolute;
    white-space: pre;
}
    
.public-layout::before {
    top: 3px;
}

.public-layout::before {
        background-color: #393f4f;
}

@media (min-width: 630.1px){
body{
    margin-top:29px;
    height: calc(100vh - 24px) !important;
    overflow-x:hidden !important;
}
}
@media (max-width: 630px){
body{
    margin-top:29px;
    height: calc(100vh - 24px) !important;
    overflow-x:hidden !important;
}
}




}


@media (any-pointer: coarse){
.public-layout::before {
content: none !important;
}
}