body, html
{
    background: #1B1D20;
    font-family: Avenir Next W02,Avenir Next,Helvetica,Arial,sans-serif;
    color: #F6ECED;
    width: 100vw;
}

.container
{
    background: #1B1D20;
    height: 100vh;
    max-width: 100vw;
    min-width: 375px;
    min-height: 600px;
    padding: 50px;
}

.row
{
    height: 100%;
}

.col
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#header h1
{
    text-transform: uppercase;
    font-size: 67px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.txt_1
{
    animation: typing_txt_1;
}

.txt_2
{
    animation: typing_txt_2;
}

#header h1 span
{
    display: inline-flex;
    color: #4F55F1;    
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    position: relative;
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation-duration: 10s;
    animation-timing-function: steps(25, end);
    animation-iteration-count: infinite;
}

#header h1 span::before
{
    content: '';
    position: absolute;
    right: 0;
    top: 3px;
    height: calc(100% - 11px);
    border-right: 0.3em solid #1B1D20;
}

#header h1 span::after
{
    content: '';
    position: absolute;
    right: 0;
    top: 3px;
    height: calc(100% - 11px);
    border-right: 0.1em solid #fff;
    animation: blink-caret 1s steps(10, end) infinite;
}

/* The typing effect */
@keyframes typing_txt_2
{
    0%, 50%, 100%
    {
        width: 0;
    }
    60%, 99%
    {
        width: 811px;
    }
}

@keyframes typing_txt_1
{
    0%, 50%, 100%
    {
        width: 0;
    }
    10%, 49%
    {
        width: 997px;
    }
}

/* The typewriter cursor effect */

@keyframes blink-caret
{
    0%, 100%
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}

#contact ul
{
    list-style-type: none;
    padding-inline-start: 0;
    margin: 0;
    font-size: 17px;
}

#contact ul li:first-child
{
    color: #888587;
    margin: 10px 0;
}

#footer
{
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
}

#footer a
{
    color: #F6ECED;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid #F6ECED;
    margin: 0 50px 0 0;
}

#footer a:hover
{
    border-bottom-color: transparent;
}

#footer div
{
    color: #888587;
    margin-left: auto;
}


/************************************************************** Media Query 1200 **************************************************************/

@media screen and (max-width: 1200px) 
{
    #header h1
    {
        font-size: 54px;
    }

    @keyframes typing_txt_2
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        60%, 99%
        {
            width: 652px;
        }
    }

    @keyframes typing_txt_1
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        10%, 49%
        {
            width: 801px;
        }
    }
}


/************************************************************** Media Query 992 **************************************************************/

@media screen and (max-width: 992px) 
{
    #header h1
    {
        font-size: 40px;
    }

    #header h1 span::before,
    #header h1 span::after
    {
        top: 2px;
        height: calc(100% - 7px);
    }

    @keyframes typing_txt_2
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        60%, 99%
        {
            width: 484px;
        }
    }

    @keyframes typing_txt_1
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        10%, 49%
        {
            width: 594px;
        }
    }
}


/************************************************************** Media Query 768 **************************************************************/

@media screen and (max-width: 768px) 
{
    #header h1
    {
        font-size: 35px;
    }

    #header h1 span::before,
    #header h1 span::after
    {
        height: calc(100% - 4px);
    }

    @keyframes typing_txt_2
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        60%, 99%
        {
            width: 424px;
        }
    }

    @keyframes typing_txt_1
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        10%, 49%
        {
            width: 520px;
        }
    }
}


/************************************************************** Media Query 680 **************************************************************/

@media screen and (max-width: 680px) 
{
    .container
    {
        height: calc(100vh - 150px);
    }

    #contact
    {
        margin: auto 0;
    }

    #footer
    {
        position: fixed;
        bottom: 50px;
        width: calc(100% - 100px);
        min-width: 275px;
    }

    #footer div
    {
        flex: 0 1 100%;
        margin: 18px 0 0;
    }

    #header h1
    {
        font-size: 25px;
    }

    @keyframes typing_txt_2
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        60%, 99%
        {
            width: 303px;
        }
    }

    @keyframes typing_txt_1
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        10%, 49%
        {
            width: 371px;
        }
    }
}


/************************************************************** Media Query 600 **************************************************************/

@media screen and (max-width: 680px) and (min-height: 600px) 
{
    body
    {
        overflow-y: hidden;
    }
}


/************************************************************** Media Query 600 **************************************************************/

@media screen and (max-height: 600px) 
{
    #footer
    {
        position: static;
    }
}


/************************************************************** Media Query 510 **************************************************************/

@media screen and (max-width: 510px) 
{
    #header h1
    {
        font-size: 21px;
    }

    #header h1 span::before,
    #header h1 span::after
    {
        top: 1px;
        height: calc(100% - 3px);
    }

    @keyframes typing_txt_2
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        60%, 99%
        {
            width: 254px;
        }
    }

    @keyframes typing_txt_1
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        10%, 49%
        {
            width: 312px;
        }
    }
}


/************************************************************** Media Query 447 **************************************************************/

@media screen and (max-width: 447px) 
{
    #header h1
    {
        font-size: 16px;
    }

    

    #footer a:first-child
    {
        margin-bottom: 8px;
    }

    @keyframes typing_txt_2
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        60%, 99%
        {
            width: 194px;
        }
    }

    @keyframes typing_txt_1
    {
        0%, 50%, 100%
        {
            width: 0;
        }
        10%, 49%
        {
            width: 237px;
        }
    }
}