/* done by Abed H. */

.card {
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-right: 2vh;
    margin-left: 2vh;
}

.card:hover {
    box-shadow: 0px 0px 50px rgb(255, 91, 167);
    border-radius: 30px;
    transition: 1s;
}
.card img:hover{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    transition: 1s;
}

.card-body {
    text-align: center;
}

#historyContainer {
    margin-top: 5vh;
}

#headHistory {
    text-align: center;
    color: white;
    margin-bottom: 3vh;
}

ul {
    text-align: center;
}

ul li {
    margin-right: 2vh;
    margin-left: 2vh;
    margin-bottom: 2vh;
}


figure {
    margin-right: 2vh;
    margin-left: 2vh;
}

.youTubeVideos {
    margin-bottom: 10vh;
}

.error-msg {
    color: rgb(139, 27, 143);
    margin-top: 5vh;
    display: none;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

#searchButton {
    padding-left: 4vh;
    padding-right: 4vh;
}