@import url(/!s/reset.css);
@import url(/!s/tooltip.css?v=2);
@font-face {
    font-family: tnanti;
    src: url(/!f/fonts/TNanti.woff2);
}

* {
    box-sizing: border-box;
}

html {
    position: relative;
    background-color: #F4F0D2;
    background-image: url(/!s/!img/home/bg.png);
    background-size: 1500px;
    image-rendering: pixelated;
    background-position: 100% bottom;
    background-position-x: center;
    background-attachment: fixed;
    padding: 20px;
}

body {
    background-color: #eef1d45a;
    width: 1111px;
    margin: auto;
    border-radius: 20px;
    transform-origin: top left;
    display: block;
}

.buttons {
    margin-top:2px;
    float:right;
    transition:.3s;
}

.buttons button {
    cursor: pointer;
    text-align: right;
    width: fit-content;
    color:#faf7df;
    font-size:18px;
    font-family:black-beard;
    background-color:#4c3c32;
    border:ridge 2px #5D381E;
    background-image: url(/!s/!img/home/board.png);
    background-position: center;
    background-size: 130%;
    background-blend-mode:soft-light;
    filter:drop-shadow(0 0 2px #3e10059a);
    transition:.3s;
    width:100%;
    text-align: center;
}

.bgmbtn {
    padding-right:2.5px;
}

.autoplaybtn {
    padding-left:2.5px;
}

.audio-player {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.buttons button:hover {
    filter:drop-shadow(0 0 4px #3e1005e1);
}


.hover {
    grid-column: span 2 / span 2;
    width:100%;
    padding-top:2.5px;
}

a {
    text-decoration: none;
    border-bottom: dotted 1.5px;
    transition: .3s;
}

a:hover {
    letter-spacing: 1.11px;
    transition: .3s;
}

header {
    font-family: tnanti;
    margin-left: 20px;
    color: #055;
}

h1 {
    margin: 0px;
    margin-bottom: 6px;
}

.mobilewarn {
    display: none;
    padding: 8px;
    width: 70vw;
    margin: auto;
    color: #85582d;
    font-weight: bolder;
    background-color: #F4F0D2;
    border: solid 2px;
    margin-bottom: 20px;
    font-size: 3.6vw;
}

.wrap {
    position: relative;
    width: max-content;
    display: grid;
    grid-template-columns: 200px 505px 200px;
    grid-template-areas:
        'l c r';
    gap: 60px;
    margin:auto;
    margin-top: 10px;
}

.l,
.c,
.r {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.l {
    grid-area: l;
}

.c {
    grid-area: c;
}

.r {
    grid-area: r;
    margin-top: -15px;
}

.pca {
    display: flex;
    position: relative;
    height: 345px;
    gap: 40px;
}

.contart {
    display: flex;
    flex-direction: column;
    width: 50%;
    order: 2;
    position: relative;
    gap: 20px;
}

.gifs {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    top: 200px;
    left: 170px;
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 10;
}

main {
    height: 321px;
    padding: 20px;
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
    color: #85582d;
    background-image: url(/!s/!img/home/postcard.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px 0px 4px #3e10059a);
    transition: 0.3s;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    overflow: hidden;
}

main:hover {
    filter: drop-shadow(0px 0px 6px #3e1005e1);
}

main .mainscroll {
    text-indent: 20px;
    overflow: scroll;
    padding-top: 22px;
    font-size: 18px;
    font-family: felt-tip-woman;
    font-weight: bold;
    line-height: .95;
    scrollbar-width: none;
}

.mainscroll a {
    color: #438C98;
}

main .mainside {
    position: relative;
    color: #438C98;
    top: 90px;
    height: 81%;
    font-weight: bolder;
}

.coins {
    position: relative;
    width: 180px;
    margin-top: -20px;
    cursor: pointer;
    transition: opacity 1s, transform .4s, top .3s, left .3s, filter .3s;
    filter: drop-shadow(0px 0px 3px #8CCDD5a3);
    transform: scale(1);
    clip-path: polygon(56% 101.16%, 76.84% 92.41%, 103.86% 56.14%, 82.37% 15.64%, 23.7% 15.96%, 1.61% 26.92%, 1.89% 53.42%, 22.93% 56.44%, 21.7% 76.54%, 33.21% 90.88%);
}

.coins:hover {
    transform: scale(1.2);
    filter: drop-shadow(0px 0px 6px #8CCDD5);
}

.coins.clicked {
    opacity: 0;
}

.thief {
    display: none;
    pointer-events: none;
    position: relative;
    top: 60px;
    left: 80px;
    cursor: help;
    width:fit-content;
}


audio:hover {
    filter: drop-shadow(0px 0px 6px #3e1005e1);
    transform: scale(1.01);
    transition: 0.3s;
}

nav {
    padding: 6px;
    background-image: url(/!s/!img/home/map.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    height: 130px;
    width: 100%;
    transform: rotate(-1deg);
    filter: drop-shadow(0px 0px 4px #3e10059a);
    transition: 0.3s;
    color: #473634;
    font-family: felt-tip-woman;
    font-weight: bold;
}

nav:hover {
    filter: drop-shadow(0px 0px 6px #3e1005e1);
    transform: rotate(0.2deg);
    transition: 0.3s;
    background-image: url(/!s/!img/home/map2.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
}

.navtitle {
    position: relative;
    margin-bottom: -28px;
    top: -30px;
    font-family: p22-sting;
    left:5px;
    font-size: 32px;
    transform: rotate(-10deg);
    color: #055;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902);
}

nav .navbody {
    width: 90%;
    margin: auto;
    margin-top: 5px;
    padding: 12px;
    margin-left: 20px;
    font-size: 16px;
    transition: .3s;
    filter: drop-shadow(0px 0 3px #c7a486) drop-shadow(-0px 0 3px #c7a486) drop-shadow(0 -0px 3px #c7a486) drop-shadow(0 0px 3px #c7a486);
    opacity: 0;
    display:flex;
    flex-wrap: wrap;
    gap:5px;
}

nav:hover .navbody {
    opacity: 1;
}

nav .navbody a {
    margin-right: 6px;
    color: #473634;
    text-decoration: none;
    border-bottom: dotted 1.5px;
}

.navfooter {
    position: relative;
    display: block;
    top: 48px;
    text-align: right;
    font-family: p22-sting;
    font-size: 24px;
    color: #055;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902);
    transform:rotate(-1.5deg);
}

.journalwrap {
    display: block;
    grid-area: journal;
    position: relative;
    background-size: 180%;
    height: 300px;
}

.journalrings {
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 0px;
    height: 30px;
    object-fit: cover;
}

.journal {
    position: relative;
    border: solid 2px #85582d;
    padding: 6px !important;
    background-image: linear-gradient(#cbac801e .11em, transparent .11em);
    background-color: #EEECCB;
    background-size: 100% 1.4em;
    color: #451902;
    border-radius: 8px;
    height: 100%;
    padding-top: 20px !important;
    font-family: tnanti;
    top: 10px;
}

.journal .journalscroll {
    overflow: scroll;
    height: 100%;
}

.filters {
    margin-top: 8px;
    margin-bottom: 14px;
    font-size: 16px;
    color: #85582d;
}

.filters a {
    margin-right: 6px;
    text-decoration: none;
    border-bottom: dotted 1.5px;
    cursor: pointer;
}

.entries {
    font-family: felt-tip-woman;
    font-weight: bold;
}

.entries .namedate {
    font-size: 14px;
}

.entries .namedate:after {
    content: " dd/mm/yy";
    opacity: .4;
}

.entries .namedate strong {
    font-family: tnanti;
    font-size: 18px !important;
}

.container {
    display: none;
    padding-bottom: 14px;
    padding-top: 14px;
    border-top: solid 1.5px #438C98;
    font-family: felt-tip-woman;
    font-weight: bold;
    line-height: .95;
    font-size: 16.5px;
}

.container.show {
    display: block;
}

.todowrap {
    transition: .3s;
    transform: perspective(100px) rotatex(.5deg);
    height: 215px;
    padding: 10px;
    border-radius: 4px;
    background: #e9d6ad;
    clip-path: url(#ragged-image-border);
    color: #92573a;
    font-family: felt-tip-woman;
    font-weight: bold;
    font-size: 18px;
    overflow: scroll;
    line-height: .95;
}

.todowrap:hover{
    filter: drop-shadow(0px 0px 6px #3e1005e1);
    transform: perspective(100px) rotatex(1.5deg);
}

.todo {
margin-bottom:10px;
border-bottom: dashed 1px;
    padding-bottom:12px;
    margin-bottom: 12px;
}

.todotitle {
    font-family: tnanti;
    font-size: 20px;
    color: #602a0f;
    line-height:initial;
}

.todo span {
    display: block;
    margin-top: 3px;
}

.todo span:not(:has(del)):before {
    content: '- '
}

.todo span:has(del):before {
    content: '✓ '
}

.todo a {
    color: #438C98;
}

#commitLink {
    font-size:16px;
}

#commitTitle {
    font-family:tnanti;
    font-size:18px;
    border:0;
    color:#602a0f;
}

#dateTime {
    color:#92573a;
}

svg {
    height: 0;
    width: 0;
    pointer-events: none;
}

.music {
    font-family: p22-sting;
    letter-spacing: 1.5px;
    color: #055;
    position: relative;
}

.musictitle {
    position: relative;
    text-align: right;
    top: -60px;
    margin-bottom: -50px;
    font-size:26px;
    font-weight: bolder;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902) drop-shadow(0px 0px 2px #3e10059a);;
}

.music a {
    filter: drop-shadow(1.5px 0 0 #F1F0D3) drop-shadow(-1.5px 0 0 #F1F0D3) drop-shadow(0 -1.5px 0 #F1F0D3) drop-shadow(0 1.5px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0px 0px 2px #3e10059a);
    font-size: 22px;
    border: none;
    font-weight: bolder;
    cursor: pointer;
}

.music a:hover {
    letter-spacing: 2px;
}

.instrument {
    position: relative;
    z-index: 3;
    width: 100%;
    left: -20px;
    filter: none;
    transition: .4s;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902) drop-shadow(0px 0px 3px #8CCDD5a3);
    cursor: pointer;
    clip-path: polygon(6% 68.5%, 18.5% 39.5%, 51% 24.5%, 71.5% 10%, 99.5% 10%, 76.5% 78.5%, 48% 95.5%, 12.00% 99.50%);
}

.instrument:hover {
    transform: scale(1.1);
}

.poster {
    background: url(/!s/!img/home/tryal.jpg) center / cover no-repeat;
    transform: rotate(-3deg);
    border-radius: 4px;
    padding: 8px;
    transition: .3s;
    filter: drop-shadow(0px 0px 4px #3e10059a);
    font-family: felt-tip-woman;
    font-weight: bold;
    font-size: 18px;
    height: 320px;
    margin-top: 20px;
}

.poster a {
    color: #438C98;
}

.poster:hover {
    background: url(/!s/!img/home/tryal2.jpg) center / cover no-repeat !important;
    transform: rotate(-1deg);
    filter: drop-shadow(0px 0px 6px #3e1005e1);
}

.postertitle {
    position: relative;
    left: 20px;
    top: -30px;
    font-family: p22-sting;
    font-size: 32px;
    font-weight: bolder;
    transform: rotate(6deg);
    text-align: right;
    color: #055;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902);
    margin-bottom: -10px;
}

.posterbody {
    opacity: 0;
    transition: .3s;
    height: 92%;
    overflow: scroll;
    color: #85582d;
    filter: drop-shadow(0px 0 3px #e7e0c6) drop-shadow(-0px 0 3px #e7e0c6) drop-shadow(0 -0px 3px #e7e0c6) drop-shadow(0 0px 3px #e7e0c6);
}

.poster:hover .posterbody {
    opacity: 1;
}

.posterbody>div>div {
    margin-bottom: 6px;
    font-size: 18px;
    color: #451902;
}

.posterbody>div {
    border-bottom: dashed 2px;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/*.posterbody > div > div:after {
    content:" dd/mm/yy";
    opacity:.4;
    font-size:14px;
}*/

.posterfooter {
    position: relative;
    font-family: p22-sting;
    left: -15px;
    top:-10px;
    font-size: 24px;
    color: #055;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902);
    transform: rotate(3deg);
}

.gif {
    position: relative;
    height: 87px;
    outline: solid 2px #F1F0D3;
    border: ridge 3px#85582d;
    background: url(/!s/!img/home/compass.png) center / cover;
    filter: drop-shadow(0px 0px 3px #3e10059a);
    border-radius: .5px;
    margin: 0;
}

.artifact {
    grid-area: artifact;
    text-align: center;
    filter: drop-shadow(0px 0px 3px #3e10059a);
    text-shadow: 0 0 .8px #055;
    gap: 10px;
}

.artifact img {
    width: 233px;
    height:122px;
    object-fit:cover;
    margin-top: 10px;
    transform: rotate(1deg);
    border-radius: 2px;
    transition: .3s;
    cursor: help;
}

.artifact img:hover {
    transform: rotate(2deg) scale(1.3);
}

.artifacttitle {
    font-family: p22-sting;
    left: -15px;
    font-size: 30px;
    color: #055;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902);
}

.contact {
    position: relative;
    z-index: 11;
    grid-area: contact;
    font-family: felt-tip-woman;
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 8px;
    border: solid 2px #875A2E;
    border-radius: 6px;
    height: 100%;
    overflow: scroll;
    text-align: center;
    background: url(/!s/!img/home/paper.jpg) center / 100%;
    background-size: 180%;
    background-position: top;
    background-attachment: local;
    color: #85582d;
    transform: rotate(-.8deg);
    transition: .3s;
    filter: drop-shadow(0px 0px 3px #3e10059a);
}

.contact:hover {
    transform: rotate(-.1deg);
    filter: drop-shadow(0px 0px 6px #3e1005e1);
}

.contact del {
    opacity: .6;
}

.contact img {
    transition: .3s;
    cursor: help;
}

.contact img:hover {
    transform: rotate(2deg);
}

.contact a {
    color: #438C98;
}


.listings a {
    border-bottom: none;
}

.jack {
    position: relative;
    z-index: 2;
    width: 50%;
    order: 2;
    height: 100%;
    grid-area: p;
    color: #451902;
    transition: .3s;
}

.jack>p:first-of-type:first-line {
    font-size: 20px;
}

.jack p:first-of-type {
    font-family: black-beard;
    font-size: 17px;
    font-weight: bolder;
}

.jack>p:nth-of-type(2) {
    position: absolute;
    right: 5px;
    top: 45px;
    font-family: p22-sting;
    font-size: 28px;
    font-weight: bold;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902) drop-shadow(0px 0px 3px #3e10059a);
    color: #055;
}

.jack p {
    position: relative;
    z-index: 3;
    width: 53%;
    float: right;
    text-align: right;
    margin: 0;
}

.jack #jack {
    position: absolute;
    z-index: 4;
    transition: .3s;
    height: 100%;
    max-width: 140% !important;
    left: -80px;
    image-rendering: initial;
    float: left;
    filter: drop-shadow(1px 0 0 #F1F0D3) drop-shadow(-1px 0 0 #F1F0D3) drop-shadow(0 -1px 0 #F1F0D3) drop-shadow(0 1px 0 #F1F0D3) drop-shadow(-1px 0 0 #85582d) drop-shadow(0 1px 0 #85582d) drop-shadow(1px 0 0 #85582d) drop-shadow(0 -1px 0 #85582d) drop-shadow(-1px 1px 0 #451902) drop-shadow(0px 0px 3px #3e10059a);
    clip-path: polygon(75.05% 5.94%, 58.58% -3.05%, 38.22% 1.17%, 38.91% 11.88%, 44.37% 24.49%, 33.58% 57.81%, 27.39% 30.3%, 15.04% 17.26%, -1.93% 74.36%, 8.1% 74.94%, 20.73% 65.94%, 16.59% 103.19%, 97.07% 102.03%, 94.69% 77.97%, 76.98% 71.3%, 87.78% 58.84%, 86.91% 48.99%, 96.24% 43.91%, 84.95% 30.87%);
}

.jack img:hover {
    filter: none;
    transform: scale(1.05);
}

.jack .jbg {
    border: solid 2px #85582d;
    border-radius: 2px;
    margin-left: auto;
    margin-top: 60px;
    width: 78%;
    height: 78%;
    z-index: 0;
    padding: 14px;
    padding-bottom: 3px;
    background: url(/!s/!img/home/wood.jpg) 20%;
    letter-spacing: 1px;
    font-size: 16px;
    filter: drop-shadow(0px 0px 3px #3e10059a);
}

.jack .jbg a {
    text-decoration: none;
    border: none;
    filter: drop-shadow(0 0 2px #3b1604);
}

.jack .jbg .jbgi img {
    filter: brightness(.9)sepia(.6) hue-rotate(-8deg) saturate(1.7);
    transition: filter .5s, transform .3s;
    opacity: 1;
    height: 31px;
    width: 88px;
}

.jack .jbg img:hover {
    filter: none;
    transform: scale(1) translatey(-2px);
}

.jbgi {
    width: 88px;
    display: block;
    float: right;
    margin-right: -10px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    padding-top: 5px;
    scrollbar-width: none;
}

.jbgi div {
    margin-bottom: 3px;
    filter: brightness(.9)sepia(.6) hue-rotate(-18deg) saturate(1.7);
    transition: filter .5s, transform .3s, opacity: .0s;
}

.jbgi div:hover {
    filter: none;
}

footer {
    margin-top: 40px;
    position: relative;
    font-family: tnanti;
    color: #055;
    text-align: center;
}

footer a {
    color: #055;
    opacity: .8;
}

  .tilt-content {
    transform: rotate(1.2deg);
    transform-style: preserve-3d;
      position: relative;
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter .3s;
  }

}
@media screen and (max-width: 626px) {
    body {
        width: 100%;
    }

    .mobilewarn {
        display: block;
    }

    .sidebarw {
        display:none;
    }

    .wrap {
        margin-left:0;
    margin-right:0;
    }

    main {
        width: 80vw;
        height: 51vw;
        display: grid;
        padding: 2vw;
        padding-right: 7vw;
        grid-template-columns: 50% 50%;
        background-size: cover;
    }

    .mainscroll,
    .mainside {
        height: 46vw !important;
        font-size: 4vw !important;
        display: block;
    }

    .mainside {
        font-size: 3vw !important;
        margin-left: -12px;
        top: 90px !important;
    }

    .mainside p {
        display: none;
    }

    .coins {
        width: 32vw;
    }

    .thief {
        display: block;
        left: 45px;
        top: 0 !important;
    }

    .wrap {
        display: block;
        width: 100%;
    }

    .gifs {
        display: none;
    }

    .pca {
        display: block;
        width: 100%;
        justify-content: center;
        height: max-content;
        margin-bottom: 50px;
    }

    .jack {
        display: none;
    }

    .artifact {
        display: none;
    }

    .contart {
        width: 100%
    }

    .contact {
        margin: auto;
        width: 60vw;
        height: 35vw;
    }

    nav {
        width: 60vw;
        height: 40vw;
        margin: auto;
        background-image: url(/!s/!img/home/map2.png) !important;
    }

    .navbody {
        opacity: 1 !important;
        padding: 3vw;
        padding-left: 5vw !important;
    }

    .navfooter {
        display: none;
    }

    .journalwrap {
        width: 55vw;
        height:80vw;
        margin: auto;
    }

    .todowrap {
        width: 50vw;
        margin: auto;
    }

    .music {
        width: 60vw;
        margin: auto;
        margin-top: 20px;
    }

    .gif {
        display: none;
    }

    .poster {
        width: 60vw;
        margin: auto;
        height: 90vw;
        background-image: url(/!s/!img/home/tryal2.jpg) !important;
        background-size: cover;
    }

    .poster:hover {
        background-image: url(/!s/!img/home/tryal2.jpg) !important;
        background-size: cover;
    }

    .posterbody {
        opacity: 1;
    }

    .posterfooter {
        display: none;
    }
}