*{
    padding: 0%;
    margin: 0%;
}

#cardcarousel{
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0F1321;; background-position: 58.6%;
}
#card1,#card2,#card3,#card4,#card5,#card6{
    width: 8%;
    height: 70%;
    display: flex;
    justify-content: right;
    align-items:end;
    border-radius: 10px;
    font-size: 30px;
    transition: width 2s ease;
    margin-left: 10px;
    color: white;
    box-shadow: 1px 1px 5px grey;
    text-shadow: black 1px 1px 1px;
}


#card1{
    background-image: url('assets/hackathonbackgroundcard.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20%;
}
#card2{
    background-image: url('assets/talkscardcarousel.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20%;
}

#card3{
    background-image: url('assets/gamecardcarousel.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20%;
}

#card4{
    background-image: url('assets/workshopcardcarousel.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20%;
}

#card5{
    background-image: url('assets/proshowcardcarousel.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20%;
}

#card6{
    background-image: url('assets/intracollege.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20%;
}