:root{
    font-size: 16px;
    --background-color: #061529;
    --background-color2: #0b2241;
    --background-color3: rgb(20, 20, 20);
    --title-color: #A5D7E8;
    --white: #ffffff;
    --card-border: #1A5F7A;
}

body{
    overflow-x: hidden;
}

body::-webkit-scrollbar{
    width: 0.5rem;
}

body::-webkit-scrollbar-track{
    background: var(--background-color3);
}

body::-webkit-scrollbar-thumb{
    background: aquamarine;
    border-radius: 23px;
}

.title2{
    animation: reveal both linear;
    animation-timeline: view();
    animation-range: entry 70% cover 30%;
    color: var(--white);
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8em;
    line-height: 2em;
    padding-bottom: 2em;
}

@keyframes reveal {
    from{
        transform: translateY(30%);
        opacity: 0.5;
    }
    to{
        transform: translateY(0%);
        opacity: 1;
    }
}

.bloob{
    animation: rotate 10s infinite;
    position: absolute;
    background: linear-gradient(to right, #e6a0a0 5%, #4aafb3);
    filter: blur(4.5em);
    height: 15vmax;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none; /* faz o blob não ser clicavel, permitindo o click de outras coisas embaixo dele */
    z-index: 1;
}

@keyframes rotate {
    from {
        rotate: 0deg;
    }

    50%{
        scale: 1 1.5;
    }

    to{
        rotate: 360deg;
    }
}

@media screen and (max-width: 1020px) {
    .bloob{
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .text-svg{
        background-image: none;
        background-color: var(--background-color3);
    }
}

@media screen and (max-width: 500px) {
    .title2{
        padding-bottom: 0.5em;
    }
}