HTML,BODY{
    height: 100%;
    background-color: rgb(74, 74, 74);
    margin: 0%;
}


.grid{
    display:grid;
    grid-template-columns: 2fr 5fr;
    grid-template-rows: 100px 1fr;
    height: 100vh;

}

.sidebar{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(74, 74, 74);
    grid-column: 1;
    grid-row: 1/3;

}

.main{
    display: grid;
    max-width: 100%;
    max-height: 100%;
    background-color: rgb(143, 143, 143);
    grid-column: 2;
    grid-row: 2;
    

}

.main h1{
    color: #fff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 40px;
    top: -20;
    font-weight: 500;
    position: relative;
    z-index: 10;
}

.main img{
    max-width: 100%;
    max-height: 100%;
    display: block;

}

.aboutme{
    max-width: 33%;
    max-height: 33%;

}

.aboutme h1{
    -webkit-text-stroke: 1px rgb(0, 0, 0);
}

.aboutme p{
    color: #fff;
}

.funfacts{
    max-width: 33%;
    max-height: 33%;
    
    

}

.funfacts h1{
    -webkit-text-stroke: 1px rgb(0, 0, 0);
}

.funfacts ul{
    color: #fff;
    
}

.funfacts p{
    color: #fff;
}

.mycar{
    max-width: 33%;
    max-height: 33%;
    display: grid;
}

.mycar h1{
    -webkit-text-stroke: 1px rgb(0, 0, 0);
}

.mycar img{
    max-width: 70%;
    max-height: 70%;
}



.Quayyum{
    background-color: rgb(74, 74, 74);
    grid-column: 2;
    grid-row: 1;

}



button{
    background-color: rgb(74, 74, 74);
    font-size: xx-large;
    width: 100%;
    flex-grow: 1;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    
    
    text-align: center;
    
}

button:hover{
    background-color: rgb(40, 40, 40);
}



.firstname{
    margin:auto;
    width: fit-content;
    text-align: center;
    color: #fff;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
    
    position: relative;
    
}

.firstname h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 60px;
    top: -20;
    font-weight: 500;
    position: relative;
    z-index: 10;
}

.lastname{
    width: max-content;
    position: absolute;
    top: -60%;
    left: -80%;
    transform: (-50%,-50%);
}

.lastname span{
    display: inline-block;
    font-size: 100px;
    font-weight: 700;
    -webkit-text-stroke: 1px rgba(255,255,255, 0.3);
    -webkit-text-fill-color: transparent;
    transform: translateY(60px);
    transition: transform 1s;
}

.lastname span.active{
    transform: translateY(0px);


}

.lastname span:nth-child(1){
    transition-delay: 0.5s;
}

.lastname span:nth-child(2){
    transition-delay: 1s;
}

.lastname span:nth-child(3){
    transition-delay: 1.5s;
}

.lastname span:nth-child(4){
    transition-delay: 2s;
}

.lastname span:nth-child(5){
    transition-delay: 2.5s;
}

.lastname span:nth-child(6){
    transition-delay: 3s;
}

.lastname span:nth-child(7){
    transition-delay: 3.5s;
}

.lastname span:nth-child(8){
    transition-delay: 4s;
}

.lastname span:nth-child(9){
    transition-delay: 5s;
}