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

:root
{
    --color-background: #ffffff;
    
    --color-light-one: #bcdbdf;
    --color-light-two: #99c8ce;
    --color-dark-one: #2e82ac;
    --color-dark-two: #235784;
    --color-light-three: #deeeef;
    --color-dark-three: #183c5c;
}

@media only screen and (max-width: 799px)
{
    main
    {
        margin-top: 50px;
        margin-left: 30px;
        margin-right: 30px;
        height: calc(100vh - 290px);
        color: var(--color-dark-two)
    }

    h2
    {
        font-size: 24px;
        font-weight: 500;
    }

    h1
    {
        margin-top: 20px;
        font-size: 32px;
        font-weight: 500;
    }

    h1 span
    {
        font-weight: 600;
        color: #ff7f50;
    }

    h3
    {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 500;
    }

    .animated-text span
    {
        position: relative;
    }

    .animated-text span::before
    {
        content: "Software Developer.";
        color: #ff7f50;
        animation: words 20s infinite;
    }

    @keyframes words
    {
        0%, 50%
        {
            content: "Software Developer.";
        }

        51%, 100%
        {
            content: "Frontend Developer.";
        }
    }

    .animated-text span::after
    {
        content: "";
        position: absolute;
        width: calc(100% + 8px);
        height: 100%;
        background-color: #ffffff;
        border-left: 2px solid #ff7f50;
        right: -8px;
        animation: cursor .8s infinite, typing 10s steps(19) infinite;
    }

    @keyframes cursor
    {
        to
        {
            border-left: 2px solid #ffffff;
        }
    }

    @keyframes typing
    {
        10%,20%
        {
            width: calc(100% + 8px);
        }
        35%,90%
        {
            width: 0;
        }
    }

    p
    {
        padding-top: 50px;
        font-size: 18px;
    }
}

@media only screen and (min-width: 800px)
{
    main
    {
        margin-top: 50px;
        margin-left: 150px;
        margin-right: 150px;
        height: calc(100vh - 290px);
        color: var(--color-dark-two)
    }

    h2
    {
        font-size: 28px;
        font-weight: 500;
    }

    h1
    {
        margin-top: 20px;
        font-size: 34px;
        font-weight: 500;
    }

    h1 span
    {
        font-weight: 600;
        color: #ff7f50;
    }

    h3
    {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 500;
    }

    .animated-text span
    {
        position: relative;
    }

    .animated-text span::before
    {
        content: "Software Developer.";
        color: #ff7f50;
        animation: words 20s infinite;
    }

    @keyframes words
    {
        0%, 50%
        {
            content: "Software Developer.";
        }

        51%, 100%
        {
            content: "Frontend Developer.";
        }
    }

    .animated-text span::after
    {
        content: "";
        position: absolute;
        width: calc(100% + 8px);
        height: 100%;
        background-color: #ffffff;
        border-left: 2px solid #ff7f50;
        right: -8px;
        animation: cursor .8s infinite, typing 10s steps(19) infinite;
    }

    @keyframes cursor
    {
        to
        {
            border-left: 2px solid #ffffff;
        }
    }

    @keyframes typing
    {
        10%,20%
        {
            width: calc(100% + 8px);
        }
        35%,90%
        {
            width: 0;
        }
    }

    p
    {
        padding-top: 50px;
        font-size: 18px;
    }
}