.feed {
    width: 100%;
}

.feed-header {
    height: 5dvh;
    color: #fff;
    font-size: 2.5dvh;
    line-height: 6dvh;
    background-color: #222;  
    font-weight: bold;
    text-align: center;
}

.feed-footer {
    height: 5dvh;
    background-color: #222;    
}

.feed-wrapper.CarbonFiber {
    background-color: rgb(32, 32, 32);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
    background-size: 10px 10px, 10px 10px, 10px 5px;
    background-position: 0px 0px, 5px 5px, 0px 0px;
}

.feed-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 90dvh;
    padding: calc(1dvh + 1dvw);
    justify-content: space-around;
    align-content: flex-start;
    overflow-y: scroll;
}

.feed-item {
    background-color: mintcream;
    border-radius: 10px;
    align-self: flex-start;
    width: min(60dvh, 80dvw); 
    margin: calc(1dvh + 1dvw);
}

.feed-item.new {
    opacity: 0; 
    transform: translateY(20px);
    animation: fadeIn 0.5s forwards ease-out;
    animation-delay: calc(var(--i) * 0.1s);
    animation-fill-mode: forwards
}

.feed-item:hover {
    opacity: 0.8;
    cursor: pointer;
}

.feed-item.warning { background-color: lemonchiffon; }
.feed-item.critical { background-color: #faa; }

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.feed-splitter {
    display: flex;
}

.feed-section { padding: 3%; }
.feed-section.half { width: 50%; }

.feed-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.feed-attr { 
    width: 100%; 
    text-align: right; 
    font-weight: bold; 
    font-size: calc(2dvh + 0.5dvw);
    margin-top: calc(1dvh + 0.25dvw);
}

.feed-qty {
    font-size: 200%;
    background: paleturquoise;
    border-radius: 10px;
    padding: calc(1dvh + 0.25dvw);
}

#feed-price {
    margin-top: calc(3dvh + 0.25dvw);
}

.feed-price {
    font-size: 150%;
    background: palegreen;
    border-radius: 10px;
    padding: calc(1dvh + 0.25dvw);
}

.feed-section.title { 
    font-size: calc(2dvh + 0.5dvw); 
    font-weight: bold; 
    padding: 4%;
}

.feed-section.desc { 
    font-size: calc(2dvh + 0.5dvw); 
    padding: 4%;
}

.feed-section.ppal { 
    font-size: calc(2dvh + 0.5dvw); 
    padding: 3%;
}