:root {
    --slide-offset: 0; /* 24px; */;
    --slide-offset-negative: 0; /* -24px; */
    --transition-film-out: cubic-bezier(.48,-0.78,0,2.14);
    --transition-film-in: cubic-bezier(.48,-0.78,0,2.14);
    --transition-pos: 0px;
    --film-strip-width: 10%;

    /*noinspection CssUnknownTarget*/
    --film-strip-image: url('/images/film-strip/strip.png');
}

div.active-background {
    /* Base is in /css/base.css */
    transform: translateY(var(--transition-pos));

    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: var(--transition-film-in);
}

div.active-background.play {
    
}

div.active-background.stopped {
    transition-property: none;
}


/* Film Border - No need to touch anything below here */
div.active-background > .image-container > .film-border {
    position: absolute;
    bottom: 0;
    top: 0;
}

div.active-background > .image-container > .film-border > img {
    width: 100%;
    opacity: 0.0;
}

div.active-background > .image-container > .film-border-1,
div.active-background > .image-container > .film-border-3 {
    width: var(--film-strip-width);
    max-width: var(--film-strip-width);
    min-width: var(--film-strip-width);
    background-image: var(--film-strip-image);
    background-repeat: repeat-y;
    background-origin: border-box;
    background-size: contain;
}

div.active-background > .image-container > .film-border-1 {
    background-position-x: right;
}

div.active-background > .image-container > .film-border-0 {
    left: 0;
    right: 0;
    top: 0;
    bottom: unset;
    height: 16px;
    background-color: black;
}

div.active-background > .image-container > .film-border-1 {
    left: unset;
    right: 0;
}

div.active-background > .image-container > .film-border-2 {
    left: 0;
    right: 0;
    top: unset;
    bottom: 0;
    height: 16px;
    background-color: black;
}

div.active-background > .image-container > .film-border-3 {
    left: 0;    
    right: unset;
}

#qr-blocks-logo {
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 32px;
    width: 100%;
}

#links > ul.links > li > a {
    align-items: center;
}

#links > ul.links { 
    margin: 16px 42px 1em 42px;
}

#links > ul.links > li > a > span:last-child { 
    font-size: 0.8em;
    line-height: 0;
    text-shadow: #000 0 0 8px;
    white-space: nowrap;
}

.main > .section > .info > h1#profile-title { 
    margin-left: 42px;
    margin-right: 42px;
}