@import url(reset.css);
nav {
    padding: 1.12em 0;
}
img{
    width: 100%;
}
.head,.container,.details,.container-wrapper,.main-wrap,.last,p,.about{
    display: flex;
    align-items: center;
    justify-content: center;
}
.head,.container,.container-wrapper,.p{
    padding: 1em;
}
.head{
    width: 60%;
}
h1{
    animation: down 2s ease;
}
@keyframes down {
    0%{
        opacity: 0;
        transform: translateY(210px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px); 
    }
}
hr{
    width: 50%;
    animation: left 2s ease;
}
@keyframes left {
    0%{
        opacity: 0;
        transform: translateX(210px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px); 
    }
}

.container-wrapper,.last{
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
p, h3, h5, .last, .head{
    color: #fff;
    letter-spacing: 1px;
    padding: 3px;
    font-size: 12pt;
}
.last>h5{
    font-size: 8pt;
}
p{
    width: 70%;
    line-height: 1.4rem;
    animation: top 2s ease;
}
@keyframes top {
    0%{
        opacity: 0;
        transform: translateX(-210px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px); 
    }
}
h5>a{
    font-size: 8pt;
    text-transform: uppercase ;
}
h5>a:hover{
    color: #e1fa00;
    border: unset;
}
.about{
    width: 100%;
    margin: 0;
    padding: 5%;
    background: rgba(0, 0, 0, 0.63);
    
}
.container-wrapper{
    align-items: center;
}
.main-wrap{
    background: linear-gradient(35deg,#000000,#300101, #2e2e2e);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.container,.details,.about,.head{
    flex-direction: column;
}
.container{
    background: linear-gradient(90deg, #000, rgb(57, 60, 63), #000);
    padding: 0;
    margin: 1rem;
    width: 30%;
    animation: right 1.5s ease;
}
@keyframes right {
    0%{
        opacity: 0;
        transform: translateY(410px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px); 
    }
}

footer{
    margin-top: 2rem;
}
img{
    filter: grayscale(0);
}
img:hover{
    filter: grayscale(100);
}
.joemaac,.nkosiyapha{
    filter: grayscale(0);
    width: 15%;
    height: 10%;
}
.nkosiyapha{
    width: 5%;
}
@media (max-width:1180px) {
    .container{
        width: 100%;
    }
    p{
        width: 100%;
        text-align: left;
    }
    
}