.portfolio {
    width: 100%;
}

.portfolio .content {
    padding-bottom: 10vh;
}

.portfolio #projects {
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
}

.portfolio #projects .item {
    border-radius: 15px;
    width: 300px;
    background-color: var(--primary);
    color: var(--secondary);
    height: auto;
    opacity: 0;
    position: relative;
    top: 20vh;
}

.portfolio #projects .shown {
    animation: PortfolioItemAnim 1.5s ease forwards;
}

@keyframes PortfolioItemAnim {
    from {
        opacity: 0;
        top: 20vh;
    }
    to {
        opacity: 1;
        top: 0;
    }
}

.portfolio #projects .item img {
    width: 100%;
    height: 25vh;
    border-radius: 15px 15px 5px 5px;
    object-fit: cover;
    overflow: hidden;
}

.portfolio #projects .item hr {
    width: 100%;
    height: 0.4vh;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--accent);
    border-radius: 50px;
}

.portfolio #projects .item .content {
    padding: 0.5vw;
    padding-bottom: 2.2vh;
    width: 100%;
    height: calc(100% - 24vh);
}

.portfolio #projects .item .content h1 {
    font-size: x-large;
    font-weight: bold;
}

.portfolio #projects .item .content p {
    height: calc(100% - 9vh);
}

.portfolio #projects .item .content a {
    color: var(--secondary);
    text-decoration: underline;
    padding-right: 0.5vw;
}

.portfolio #projects .item .content a:hover {
    color: var(--accent);
}