@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import "../__common__/root.scss";

* {
    font-family: "Fira Code", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

#gradient-canvas {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    --gradient-color-4:#009990;
    --gradient-color-2:#D9EAFD;
    --gradient-color-3:#E24C3F;
    --gradient-color-1:#ffc813;
    // mask: radial-gradient(circle, #0000 100px, rgba(0, 0, 0, 0.9) 160px);
}


.landing {
    // Dark
    background-color: $primary-dark;
    --color: rgba(114, 114, 114, 0.3);

    .transition {
        background: rgb(29,29,29);
        background: linear-gradient(0deg, rgba(29,29,29,1) 0%, rgba(255,255,255,0) 90%);
    }

    background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
    linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
    
    $size: 70px;
    background-size: $size $size;

    .text_container {
        position: absolute;
        top: 40%;
        left: 20%;
        transform: translate(-20%, -40%);
        text-transform: capitalize;
        text-align: left;
        color: $primary-light;

        h5 {
            font-size: 1vw;
        }

        h1 {
            font-size: 7vw;
        }

        code {
            font-size: 2vw;
            text-transform: lowercase;
        }
    }

    .side_text {
        position: absolute;
        top: 75%;
        left: 0%;
        transform: translate(0%, -75%);
        width: 43vw;
        justify-content: center;
        display: flex;
        align-items: center;
        color: $primary-light;

        .text_holder {
            width: 80%;

            h1{
                font-size: 3vw;
            }
    
            p {
                font-size: 1vw;
            }

        }
    }

    .transition {
        position: absolute;
        top: 100%;
        transform: translate(0%, -100%);
        width: 100%;
        height: 7.5vw;
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .gradient_container {
        position: absolute;
        top: 50%;
        left: 90%;
        width: 25vw;
        height: 25vw;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        transform: translate(-90%, -50%);
        z-index: 2;
        clip-path: circle(50%);
        overflow: hidden;
        mask: radial-gradient(circle, rgba(0, 0, 0, 1) 7vw, #0000 13vw);
        filter: blur(1vw);
    }
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {

    .landing {

        overflow-x: hidden;
        overflow-y: hidden;

        // Shape 1
        .gradient_parent_container {
            position: absolute;
            top: 99%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            overflow-x: hidden;
            overflow-y: hidden;

            .gradient_container {
                position: relative;
                top: 0;
                left: 0;
                transform: translate(-25%, -0%) rotate(90deg);
                width: 200%;
                height: 100%;
                border-radius: 50%;
                z-index: 2;
                clip-path: circle(50%);
                overflow: hidden;
                mask: radial-gradient(circle, rgba(0, 0, 0, 1) 7vw, #0000 50%);
                filter: blur(1vw);
            }
        }   

        .text_container {
            position: relative;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -40%);
            text-transform: capitalize;
            text-align: left;
            color: $primary-light;
            width: 100%;
    
            h5 {
                text-align: center;
                font-size: 4vw;
                // margin-left: 8vw;
            }
    
            h1 {
                text-align: center;
                font-size: 25vw;
                // margin-left: 8vw;
            }
    
            code {
                width: 100%;
                display: inline-block;
                position: relative;
                text-align: center;
                font-size: calc(1vw + 1em);
                text-transform: lowercase;
            }
        }

        .transition {
            position: absolute;
            top: 101%;
            transform: translate(0%, -100%);
            width: 100%;
            height: 20vh;
            z-index: 9;
        }
    }
    
}