@font-face {
    font-family: GlitchGoblin;
    src: url(fonts/GlitchGoblin.ttf);
}
@font-face {
    font-family: Drexs;
    src: url(fonts/Drexs.otf);
}

body {
    background: url(../img/login_bg-min.jpg) no-repeat center;
    background-size: cover;
    position: relative;
}

.card {
    border: none;
}

.card-body {
    border: none;
    background-image: linear-gradient(135deg, #2d5b89, #419ab4);
}

.btn {
    background-color: white;
}

.center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.login-card {
    width: 400px;
    /*box-shadow:  0 4px 8px 0 #4fe6eb, 0 4px 20px 11px #4fe6eb;
  animation-name: glow;*/
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.login-card,
.card-body {
    border-radius: 11px;
}

@keyframes glow {
    from {
        box-shadow: none;
    }
    to {
        box-shadow: 0 4px 8px 0 #4fe6eb, 0 4px 20px 11px #4fe6eb;
    }
}

@media only screen and (max-width: 768px) {
    body {
        background: url(../img/login_bg.jpg);
        background-size: cover;
        position: relative;
    }

    .login-card {
        width: 90%;
    }
}