@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700&display=swap&subset=latin-ext');

body {
    background: radial-gradient(ellipse at center, #1f3649 0%, #17253d 44%, #040d11 100%);
    color: white;
    min-height: 100vh;
    font-family: 'Lato', 'Open Sans', Helvetica, sans-serif !important;
    font-weight: 300;
}

.flex-col-center {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.app {
    background-color: #33363c;
    margin: 1em 2.7em 1em 3.2em;
    /* top right  bottom left*/ 
    border-radius: .25em;
    padding: .6em .2em;

}
.box-info-logo {
    width: 200px;
    margin-top: 1em;
}
.box-info, .form-login, .form-recover {
    padding: 1.5em;
}
.form-container {
}
.box-info, .box-login-title, .bg-blue {
    background: #319cb4;    
}
.box-login-title {
    padding: .75em 0em 0em 1em;
}
.box-info-features {
    text-align: left;
}
.box-info-features img {
    margin: 0 .5em;
}

.box-login {
    background: white;
    color: black;
    position: relative;
}
.block-login {
    max-width: 620px;
    min-height: 360px;
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
}
.placeholder {
    position: fixed;
    top: 0;
    left: 0;
    filter: hue-rotate(20deg) grayscale(0.5) contrast(0.5);
    opacity: 0.9;
}



.goodluck-amulet {
    min-height: 7em;
    font-size: 5vmin;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;

}
.goodluck-amulet span {
    margin-right: .25em;
}



.block-academia .card {
    transform: scale(0.9);
    filter: blur(.5px);
    transition: transform .25s ease-in-out, filter .5s ease-in-out;
}
.block-academia .card:hover {
    transform: scale(1);
    filter: blur(0px);
}




.text-green {
    color: #3da153;
}
.bg-green {
    background-color: #3da153;
}
.bg-black {
    background-color: #222222;
}


.ladda-button {
    border-radius:  5em; 
    flex: 1 1 100%;
    --padding: .5em 2em;
}



div.page {
    display: block;
}
.loading-screen {
    transition: opacity .5s ease-out;
}
body.loaded .loading-screen {     
    opacity: 0;
    pointer-events: none;
}