#carousel {
    width: calc(100% + 50px);
    margin: 0px -25px;
    height: 100vh;
    position: relative;
    background-image: url("./img/1.jpeg");
    background-size: cover;
    background-position: 50%;
}

#info {
    position: absolute;
    bottom: 0px;
    padding-left: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    height: 100px;
}

#info > div > h1 {
    margin: 0 0 10px 0px;
}
#carousel > a {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1;
    padding: 10px;
}

#carousel::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 120px;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    background: black;
    background: linear-gradient(180deg,
    rgba(var(--backgroundRGB),0) 0%,
    rgba(var(--backgroundRGB),1) 100%);
}

#carousel2 {
    background-image: url('./img/2.jpg');
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: bottom;
    opacity: 1;
    transition: opacity linear 1s;
}

#recipe-data {
    display: flex;
    align-items: center;
}

#recipe-data > * {
    color: inherit;
    margin-right: 20px;
    display: flex;
    align-items: center
}

#ind {
    padding-left: 20px;
}

#ind > a {
    width: fit-content;

}

#ind > a > li {
    display: flex;
    align-items: center;
}
#ind > a > li {
    transition: ease all .4s
}
#ind > a > li:hover {
    padding-left: 10px;
}

#ind > a > li::before {
    content: 'chevron_right';
    font-family: 'Material Icons Outlined';
    position: relative;
}

#content {
    margin: 20px;
}

hr {
    margin-top: -10px;
}