@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

/* DEFAULT VALUES */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100dvh;
}

/* ANIMATED BACKGROUND */

.PageContent {
    justify-content: center;
    align-items: center;
    background-color: #ff3a47;
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
}

.blob-container {
    min-height: 100vh;
    overflow: hidden;
    position: absolute;
    width: 100%;
    filter: blur(5px);
}

.blob {
    border-radius: 50%;
    opacity: 0.8;
    position: absolute;
}

    .blob.one {
        background: #ccf6c8;
        height: 200px;
        width: 200px;
        left: 10px;
        top: 10px;
        animation: movement_two 18s ease-in-out infinite both;
    }

    .blob.two {
        background: #e8d5fd;
        height: 200px;
        width: 200px;
        left: 1000px;
        top: 30px;
        animation: movement_two 21s ease-in-out infinite both;
    }

    .blob.three {
        background: #bce1f1;
        height: 160px;
        width: 160px;
        left: 500px;
        top: 60px;
        animation: movement_one 12s ease-in-out infinite both;
    }

    .blob.four {
        background: #cdefe7;
        height: 120px;
        width: 120px;
        left: 480px;
        top: 250px;
        animation: movement_one 16s ease-in-out infinite both;
    }

    .blob.five {
        background: #ffcef5;
        height: 100px;
        width: 100px;
        left: 150px;
        top: 400px;
        animation: movement_two 7s ease-in-out infinite both;
    }

    .blob.six {
        background: #e8d5fd;
        height: 130px;
        width: 130px;
        left: 400px;
        top: 400px;
        animation: movement_two 12s ease-in-out infinite both;
    }

    .blob.seven {
        background: #ffe083;
        height: 130px;
        width: 130px;
        left: 280px;
        top: 90px;
        animation: movement_two 13s ease-in-out infinite both;
    }

    .blob.eight {
        background: #fdffbc;
        height: 130px;
        width: 130px;
        left: 700px;
        top: 400px;
        animation: movement_two 16s ease-in-out infinite both;
    }

    .blob.nine {
        background: #fdcedf;
        height: 160px;
        width: 160px;
        left: 750px;
        top: 20px;
        animation: movement_two 10s ease-in-out infinite both;
    }

    .blob.ten {
        background: #cdefe7;
        height: 120px;
        width: 120px;
        left: 920px;
        top: 400px;
        animation: movement_one 11s ease-in-out infinite both;
    }

@keyframes movement_one {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: translate(50%, 20%) scale(1);
    }
}

@keyframes movement_two {
    0%, 500% {
        transform: none;
    }

    50% {
        transform: translate(20%, 80%) scale(1.3);
    }
}


/* CARD */

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
    z-index: 5;
}

.card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: min(1200px, 100%);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 70px 20px;
}

/* DESCRIPTION */

.description {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 50px;
    font-family: "Poppins", sans-serif;
    padding: 0 30px;
}

    .description > p {
        margin-bottom: 10px;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 400;
        color: #6b7280;
        text-align: center;
    }

    .description > button {
        width: 180px;
        height: 45px;
        font-family: inherit;
        font-size: 1.1rem;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
        margin-bottom: 50px;
        text-align: center;
        border: none;
        background-size: 300% 100%;
        background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
        box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
        border-radius: 50px;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

        .description > button:hover {
            background-position: 100% 0;
            moz-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }

/* TITLE */

.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .title > h1 {
        font-size: clamp(3rem, 6vw, 9rem);
        font-weight: 600;
        color: #0096C3;
        line-height: 1.3;
        margin: 30px;
        text-align: center;
        font-family: 'Comfortaa', cursive;
    }

        .title > h1 span {
            position: relative;
        }

            .title > h1 span::before {
                content: "";
                position: absolute;
                top: 90%;
                width: 100%;
                left: 0;
                height: 7px;
                border-radius: 5px;
                background: linear-gradient( 89.7deg, #fb7d7d 2.7%, #f4a062 15.1%, #f8fd95 29.5%, #b0faaf 45.8%, #bcf8f8 61.5%, #989cff 76.4%, #f0b5ff 92.4% );
            }

/* MEDIA QUERIES */

@media (max-width: 1010px) {
    .description {
        gap: 30px;
        padding: 0 0;
    }

        .description > p {
            font-size: 0.9rem;
        }

        .description > button {
            font-size: 1rem;
            margin-bottom: 10px;
        }
}

@media (max-width: 670px) {
    .card {
        grid-template-columns: 1fr;
        grid-template-rows: 50% 50%;
        grid-template-areas:
            "title"
            "description";
        gap: 10px;
        padding: 30px 20px 50px;
    }

    .description {
        grid-area: description;
        gap: 20px;
    }

        .description > p {
            margin-bottom: 8px;
            padding: 0 20px;
        }

        .description > button {
            width: 160px;
            height: 50px;
            margin-bottom: 20px;
        }

    .title {
        grid-area: title;
    }

        .title > h1 {
            margin: 0;
        }
}