@keyframes slideInFromBottom{
    0%{
        opacity: 0;
        /* transform: translateY(100vh); */
        margin-top:55%;
    }

    100%{
        opacity: 1;
        /* transform: translateY(0vh); */
        margin-top:5px;
    }
}


.content .item{
    display: inline-grid;
    text-align: center;
    width: 80%;

    grid-template-rows: 40px 20px auto;
    grid-template-columns: 70% 30%;

    padding: 0 20px 20px 20px;
    border-radius: 5px;
    transition: 0.2s;

    animation-duration: 0.8s;
    animation-name: slideInFromBottom;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    animation-direction: normal;
}


.content .item:hover{
    background:var(--lineColour);
    /* background:#7a7a7a; */
    cursor: pointer;
    /* color: #fff;; */
}

.content .item hr,
.content .item:hover .lastUpdated{
    transition: 0.2s;
}

.content .item:hover hr,
.content .item:hover .lastUpdated{
    color: #fff;
}

.content .item h2{
    text-align: left;
    grid-row:1;
    grid-column:1;
}

.content .item .titleBar{
    margin-left: 0;
    grid-row:2;
    grid-column:1/2;
    width: 100%;
}

.content .item .imgBar{
    margin-left: 0;
    grid-row:2;
    grid-column:2;
    width: 100%;
}

.content .item .lastUpdated{
    grid-row:1;
    grid-column:2;
    text-align: right;
    white-space: nowrap;
    margin-top: 25px;
    margin-bottom: 0;
    margin-left: 0;

    color: var(--shadowedText);
}

.content .item p{
    margin-left: 20px;
    text-align: justify;
    width: 80%;
    grid-row: 3;
    grid-column:1;
}

.content .item img {
    grid-row: 3;
    grid-column:2;
    aspect-ratio: 1/1;
    width: 40%;
    margin-top: calc(20% - 35px);
    margin-left: calc(50% - 35px);
    object-fit: scale-down;
}

footer{
    margin-top:20px;
}