@import url(reset.css);
.main {
    background: linear-gradient(35deg,#000000,#570202, #2e2e2e);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
}

.wrap {
    background: rgba(0, 0, 0, 0.801);
    width: 100%;
    overflow: hidden;
}

nav {
    padding: 1.12em 0;
}

.main-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.links {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10em;
}

    .links > p {
        position: relative;
        -webkit-text-stroke: 0.1px transparent;
        color: #ffffff;
        font-size: 3em;
    }

        .links > p::before {
            font-size: 1em;
            color: #e1fa00;
            content: attr(data-text);
            position: absolute;
            border-right: 1px solid #ffffff;
            overflow: hidden;
            animation: animate 6s linear infinite;
        }

@media (max-width:600px) {
    .links > p {
        font-size: 1.5em;
    }
}

.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 5em 0;
}

    .socials > a {
        text-decoration: none;
        margin: 0 2em;
        filter: invert(100);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        padding: 10px;
        position: relative;
        border-radius: 2ch;
        border: 1px solid transparent;
    }

        .socials > a:hover {
            border: 1px solid #0025fa;
        }
        .fb{
            animation: down 2s ease;
}
@keyframes down {
    0%{
        opacity: 0;
        transform: translateY(-210px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px); 
    }
}
        .insta{
            animation: left 2s ease;
}
@keyframes  left{
    0%{
        opacity: 0;
        transform: translateX(-210px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px); 
    }
}
        .twit{
            animation: right 2s ease;
}
@keyframes right {
    0%{
        opacity: 0;
        transform: translateX(210px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px); 
    }
}
        .mail{
            animation: up 2s ease;
}
@keyframes up {
    0%{
        opacity: 0;
        transform: translateY(210px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px); 
    }
}
        

/*footer*/
footer {
    margin: 7.5rem 0;
}

    footer > p {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1em;
    }

    .joemaac,.nkosiyapha{
        filter: grayscale(0);
        width: 15%;
        height: 10%;
    }
    .nkosiyapha{
        width: 5%;
    }
    @media (max-width: 500px) {
        .socials{
            flex-direction: column;
        }
        footer {
            margin: .4em 0;
        }
        .joemaac{
            width: 30%;
        }
        .nkosiyapha{
            width: 10%;
        }
        
    }