@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');
    @import 'animation.css';
    body {
        background: linear-gradient(#0061a8, #011d33);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 100vw;
    }
    
    .wrap {
        background-image: url('../img/background.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Poppins', sans-serif;
    }
    
    .bg-cx-primary {
        background: #044272;
    }
    
    .bg-cx-secondary {
        background: #79C83D;
    }
    
    .text-cx-primary {
        color: #0072C6;
    }
    
    .cx-container {
        max-width: 400px;
        max-height: 600px;
        background: rgb(4, 66, 114, 0.6);
        transition: 0.5s;
        /*
        border-radius: 50px;**/
    }
    
    button {
        transition: 0.3ms;
        color: #fff;
    }
    
    button:hover {
        background: #4e9c12
    }
    
    @media screen and (max-width: 576px) {
        .cx-container {
            background: none;
        }
        body {
            background: radial-gradient(to left, #00375e, #011d33);
        }
    }
    
    .tracking-in-expand {
        -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        animation: tracking-in-expand 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }
    
    .shake-horizontal {
        -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    }