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

:root {
    --background: #131418;
    --secondary-background: #18191D;
    --color-text: #f8f8f8;
    --select-color-text: #1f2937;
    --title-gradient: linear-gradient(90deg, rgba(248,248,248,1) 0%, rgba(125,125,125,1) 100%);

    /* Animation */
    --transition-time: 0.2s;
    --loop-scroll-time: 20s;
    --noise-animation-time: 0.2s;
    --enter-animation-time: 0.8s;
}

* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: var(--background);
;
}

.link-text-navbar {
    color: var(--color-text);
    transition: color var(--transition-time);
    -webkit-transition: color var(--transition-time);
}

.text-main-title {
    font-weight: 800;
    background-image: var(--title-gradient);
    color: transparent;
    background-clip: text;
}

.text-sub-title {
    font-weight: 250;
    background-image: var(--title-gradient);
    color: transparent;
    background-clip: text;
}

.background-secondary {
    background-color: var(--secondary-background);
}

.background-secondary img {
    height: 50px;
    opacity: 30%;
    transition: opacity var(--transition-time);
}

.background-secondary img:hover {
    opacity: 100%;
}

/* Tooltip System */
.icon-tooltip {
    position: relative;
    display: inline-block;
}

.icon-tooltip img {
    height: 35px;
    opacity: 50%;
    transition: opacity var(--transition-time);
}

.icon-tooltip:hover img {
    opacity: 1;
}

.tooltip-text {
    visibility: hidden;
    width: auto;
    background-color: var(--select-color-text);
    text-align: center;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    position: absolute;
    z-index: 1;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    white-space: nowrap;
    transition: opacity var(--transition-time);
}

.icon-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Skills Carousel Animations */
.scroll {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    mask-image: linear-gradient(
            90deg,
            transparent,
            #fff 20%, /* Lado Esquerdo */
            #fff 80%, /* Lado Direito  */
            transparent
    );
}

.scroll div {
    white-space: nowrap;
    animation: scroll var(--time) linear infinite;
    animation-delay: calc(var(--time)*-1);
}

.scroll div:nth-child(2) {
    animation: scroll2 var(--time) linear infinite;
    animation-delay: calc(var(--time)/-2);
}

.scroll div img {
    max-width: 100px;
    scale: 0.8;
    margin-left: 50px;
}

.imgBox div {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Background Effects */
.background-gloom {
    background: radial-gradient(
            circle closest-corner at center 125px,
            var(--select-color-text),
            #191b1f 70%
    ) no-repeat;
}

.background-gloom::after,
.background-gloom::before {
    content: "";
    position: absolute;
    background: var(--select-color-text);
    width: min(500px, 20vw);
    height: min(500px, 30vh);
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: lighten;
    opacity: 80%;
}

.background-gloom::before {
    top: 0;
    right: 0;
    transform: translate(0%, -25%);
}

.background-gloom::after {
    top: 50%;
    left: 0;
    transform: translate(-50%, 10%);
}

/* Noise Effect */
.noise {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200vh;
    background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
    opacity: .375;
    visibility: visible;
    animation: noise-animation var(--noise-animation-time) infinite;
}

@keyframes loop-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@keyframes scroll2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}

@keyframes noise-animation {
    0% { transform: translate(0,0); }
    10% { transform: translate(-5%,-5%); }
    20% { transform: translate(-10%,5%); }
    30% { transform: translate(5%,-10%); }
    40% { transform: translate(-5%,15%); }
    50% { transform: translate(-10%,5%); }
    60% { transform: translate(15%,0); }
    70% { transform: translate(0,10%); }
    80% { transform: translate(-15%,0); }
    90% { transform: translate(10%,5%); }
    100% { transform: translate(5%,0); }
}

@keyframes enter-animation {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-loop-scroll {
    animation: loop-scroll var(--loop-scroll-time) linear infinite;
    white-space: nowrap;
    display: inline-block;
}

.image-animation {
    animation: enter-animation var(--enter-animation-time) 1;
}

@media (prefers-reduced-motion: no-preference) {
    .image-animation {
        animation: enter-animation var(--enter-animation-time) 1;
    }
}