html {
    height: 100%;
    background-size: cover;
    width: 100%;
}
body {
    min-height: 100%;
    min-width: 100%;
}

.grad-lr {
    background-image: linear-gradient(170deg,#27374D, #DDE6ED);
}

.grad-rl {
    background-image: linear-gradient(200deg, #3D7272, #DDE6ED);
}

.social-grad {
    background-image: linear-gradient(120deg, #383f56, #DDE6ED);
}

.bg-blur {
    backdrop-filter: blur(10px);
}

.loading {
    position: fixed;
    z-index: 999;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    text-align: center;
    padding-top: 7%;
    margin-left: 0px;
    padding-right: 0px;
    -moz-animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;
    -moz-animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    -ms-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

    .loading.fadeOut {
        -moz-animation-name: fadeOut;
        -webkit-animation-name: fadeOut;
        -ms-animation-name: fadeOut;
        animation-name: fadeOut;
    }

    .loading img {
        width: 20%;
    }

    .loading h1 {
        color: #385b88;
        font-weight: lighter;
        font-size: 59px;
        font-variant-caps: all-small-caps;
        letter-spacing: 13px;
    }


.softbg{
    background-color: hsl(196, 25%, 60%, 0.49)
}