.header {
    text-align: left;
    text-indent: 25px;
    }
    .animation-corridor{
        display: inline-block;
        font-family: 'Lato',sans-serif;
        overflow: hidden;
        animation-fill-mode: forwards;
    }
        .salutation{
            font-family: 'Caveat',sans-serif;
            color:var(--title-color);
            font-size: 48px;
            animation: slide-up 1s ease-in-out;
        }
        
        .presentation {
            font-family:inherit;
            font-size: 24px;
            opacity: 0;
            animation: slide-up 1s ease-in-out forwards; 
            animation-delay: 1s;
        }
        .presentation b{
            font-size:48px;
            font-family: 'Poppins',sans-serif;
        }
        .wrapper{
            display:flex;
            opacity:0;
            animation: slide-up 1s ease-in-out forwards; 
            animation-delay: 2s;
        }
            .wrapper .i-am{
                font-family: 'Lato',sans-serif;
                font-size: 18px;
            }
            .wrapper .roles{
                margin-left:-15px;
                height: 25px;
                line-height: 25px;
                overflow: hidden;
            }
                .roles li{
                    list-style: none;
                    font-size: 20px;
                    color:var(--title-color);
                    position:relative;
                    top:0;
                    animation:slide 3s steps(2) infinite;
                }
                    .roles li span{
                        position:relative;
                    }
                        .roles li span::after{
                            content:"";
                            position:absolute;
                            left:0;
                            width: 100%;
                            height: 100%;
                            background:var(--primary-bg-color);
                            border-left: 1px solid var(--secondary-bg-color);
                            animation:typing 1.5s steps(15,end) infinite;
                        }

        .about-me{
            padding: 10px;
            width: 85%;
            text-indent: 0;
            opacity: 0;
            animation: slide-left 1s ease-in-out forwards; 
            animation-delay: 3s;
        }
    .mobile p{
        font-family: 'Lato',sans-serif;
        font-size:16px;
        text-indent: 15px;
        opacity: 0;
        animation: slide-left 1s ease-in-out forwards; 
        animation-delay: 4s;
    }
    .mobile p:nth-child(1){
        display: block;
    }   
    .mobile p:nth-child(2){
        display: none;
    }
/*------------------------------------------------------------------------------*/
.contacts{
    position: absolute;
    right:0;
    top:35vh;
    }
    .contacts ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 80px;
        height: 120px;
        background-color: transparent;
    }  
    .contacts li a {
        display: block;
        color:inherit;
        padding: 8px 16px;
        text-decoration: none;
    }
    .contacts li i{
        font-size:32px;
        transition: all .6s ease-out;
    }
        .contacts li i:hover {
            color: var(--hover--icon-color);
            transform: scale(1.5);
        }
/*------------------------------------------------------------------------------*/
#go-to-1 a{
    color:var(--anchors);
}
/*------------------------------------------------------------------------------*/

@media screen and (max-width:600px){
    .salutation{
        text-align: left;
        font-size:24px;
    }
    .presentation{
        text-align: left;
        font-size:12px;
    }
        .presentation b{
            display:block;
            font-size:24px;
            text-indent:0;
        }
    .mobile p:nth-child(1){
        display: none;
    }   
    .mobile p:nth-child(2){
        display: block;
    }
    .i-am{
        display:none;
    }
    .roles li span::after{
        height: 105%;
    }
}
/*------------------------------------------------------------------------------*/
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    .about-me{
        display: none;
    }
    .mobile{
        display: none;
    }
}