@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Tiny5&display=swap');
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

body
{
    background-color: #e6beec;
    overflow-y: hidden;
    height:100vh;
    width: 100%;
    font-family: "Afacad Flux", sans-serif;
}

.container
{
    display: flex;
    height:100vh;
    width: 100%;
    flex-direction: column;
    padding: 30px;

    .top
    {
        height: 15%;
        width: 100%;
        background: #da9fe3;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 30px;
        border-radius: 10px;
        
        .name
        {
            .firstname
            {
                font-weight:300;
            }
        }
    }

    .bottom
    {
        height: 80%;
        width: 100%;
        margin-top: 3px;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 9px;

        .left
        {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-right: 7px;

            .top-half
            {
                height: 60%;
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding-right: 7px;
                padding-top: 7px;
                padding-bottom: 7px;

                .typewriter {
                    height: 100%;
                    width: 67%;
                    background: #da9fe3;
                    padding: 7px 50px 7px 30px;
                    border-radius: 10px;
                    align-content:center;
                    white-space: normal;
                    display: inline-block;
                    transition: 0.5s all ease-in-out;
                    font-size: 73px;
                    overflow: hidden;
                    animation: bloomEffect 0.8s ease-out forwards;
                    opacity: 0;
                }
                .displayMessage {
                    white-space: nowrap;
                    overflow: hidden;
                    display: inline-block;
                    animation: typewriter 4s steps(40) 1s 1 normal both;
                    border-right: 3px solid black;
                }
                
                .typewriter i {
                    font-style: italic;
                    font-size: 60px;
                    font-family: "Afacad Flux", sans-serif;
                    color: #000;
                }

                .typewriter span
                {
                    font-weight: 700;
                    background: linear-gradient(to right, #c134da, #3c253f);
                    -webkit-background-clip: text;
                    color: transparent;
                    font-family: "Poppins", serif;
                    font-size: 60px;
                }                    
                
                .typewriter:hover
                {
                    transform: scale(1.005);
                    box-shadow: 0 10px 20px rgba(116, 4, 147, 0.636);
                    transition: 0.5s all ease-in-out;

                }

                .avatar
                {
                    height: 100%;
                    width: 30%;
                    background: #da9fe3;
                    border-radius: 10px;
                    transition: 0.5s all ease-in-out;
                    animation: bloomEffect 0.8s ease-out forwards;
                    opacity: 0;
                    animation-delay: 0.4s;
                    .image{
                        width: 100%;
                        height:100%;
                        object-fit: cover;
                        mask-image: radial-gradient(circle, rgba(0,0,0,1)50%, rgba(0,0,0,0.3)90%, rgba(0,0,0,0)100%);
                        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1)50%, rgba(0,0,0,0.3)90%, rgba(0,0,0,0)100%);
                    }
                }
                
                .avatar:hover
                {
                    transform: scale(1.005);
                    box-shadow: 0 10px 20px rgba(116, 4, 147, 0.636);
                    transition: 0.5s all ease-in-out;
                }
            }
            
            .bottom-half
            {
                height: 40%;
                width: 100%;
                display: flex;
                flex-direction: row;
                padding-right: 7px;
                padding-top: 7px;
                padding-bottom: 7px;
                justify-content: space-between;
                
                .intro
                {
                    height: 100%;
                    width: 48.5%;
                    background: #da9fe3;
                    padding: 15px;
                    border-radius: 10px;
                    font-size: 19px;
                    align-content: end;
                    transition: 0.5s all ease-in-out;
                    animation: bloomEffect 0.8s ease-out forwards;
                    opacity: 0;
                    animation-delay: 2s;
                }
                
                .intro:hover
                {
                    transform: scale(1.005);
                    box-shadow: 0 10px 20px rgba(116, 4, 147, 0.636);
                    transition: 0.5s all ease-in-out;
                }
                
                .collaborate
                {
                    height: 100%;
                    width: 48.5%;
                    background: #da9fe3;
                    padding:15px;
                    border-radius: 10px;
                    font-size: 19px;
                    align-content: end;
                    transition: 0.5s all ease-in-out;
                    animation: bloomEffect 0.8s ease-out forwards;
                    opacity: 0;
                    animation-delay: 1.6s;
                    img
                    {
                        justify-content:end;
                        align-content: end;
                        object-fit: cover;
                        height: 30px;
                        width: 30px;
                    }
                }
                
                .collaborate:hover
                {
                    transform: scale(1.005);
                    box-shadow: 0 10px 20px rgba(116, 4, 147, 0.636);
                    transition: 0.5s all ease-in-out;
                }
            }
        }
        
        .right
        {
            height: 100%;
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding-left: 7px;
            padding-top: 7px;
            padding-bottom: 7px;
            justify-content: space-between;
            
            .skills
            {
                height: 80%;
                width: 100%;
                overflow: hidden;
                background:  #da9fe3;
                padding-left: 7px;
                padding-top: 7px;
                padding-bottom: 7px;
                border-radius: 10px;
                transition: 0.5s all ease-in-out;
                animation: bloomEffect 0.8s ease-out forwards;
                opacity: 0;
                animation-delay: 0.8s;
                .carousel {
                    display: flex;
                    flex-direction: column;
                    animation: scroll 20s linear infinite;
                    .slide {
                        margin-top: 10px;
                        color: #5b1e90;
                        font-size: 40px;
                        font-weight: bold;
                        padding-top: 25px;
                        text-align: center;
                        span{
                            display: inline-block;
                            border-bottom: 1px solid #5b1e90;
                        }
                    }
                }
            }
            
            .skills:hover
            {
                transform: scale(1.005);
                box-shadow: 0 7px 7px rgba(116, 4, 147, 0.636);
                transition: 0.5s all ease-in-out;
                .carousel {
                    animation-play-state: paused;
                }
            }
            
            .shortcut
            {
                height: 17%;
                width: 100%;
                background: #da9fe3;
                padding-left: 7px;
                padding-top: 7px;
                padding-bottom: 7px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content:space-around;
                font-size: 30px;
                transition: 0.5s all ease-in-out;
                animation: bloomEffect 0.8s ease-out forwards;
                opacity: 0;
                animation-delay: 1.2s;
                a:link,
                a:visited,
                a:hover,
                a:active {
                color: #5b1e90;
                }
            }
            
            .shortcut:hover
            {
                transform: scale(1.005);
                box-shadow: 0 7px 7px rgba(116, 4, 147, 0.636);
                transition: 0.5s all ease-in-out;
            }
        }
    }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes bloomEffect {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(0,0) scale(1);
        opacity: 1;
    }
}

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