*{box-sizing: border-box;}
:root {
    --main-bg-color: rgb(32, 32, 32);
    --bg-gradient: linear-gradient(to bottom,rgb(66, 66, 66),rgb(44, 44, 44));
}
body{
    margin:0;
    letter-spacing: 2px;
    font-family: 'Roboto', sans-serif;
}
.container{
    width: 100vw;
    height: 100vh;
    background-color: var(--main-bg-color);
    /* background-image: var(--bg-gradient); */
    position: relative;
    overflow: hidden;
}
.card-container{
    color:white;
    border: 3px solid white;
    display: grid;
    place-items: center;
    text-align: center;
    width:max(12vw,150px);
    height: max(18vw,225px);
    /* background-color: firebrick; */
    background-image: radial-gradient(circle at 50% 50%,rgb(189, 47, 28),rgb(185, 84, 80));
    /* background-image: linear-gradient(to bottom,rgb(189, 47, 28),rgb(185, 84, 80)); */
    position: absolute;
    border-radius: 5%;
    font-family: 'Mountains of Christmas', cursive;
    animation-name: slow-rotate;
    animation-iteration-count: infinite;
    z-index: 1;
    font-size: max(1vw,12px);
}
.card-container:hover{
    animation: none;
    width: max(13vw,160px);
    height: max(20vw,240px);
    transition: .3s;
    z-index: 20;
    font-size: max(1.1vw,13px);
}

.card-container p{
    font-size: 1em;
}
.card-container a{
    color: inherit;
}

.card-container .title{
    font-size: 1.5em;
}

.card-container .hole{
    width: 2vh;
    height: 2vh;
    background-color: var(--main-bg-color);
    border-radius: 50%;
    position: relative;
}
.card-container .hole .string{
    width:20%;
    height: 100vh;
    background-color:darkolivegreen;
    position: absolute;
    bottom: 80%;
    right:40%;
}

.card-container.num-1{
    left:20vw;
    top:5vh;
    animation-duration: 6s;
}

.card-container.num-2{
    right:20vw;
    top:30vh;
    animation-duration: 7s;
}

.card-container.num-3{
    left:40vw;
    top:40vh;
    animation-duration: 5s;
}

.snowflake{
    background-image: url(snowflake.svg);
    position: absolute;
}

.falling-6{
    width:5px;
    height: 5px;
    top:-5px;
    border-radius: 50%;
    background-image: none;
    animation: falling linear;
    animation-duration: 32s;
    background-color: white;
}

.falling-5{
    width:10px;
    height: 10px;
    top:-10px;
    animation: falling linear;
    animation-duration: 16s;
}

.falling-4{
    width:20px;
    height: 20px;
    top:-20px;
    animation: falling linear;
    animation-duration: 8s;
}

.falling-3{
    width:40px;
    height: 40px;
    top:-40px;
    animation: falling linear;
    animation-duration: 4s;
    z-index: 10;
    filter: blur(1px);
}

.falling-2{
    width:80px;
    height: 80px;
    top:-80px;
    animation: falling linear;
    animation-duration: 2s;
    z-index: 10;
    filter: blur(2px);
}

.falling-1{
    width:160px;
    height: 160px;
    top:-160px;
    animation: falling linear;
    animation-duration: 1s;
    z-index: 10;
    filter: blur(4px);
}



@keyframes falling{
    0% {
        transform: translate(0,0) perspective(400px) rotateY(55deg);
    }
    100% {
        transform: translate(0,120vh) perspective(400px) rotateY(-55deg);
    }
}

@keyframes slow-rotate {
    0% {
        transform: perspective(400px) rotateY(25deg);
    }
    50% {
        transform: perspective(400px) rotateY(-25deg);
    }
    100% {
        transform: perspective(400px) rotateY(25deg);
    }
}