style.css

@import url('https://fonts.googleapis.com/css?family=Baloo');


html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: 'Baloo', cursive;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    background: linear-gradient(to bottom right, #5EFCE8, #736EFE);
    color: #F1ECFF;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.title {
    display: flex;
    font-size: 90px;
    margin: 5px;
}

.title-30 {
    position: relative;
    transition: all 0.4s ease-out;
}

.title-30-main {
    color: #5961F9;
    background: -webkit-linear-gradient(#EE9AE5, #5961F9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-30-shadow {
    position: absolute;
    top: 0;
    color: rgba(0, 0, 0, 0.1);
    opacity: 0.6;
    z-index: -1;
    text-shadow: 0 0 1rem #DF5ED4;
    transition: text-shadow 0.4s ease-out;
}

.title-30:hover .title-30-shadow {
    text-shadow: 0 0 2rem rgba(223, 94, 212, 0.8);
}

.title-30:hover {
    transform: scale(1.2);
}

.days {
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: space-between;
    grid-gap: 30px;
}

.days a{
    text-decoration: none;
    color: inherit;
}

.days a:visited{
    text-decoration: none;
    color: inherit;
}

.day {
    position: relative;
    height: 120px;
    width: 100%;
    background-color: #574AE2;
    border: 4px solid #F1ECFF;
    border-radius: 5%;
    box-shadow: 0 0 15px 5px rgba(247, 255, 247, 0.1);
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.4s ease-out;
}

.container:hover .day {
    transform: rotateX(180deg) scale(1.3);
    box-shadow: 0 0 50px #5EFCE8;
}

.face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;  
    text-align: center;  
    padding: 20px;
}

.front {
    font-size: 52px;
    font-weight: 800;
}

.back {
    transform: rotateX(180deg);
    font-size: 24px;
}

.days a:nth-child(4n + 1) .back {
    background-color: #FF9175;
}

.days a:nth-child(4n + 2) .back {
    background-color: #FF66A3;
}

.days a:nth-child(4n + 3) .back {
    background-color: #DF5ED4;
}

.days a:nth-child(4n + 4) .back {
    background-color: #FFC75C;
}