@keyframes shiftUp{0%{height:35px;opacity:1;margin-bottom:0}100%{height:0;opacity:0;margin-bottom:0;display:none}}.ribbon{height:45px;width:100%;overflow:hidden;animation:shiftUp .8s 9s ease-out forwards}

.ribbon>div{
    height: 40px;
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    padding: 0 40px;
    margin: 0;
    background-color: green;
    contain: layout size style;
    mask-image: linear-gradient(10deg,black 80%,transparent 98%);
    -webkit-mask-image: linear-gradient(100deg,black 80%,transparent 98%);}

.ribbon>div>p{color:#fff;border-bottom:1px dashed #fff}.ribbon>div>p:hover{border-bottom-color:transparent}.ribbon>div>a{font-weight: 600;font-size:.9rem;transition:all .5s ease;color:#fff;border-bottom-color:#fff}.ribbon>div>a:hover{font-size:.95rem;border-bottom-color:green}@media(max-width:980px){.ribbon{height:5em}.ribbon>div{min-height:70px;height:auto;width:100%;bottom:60px;left:0;padding:10px 70px;text-align:center;line-height:1.3;border-radius:3em 3em 0 0;mask-image:none;-webkit-mask-image:none}}@media(max-width:580px){.ribbon>div{min-height:90px;display:block;padding:10px 50px}}@media(max-width:380px){.ribbon>div{min-height:100px;padding:5px 50px}}