@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic');
:root{
    --color-primary: #00bcd4;
    --color-secondary: #5d05ff;
    --color-bg: #111;
    --outline-color: rgb(48, 48, 48);
}

body{
    background-color: var(--color-bg);
    background-image: url("https://cdn.e-z.host/e-zimagehosting/d75c90cd-9bbb-4b19-b2c7-c65b5fbdf1e1/l129cqn8.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    font-family: 'Montserrat', sans-serif;
    color: #fff;
    text-align: center;
    margin: 0;
}

.card{
    width: 300px;
    height: 400px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(64, 63, 62, 0.5);
    box-shadow: 0px 0px 60px #090909;
}

img{
    border-radius: 7px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.762);
}

.card-header{
    margin-top: 30%;
}

h1{
    margin-top: 0vh;
}

.link{
    color: #888;
}

.link:hover{
    transition: all 0.3s ease-in-out;
    color: #ffffff;
}

@media (max-width: 400px) {
    .card{
        width:80%;
    }
}

.views{
    color: #888;
    bottom: 0;
    position: absolute;
    width: 100%;
    margin-bottom: 1vh;
}


footer{
    position: absolute;
    width: 100%;
    color: #888;
    bottom: 0;
}