/* This code is also made by me - Vinicius :) - feel free to contact me so we can create amazing things together */

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

:root {
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --grey-dark: rgba(0, 0, 0, .8);
    --grey-medium: rgba(0, 0, 0, .47);
    --link-color: hsla(200, 95%, 60%, 1);
    --link-hover: hsla(190, 95%, 60%, 1);
    --glass-color1: hsla(210, 100%, 90%, 0.05);
    --glass-color2: hsla(210, 100%, 95%, 0.10);
    --gradient-color1: hsla(270, 100%, 50%, 1);
    --gradient-color2: hsla(210, 100%, 50%, 1);
}

/* Text Styling */
h1,
h2,
h3,
h4,
h5,
p,
* {
    font-family: 'Montserrat', sans-serif;
}

h1,
h2 {
    font-weight: 700;
}

h3 {
    font-weight: 600;
}

.navbar-brand {
    font-weight: 700;
}

.navbar a {
    font-weight: 600;
}

.navbar a:hover {
    color: var(--link-color);
}

.text-bold {
    font-weight: 700;
}

.hero {
    overflow: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.gradient-text {
    background: linear-gradient(90deg, #BB6BD9 0%, var(--link-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.eclipse,
.eclipse-back {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 100%;
}

.eclipse {
    width: 60%;
    padding-top: 60%;
    background: #000000;
    filter: blur(5px);
    transform: translate3d(-50%, -50%, 0);

}

.eclipse-back {
    width: 65%;
    padding-top: 40%;
    background: linear-gradient(90deg, var(--gradient-color2) 0%, var(--gradient-color1) 100%);  
    animation: eclipse 5s infinite alternate ease-in-out;
}

.eclipse-mobile-wrap {
    position: relative;
}

.eclipse.eclipse-mobile,
.eclipse-back.eclipse-mobile {
    top: 50%;
    width: 90%;
    padding-top: 90%;
}

.eclipse-back.eclipse-mobile {
    padding-top: 45%;
    width: 110%;
    animation: eclipse-mobile 5s infinite alternate ease-in-out;
}

@keyframes eclipse {
    0% {
        filter: blur(80px);
        transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    }

    100% {
        filter: blur(90px);
        transform: translate3d(-50%, -50%, 0) rotate(-135deg) scale(.9);
    }
}

@keyframes eclipse-mobile {
    0% {
        filter: blur(25px);
        transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    }

    100% {
        filter: blur(20px);
        transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(.6);
    }
}

.gradient-ellipse {
    background: linear-gradient(91.87deg, var(--gradient-color1) 24.18%, var(--gradient-color2) 77.59%);
    transform: translate3d(-50%, 0, 0);
    filter: blur(100px);
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    display: block;
    bottom: -79%;
    left: 50%;
    opacity: .5;
    filter: blur(100px);
    transform: translate3d(-50%, 0, 0);
}


.animated-light {
    background: linear-gradient(91.87deg, var(--gradient-color1) 24.18%, var(--gradient-color2) 77.59%);
    transform: translate3d(-50%, 0, 0);
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 250px;
    max-height: 250px;
    border-radius: 50%;
    display: block;
    transform: translate3d(0, 0, 0);
    animation: light-moving 10s infinite alternate ease-in-out;
}


.animated-light.light-2 {
    animation: light-moving 10s infinite alternate-reverse ease-in-out;
}

.portfolio-section {
    background: #DDE5EE;
}

.portfolio-section h4 {
    color: #f3f3f3;
}

.portfolio-section .readmore {
    text-decoration: transparent;
    font-weight: 800;
    color: var(--link-color);
    opacity: 1;
    transition: all 0.10s ease-in-out;
}

.portfolio-section .readmore:hover {
    opacity: 1;
    color: var(--link-hover);
    text-decoration: var(--link-hover);
    transition: all 0.10s ease-in-out;
}

.portfolio-section .glass-effect {
    background: linear-gradient(45deg, var(--glass-color1), var(--glass-color2)), var(--glass-color1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(45deg, var(--glass-color1), var(--glass-color2));
}

.portfolio-section img {
    transition: .15s all ease-in;
}

.portfolio-section img:hover {
    transform: scale(1.02);
    transition: .15s all ease-in;
}

/* Portfolio pages */
.info-tag {
    border: 1px solid var(--grey-dark);
    border-radius: 8px;
    box-sizing: border-box;
}

.info-tag p:first-of-type {
    margin-bottom: 0;
    font-weight: var(--font-weight-bold);
}

.fanfest-bg {
    background-color: #281966;
    ;
}

.fanfest-gif-parent {
    position: relative;
}

.fanfest-mock-gif {
    max-width: 58%;
}

.color-box {
    display: inline-block;
    height: 24px;
    width: calc(100%/9);
}

.avail-bg {
    background-color: rgb(11, 46, 81);
}

.bg-avail-img {
    background: url('../media/avail-pages.png') no-repeat fixed;
    background-position: 38vw 100px;
}

.oi-telecom-bg {
    background-color: #072C09;
}

.bubble-bg {
    background: url('../media/bubble.png') no-repeat 100% -50%;
}

.corollarium-bg {
    background-color: #04212F;
    background: url('../media/bg-corollarium.png') no-repeat center center fixed;
    background-size: cover;
}

.video-embed {
    display: block;
    margin: auto;
    max-width: 100%;
}

@keyframes light-moving {
    0% {
        transform: translate3d(-25%, 25%, 0);
        top: 0%;
        left: 100%;
        filter: blur(100px);
    }

    50% {
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        left: 50%;
        filter: blur(150px);
    }

    100% {
        transform: translate3d(-100%, -100%, 0);
        top: 100%;
        left: 0%;
        filter: blur(100px);
    }
}