:root {
    --bg: #d69ad5;
    --primary: #a863f2;
    --card: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}



* {
    box-sizing: border-box;
}



body {
    background-color: var(--bg);
    color: var(--text-main);
    line-height: 1.5;
    margin: 0;
    padding: 40px 20px;
    padding-bottom: 0px;
}



main {
    display: flex;
    width: 95%;
    justify-content: center;
    gap: 8%;
    margin-top: 16px;
}



#bar {
    display: flex;
    width: 95%;
    gap: 2%;
}



#search {
    width: 50%;
    height: 40px;
}


.filter {
    width: 100px;
    font-weight: bold;
}


.list-container {
    width: 40%;
    justify-content: right;
    max-height: 88vh;
    overflow: scroll;
    padding-right: 0.5%;
}



aside {
    display: flex;
    align-content: center;
    width: 40%;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 18px;
    max-height: 500px;
    min-height: 500px;
    font-size: large;
}

#description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 100%;

}


.desc-image {
    width: 486px;
    height: 270px;
    align-self: center;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    background-color: #e7e7e7;
    border: 4px solid rgb(137, 103, 146);
    border-radius: 10px;
}


.list-item.hiddenElement {
    opacity: 0%;
    height: 0px;
    margin-bottom: 0px;
    padding: 0px;
    overflow: hidden;
    /*fade out, then shrink*/
    transition:
        opacity 0.4s cubic-bezier(0.75, 0, 0.23, 1),

        margin-bottom 0.4s cubic-bezier(0.75, 0, 0.23, 1) 0.4s,
        height 0.4s cubic-bezier(0.75, 0, 0.23, 1) 0.4s,
        padding 0.4s cubic-bezier(0.75, 0, 0.23, 1) 0.4s;



}



.list-item {
    display: flex;
    margin-left: auto;
    opacity: 100%;
    width: 50%;
    background: var(--card);
    padding: 24px;
    height: 100px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    overflow: hidden;
    align-content: center;
    /*shrink, then fade in*/
    transition:
        padding 0.4s cubic-bezier(0.75, 0, 0.23, 1),
        height 0.4s cubic-bezier(0.75, 0, 0.23, 1),
        margin-bottom 0.4s cubic-bezier(0.75, 0, 0.23, 1),

        opacity 0.4s cubic-bezier(0.75, 0, 0.23, 1) 0.4s;

}


.list-item-icon {
    height: 50px;
    width: 50px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    background-color: #e7e7e7;
    image-rendering: pixelated;
    border-radius: 4px;
}
.list-item-text {
    height: 50px;
    align-content: center;
    padding-left: 20px;
}