@import '../tailwind/tailwind-colors.css';

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700&display=swap');

body {
    /*font-family: 'Nunito', sans-serif;*/
    background-color: #0a0d25;
    position: absolute;
    inset: 0;
    display: flex;
    place-content: center;
    align-items: center;
    overflow: hidden;
}



/* Gradient Background ============================================================ */
    
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .gradient {
        --size: 750px;
        --speed: 10s;
        --easing: cubic-bezier(.38,-0.01,.72,1);
        width: var(--size);
        height: var(--size);
        filter: blur(calc(var(--size) / 5));
        background-image: linear-gradient(#0a1455, #0132b9);
        animation: rotate var(--speed) var(--easing) alternate infinite;
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
      }
      
      @media (min-width: 720px) {
        .gradient {
          --size: 1000px;
        }
      }
      
      /* This is just to transition when you change the viewport size. */
      * {
        transition: all 0.25s ease-out;
      }