* {
    user-select: none;
}

html, body {
    height: 100%;
}

.background {
    background: #326273 no-repeat center;
    background-size: cover;
}

.card {
    box-shadow: .3rem .3rem .3rem #0000007e;
    transition: box-shadow .2s ease-in-out;
    animation: cardLoad .7s ease-out;
}

.card:hover {
    box-shadow: .2rem .2rem .2rem #0000007e;
}

.card-footer a {
    color:#326273; 
    font-size: 2rem;
    text-decoration: none;
    transition: box-shadow .1s ease-in-out;
}

.card-footer a:hover {
    color:#264753;
}

@keyframes load {
    from {transform: rotateX(0deg); opacity: 1;}
    to {transform: rotateX(0deg); opacity: 0;}
}

@keyframes cardLoad {
    from {transform: rotateX(15deg); opacity: 0.5;}
    to {transform: rotateX(0deg); opacity: 1;}
}