:root {
    --dark-bg-color-1: rgb(39, 58, 141);
    --dark-bg-color-2: rgb(10, 23, 83);    
}

body {
    background-color: var(--dark-bg-color-1);
}

main {
    margin-top: 10%;
}

.card-1 {
    background-color: azure;
    width: fit-content;
    padding: 0px 8px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    transform: rotate(10deg);
    transition: 1s cubic-bezier(0.61, -0.5, 0.29, 1.47) 0.2s;    
}

.card-1:hover {
    margin: 80px 0;
    transform: rotate(20deg);
}

.card-2 {    
    background-color: lightcyan;
    width: fit-content;
    padding: 0px 8px;
    font-size: .9rem;
    transform: scale(.9) skew(-10deg);
    margin-left: 0;            
}


/* #first-card {
    visibility: hidden; 
} */