section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#background {
    background-image: url("https://i.pinimg.com/236x/6d/81/bc/6d81bcbce6c04740cc2292ec1bc526f5.jpg");
}

#orff {
    width: 1000px;
    height: 600px;
    margin-top: 50px;
}

#project {
    margin: 50px auto;
    width: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "div1 div1"
        "div2 div3"
}

#project > div {margin: 15px 0;}   
#project > div:nth-child(1) {grid-area: div1;}
#project > div:nth-child(2) {grid-area: div2;}
#project > div:nth-child(3) {grid-area: div3;}

#project div li {list-style-type: none;}

#project div li img {
    border-radius: 5px;
    height: 10px;
}
#project div li :is(img, i) {margin: 0 10px; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}

#project div a:hover + :is(img, i) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

#project div a::before {
    content: "";
    display: inline-block;
    position: relative;
    top: -5px;
    width: 5px;
    height: 5px;
    background-color: var(--primary-color);
    border-radius: 5px;
    margin-right: 10px;
}

#project div a:hover::before {width: 10px;}