@media (max-width:700px) {
              header  .logo {
width: 50%;
                        height: 50%;
                }
            header {
                flex-direction: column;
                border: solid 1px white !important;
            }
            body {
                margin: 0;
                padding-right: 0px !important;
            }
            html {
                margin: 0;
                padding-right: 0px !important;
            }
        }
        
        header {
            display: flex;
            min-height: 70px;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: rgb(0, 255, 0);
            top: 0px;
            border: 5px solid white;
            width: 100%;
        }
        
        spann {
            display: block;
            white-space: nowrap;
            border-right: 4px solid;
            width: 39ch;
            animation: typing 2s steps(12), blink .5s infinite step-end alternate;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            width: 100%;
        }
        
        @keyframes typing {
            from {
                width: 0
            }
        }
        
        @keyframes blink {
            50% {
                border-color: transparent
            }
        }
        
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            display: flex;
            flex-wrap: wrap !important;
            /* justify-content: center;
        align-items: center; */
            min-height: 100vh;
            /* flex-direction: column; */
            background: #23242a;
        }
        
        h3,
        h4 {
            color: rgb(255, 255, 255);
        }
        
        a {
            color: rgb(255, 255, 255);
            font-size: 15px;
        }
        
        #contenedor {
            display: flex;
            /*   justify-content: center !important; */
            /* align-items: center !important; */
            flex-wrap: wrap !important;
            gap: 1rem !important;
            padding: 1rem 1rem;
            /* padding-top: 11rem !important; */
        }
        
        .card-title {
            font-size: 1rem !important;
            font-weight: 600;
        }
        
        .item {
            display: flex !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 5px !important;
            padding: 5px !important;
        }
        
        .card {
            display: flex;
            flex-wrap: wrap;
        }
        
        .box {
            position: relative;
            width: 309px;
            /* width: 360px; */
            /* height: 420px; */
            height: 177px;
            background: #1c1c1c;
            border-radius: 5px;
            overflow: hidden;
            z-index: 1;
        }
        
        .box::before {
            content: '';
            z-index: -1;
            position: absolute;
            top: -90%;
            left: -30%;
            width: 250px;
            height: 250px;
            transform-origin: bottom right;
            background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
            animation: animate 6s linear infinite;
        }
        
        .box::after {
            content: '';
            z-index: -1;
            position: absolute;
            top: -90%;
            left: -30%;
            width: 250px;
            height: 270px;
            transform-origin: bottom right;
            background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
            animation: animate 6s linear infinite;
            animation-delay: -3s;
        }
        
        @keyframes animate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }