@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
   
       @import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
        .gradient
        {
            margin: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            background-color: rgb(13, 13, 13);
        }
        .darksoul-gradient-card1
        {
            margin: auto;
            margin-right: 1px;
            display: flex;
            width: 250px;
            height: 300px;
            background: linear-gradient(var(--gradient-angle),#03a9f4 , #ff0058, #000000);
            border-radius: 5px;
            animation: rotation 5s linear 0s infinite normal forwards;
            backdrop-filter: blur(50px);
        }
        .darksoul-gradient-card2
        {
            margin: auto;
            display: flex;
            width: 300px;
            height: 400px;
            background: linear-gradient(var(--gradient-angle),#03a9f4 , #ff0058, #000000);
            border-radius: 5px;
            animation: rotation 5s linear 0s infinite normal forwards;
            backdrop-filter: blur(50px);
        }
        .darksoul-gradient-card3
        {
            margin: auto;
            margin-left: 1px;
            display: flex;
            width: 250px;
            height: 300px;
            background: linear-gradient(var(--gradient-angle),#03a9f4 , #ff0058, #000000 );
            border-radius: 5px;
            animation: rotation 5s linear 0s infinite normal forwards;
            backdrop-filter: blur(50px);
        }
        .darksoul-content-card
        {
            margin: auto;
            width: 98%;
            height: 99%;
            background-color: black;
            border-radius: 5px;
            transition: all 0.2s;
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
        }
        .darksoul-content-card h2
        {
            /* font-family: 'Lilita One', sans-serif; */
            color: rgb(255, 255, 255);
            font-size: 25px;
            margin: auto;
            margin-top: 20px;
            /* font-weight: 100; */
        }
        .darksoul-content-card p
        {
            color: rgb(255, 255, 255);
            font-size: 15px;
            margin: auto;
            text-align: center;
            padding-left: 16px;
            padding-right: 16px;
            margin-top: 10px;
        }
        @keyframes rotation 
        {
           0%
           {
                --gradient-angle : 0deg;
           }
           100%
           {
                --gradient-angle : 360deg;
           }
        }
        @property --gradient-angle
        {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }
        @media only screen and (max-width: 700px) 
        {
            .gradient
        {
            margin: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: rgb(13, 13, 13);
        }
        .darksoul-gradient-card1, .darksoul-gradient-card2, .darksoul-gradient-card3
        {
            margin: auto;
            width: 80%;
            min-height: 400px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
     
        }
        .disclaimer
        {
            
            font-family: 'Belanosima', sans-serif;
            position: absolute;
            bottom: 0px; 
            left: 0; 
            margin-left: auto; 
            right: 0; 
            margin-right: auto; 
            width: fit-content;
            color: white;
            text-align: center;
        }
        .disclaimer a
        {
            text-decoration: none;
            color: #0184ff;
        }
        .disclaimer a:hover
        {
            font-weight: bolder;
        }
        ::selection
        {
            background-color: #000000;
            color: rgb(255, 255, 255);
        }