@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';

* {
    margin: 0;
    padding: 0;
    --bg-color: white;
    --typewriterSpeed: 2s;
    --typewriterCharacters: 24;
}

html {
    /* height: 100vh; */
    width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", "Nunito", sans-serif;
    height: 100vh;
    /* min-height: 100vh; */
    width: 100%;
    background: white;
    /* overflow-y: hidden; */
    overflow-x: hidden;
    position: relative;
}

main {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
}

main>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main>div>h1 {
    margin-top: 2rem;
    font-size: clamp(1rem, 3vw + 1rem, 4rem);
    position: relative;
    font-family: "Source Code Pro", monospace;
    position: relative;
    width: max-content;
}

.avatar {
    vertical-align: middle;
    object-fit: cover;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    box-shadow: rgba(119, 119, 119, 0.776) 0px 7px 29px 0px;
}

/* Typeing effect */
main>div>h1::before,
main>div>h1::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

main>div>h1::before {
    background: var(--bg-color);
    animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards;
}

main>div>h1::after {
    width: 0.125em;
    background: black;
    animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards,
        blink 750ms steps(var(--typewriterCharacters)) infinite;
}

/* *** */
.centerDiv {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* Fade in effect */
.subDiv {
    /* color: hsl(0 0% 0% / 0.7);
    font-size: 2rem;
    font-weight: 400; */
    margin-top: 30px;
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
}

/* **** */

/* Text Scramble Effect */
.scrambleEffectContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrambleText {
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    font-size: 18px;
    color: black;
}

.scrambleTextSecondary {
    color: #757575;
}

/* Infinite Scroll Animation */
.scroller {
    width: 60%;
}

.scroller__inner {
    /* padding-block: 1rem; */
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.iconStyle {
    font-size: 28px;
    color: black;
}

.scrollerText {
    padding: 1rem;
    color: white;
    background: hsl(215, 25%, 27%);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem -0.25rem hsl(218, 33%, 9%);
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg,
            transparent,
            black 20%,
            black 80%,
            transparent);
    mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--__animation-duration, 40s) var(--__animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

/* Transparent Button */
.transparenButton {
    padding: 1rem 5rem;
    border-radius: 10px;
}

/* Footer */
footer {
    background-color: #f3f4f6;
    font-size: 16px;
    color: rgb(154, 154, 154);
    padding: 1rem 1rem;
    text-align: center;
    position: relative;
    top: 100%;
}

/* Typing effect */
@keyframes typewriter {
    to {
        left: 100%;
    }
}

@keyframes blink {
    to {
        background: transparent;
    }
}

/* *** */

/* Fade in effect */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* *** */

/* Infinite Scroll Animation */
@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}



/* Mdia Querry */
@media only screen and (max-width: 600px) {

    /* For hiding the body scroll */
    body {
        overflow-y: hidden;
    }

    /* main heading font size */
    main>div>h1 {
        font-size: 1rem;
    }

    /* Text Scramble Effect text size */
    .scrambleText {
        font-size: 16px;
    }

    /* Scroller size */
    .scroller {
        width: 27%;
    }

    /* Transparent Button padding */
    .transparenButton {
        padding: 1rem 3rem;
    }
    /* For adjusting footer height */
    footer{
        top: 95%;
    }
    footer>p{
        font-size: 0.7rem;
    }
}