.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.card {
    overflow: hidden;
    text-align: center;
    position: relative;
    width: 300px;
    height: 300px;
    background-size: cover;
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow: 10px 10px 10px #141313;
    transform: scale(1.1);
    margin: 2rem;
}

.card .colour {
    background: linear-gradient(125deg, rgb(121, 202, 227) 28%, rgb(24, 56, 172) 89%);
}
.card .colour::before{
    background: rgb(48, 87, 215);
}
.card .colour-bottom{
    background: rgb(80, 147, 211);
}
.card .colour-bottom::before{
    background: linear-gradient(125deg, rgb(23, 72, 128) 40%, rgba(165, 194, 255, 0.5) 66%);
}
.colour{
    position: absolute;
    width: 100%;
    height:15%;
    background: linear-gradient(125deg, rgba(255,60,14,1) 28%, rgba(255,255,102,1) 89%);
    right: 120px;
    top:40px;
    transform: rotate(-45deg) translateY(-90px);
}
.colour::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom:40px;
    background-color: #FF3C0E;
    transform: translateX(-145px);
}
.colour-bottom{
    position: absolute;
    width: 100%;
    height: 15%;
    background-color: rgba(97,34,28,1);
    left: 140px;
    top: 245px;
    transform: rotate(-45deg) translateY(95px); ;
}
.colour-bottom::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom:40px;
    background: linear-gradient(331deg, rgba(97,34,28,1) 40%, rgba(125,215,178,1) 66%);
    transform: translateX(-147px);
}

.card-text {
    opacity: 0;
    position: relative;
    top: 80px;
    font-size: 120%;
}
.card:hover{
    border-radius: 50px;
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow: 2px 2px 2px #141313;
}
@keyframes large {
    100% {
        transform: scale(1.01);
    }
}
.card:hover .card-text{
    opacity: 1;
}
.card:hover .colour{
    animation: move .7s ease-in-out forwards;
}
@keyframes move {
    0%{
        transform: rotate(-45deg) translateY(-85px);
    }
    100% {
        transform: rotate(-45deg) translateY(0px);
    }
}
.card:hover .colour-bottom{
    animation: move1 .7s ease-in-out forwards;
}
@keyframes move1 {
    0%{
        transform: rotate(-45deg) translateY(90px);
    }
    100% {
        transform: rotate(-45deg) translateY(0px);
    }
}