*{
    box-sizing: border-box;
}

@keyframes roll {
    from{
        width: 20%;
    }
    to{
    width: 50%;
    }
}


@keyframes ball {
    from{
        transform:  rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}

@keyframes fade {
    from{
        padding-left: 0px;
        opacity: 0;
        
        
    }
    to{
        
        padding-left: 30px;
        opacity: 1;
    }
}

.text{
    display: inline-block;
    position: absolute;
    top: 32%;
    left: 30%;
    background: rgba(0, 0, 0, 0.66);
    color: white;
    padding: 20px;
    border-radius: 10%;
    letter-spacing: 5px;
    font-family: monospace;
    
   
}

    



.letters{
    border-right: 3px solid white;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
     
    animation: 
    typing 2s steps(23),
    cursor 0.5s step-end infinite alternate 
    ;
    
     
}
@keyframes cursor {
    50%{border-right-color: transparent;}
}
@keyframes typing {
    from{
       width: 0px;
       
    }

    to{
        
    }}



body{
    padding: 0px;
    margin: 0px;
    
   
    
    
}

@keyframes rotated {
    0%{
        transform: scale(1.1) rotatey(45deg);
        

    }
    50%{
        transform: scale(1) rotatey(-45deg);
        
    }
    100%{
        transform: scale(1.1) rotatey(45deg);
        
    }}

.navbar{
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    z-index: 5;
    font-family: sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
    background: rgba(5, 5, 5, 0.171);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    transition: 1s;
    
}

.navbarbtn{
    padding: 10px;
    margin-right: 15px;
    border: none;
    background: transparent;
    transition: 0.5s;
    cursor: pointer;
    color: white;
    
    
    
}.navbarbtn:hover{
    color: white;
    
    transform: scale(1.2)  rotate(5deg);
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    animation: rotated 2s infinite ease-in-out;
    
    
}

.dots{
    color: transparent;
}.dots:hover{
    color: black;
}






.purpose{
    position: absolute;
    top: 30%;
    background: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 20px;
    border-radius: 100%;
    height: 100px;
    width: 100px;
    align-items: center;
    justify-items: center;
    padding-top: 20px;
    transition: 0.5s;

    

}.purpose:hover{
    border-radius: 0px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 200px;
    color: black;
    background: white;
    transform: scale(1.2) ;
    padding-left: 40px;
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    border-right: 1px solid rgba(0, 0, 0, 0.539);
}

.headpic{
    background-image: url(./images]/standard-desk-dimensions-guide5-003da781-2861-4f21-967a-bd65158bb25a.webp);
    background-size: cover;
    background-position: center;
}



.maindiv{
    display: grid;
    grid-template-columns: 1fr;
}

.leftmaingrid{
    background: rgba(0, 0, 0, 0.368);
    background-repeat: no-repeat;
    text-align: center;
    
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 20px;
    
    height: 50vh;
   
}

.aboutme{
    display: grid;
    grid-template-rows: 1fr;
    background: transparent;
    float: right;
    
    background: rgba(0, 0, 0, 0.598);
    height: auto;
    
    
}



.ratediv{
    display: flex;
    margin-top: 0px;
    position: absolute;
    top: 80%;
    background: rgb(253, 146, 108);
    padding: 10px;
    padding-left: 30px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    animation: fade 3s 1 forwards;
    
    
    
    
    
}.ratediv:hover{
    transform: rotate(0deg);
}

.rateno{
    color: white;
    
    
}





.ratebtn1{
    margin-right: 10px;
    background: black;
    color: gold;
    padding: 5px;
    border-radius: 5px;
    width: auto;
    outline: 1px solid rgb(215, 213, 211);
    cursor: pointer;
}

.ratebtn2{
    margin-right: 10px;
    background: black;
    color: red;
    padding: 5px;
    border-radius: 5px;
    outline: 1px solid rgb(215, 213, 211);
    cursor: pointer;
    

}

.ratebtn3{
    margin-right: 10px;
    background: black;
    color: gold;
    padding: 5px;
    border-radius: 5px;
    

}

.me{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 27px;
    background: white;
    color: black;
    
    margin-top: 0px;
    
    border-top-left-radius: 0px;
    padding: 3px;
    padding-bottom: 100px;
    margin-bottom: 0px;
    
    width: auto;
    height: auto;
    border-top: none;
    transition: 1s;
}.me:hover{
     
     transition: 1s;
     transition-timing-function: ease-in-out;
}


/* rightgrid */

/* encourage */

.encorage{
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: black;
    background: #fdfcfc;
    font-size: 18px;
    padding-top: 40px;
    padding-bottom: 2%;
    font-family: Arial, Helvetica, sans-serif;
}


/* GAME */

.coloroption{
    padding: 10px;
    border: none;
    border-radius: 8px;
}

.maincolor{
    padding: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    border: none;
    background: rgba(0, 0, 0, 0.358);
    color: white;
    border-radius: 100%;
}

/* GAME up */

.header2{
    background: white;
    color: black;
    padding: 20px;
    padding-top: 0px;
    
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 0.5px solid black;
    position: sticky;
    top: 0px;
    
}

.navbtn{
    padding: 5px  10px  5px  10px;
    font-size: 20px;
    border-radius: 10px;
    margin: 5px;
    background: transparent ;
    color: rgba(0, 0, 0, 0.427);
    outline: 1px solid black;
    cursor: pointer;
    border: none;
}.navbtn:hover{
    color: rgb(0, 119, 255);
}.navbtn:focus{
    color: blue;
    transform: scale(1.1);
}


.book1-1{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    background: white;
    width: 50%;
    color: black;
    
    
    
    
    margin-left: 22%;
    margin-top: 30px;
    padding: 40px;
    gap: 30px;
    
}

.html{
    height: 50px;
    width: 200px;
    background: transparent;
}


/* bars */

.progress-container {
    width: 40%; /* Adjust the overall width of the bar */
     /* Center the bar on the page */
    background-color: black;
    height: 20px; /* Adjust the height of the bar */
    border-radius: 10px;
    overflow: hidden;
    
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: orange; /* Adjust the color of the filled part */
    border-radius: 10px;
    transition: width 5s ease-in-out; /* Adjust the animation duration */
}

.percentage-text {
    text-align: center;
    line-height: 20px; /* Match the height of the bar for vertical alignment */
    color: #333;
    font-weight: bold;
}
.htmlmain{
    display: flex;

}





.progress-bar2 {
    height: 100%;
    width: 0;
    background-color: rgb(135, 190, 235); /* Adjust the color of the filled part */
    border-radius: 10px;
    transition: width 5s ease-in-out; /* Adjust the animation duration */
}

.cssmain{
    display: flex;
    
}

/* bar */

.progress-bar3 {
    height: 100%;
    width: 0;
    background-color: yellow; /* Adjust the color of the filled part */
    border-radius: 10px;
    transition: width 5s ease-in-out; /* Adjust the animation duration */
}

.javamain{
    display: flex;
}



.progress-bar4 {
    height: 100%;
    width: 0;
    background-color: aqua; /* Adjust the color of the filled part */
    border-radius: 10px;
    transition: width 5s ease-in-out; /* Adjust the animation duration */
}

.reactmain{
    display: flex;
}


/* booooook 11111 */

.projects{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    background: rgb(190, 188, 188);
    
    margin-top: 0px;

    padding: 20px;
}

.project1{
    height: 200px;
    width: 200px;
    background: white;
    color: black;
    border-radius: 15px;
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    transition: 0.5s;
}.project1:hover{
    transform: scale(1.1);
    transition: 0.5s ;
    transition-timing-function: ease-in-out;

}

.pic{
    width: 100%;
    height: auto;
}
.aboutbtn{
    padding: 10px;
    background: rgba(0, 0, 255, 0.484);
     color: white; 
     border-radius: 8%; 
     font-size: 20px;
      padding: 20px;
    margin-right: 15px;
    border: none;
    transition: 0.5s;
    
    
    
}.aboutbtn:hover{
    background: blue;
    transition: 0.5s ;
    transition-timing-function: ease-in-out;
    cursor: pointer;
    
}.aboutbtn:focus{
    transform: rotate(-15deg);
}

.jectbtn{
 
    font-size: 18px;
}.jectbtn:hover{
    background: greenyellow;
}




/* footer */




.footer{
    background: black;
    color: white;
    padding: 6%;
    padding-bottom: 15%;
    
}
 .footerdiv{
    left: 100px;
 }

 .infobtn{
    padding: 20px;
    font-size: 20px;
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.514);
    border-radius: 15px;
    transition: 0.5s;
    cursor: pointer;

 }.infobtn:hover{
    border: 1px solid black;
    background: black;

    
    transition: 0.5s;
    transition-timing-function: ease-in-out;
 }.infobtn:focus{
    transform: scale(0.8);
 }


 /* socials */
 .socials{
    display: flex;
    gap: 23%;

 }
 .ver{
    color: rgb(117, 115, 115);
 }

 a{
    color: white;
    text-decoration: none;
    transition: 1s;
 }a:hover{
    transition: 1s;
    transition-timing-function: ease-in-out;
 }



/* fooottter */



















@media only screen and (max-width: 610px) {

    @keyframes roll {
        from{
            opacity: 0;
        }
        to{
        opacity: 1;
        }
    }
    
    
    @keyframes ball {
        from{
            transform: rotate(0deg);
        }
    
        to{
            transform:  rotate(360deg);
        }
    }
    
    @keyframes fade {
        from{
            
            opacity: 0;
            
            
        }
        to{
            
            
            opacity: 1;
        }
    }

    p{
        font-size: 10px;
    }
 
    ol{
        font-size: 10px;
        margin-left: 0px;
    }


img{
    width: 200px;
    height: 300px;
}

    .purpose{
        font-size: 10px;
        position: absolute;

    }

    .text{
        position: absolute;
        left: 0%;
        font-size: 5px;
        letter-spacing: 3px;
        width: 33%;
        top: 10%;
    }
       
    .maindiv{
        
        grid-template-rows: 0.5fr 0.5fr;
    }

    
    .navbar{
        width: auto;
        font-size: xx-small;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbarbtn{
        font-size: xx-small;
    }

    .aboutme{
        float: left;
        width: fit-content;
        padding-bottom: 0px;
    background-image: url(./WhatsApp\ Image\ 2023-12-14\ at\ 23.48.28_c112803f.jpg);

        
    }
   
    .pic{
        width: auto;
    
        

        
    }

    .ratediv{
        top: 60%;
        font-size: 15px;
        width: 50%;
        justify-content: space-evenly;
    }

    .leftmaingrid{
    
        
        width: auto;
        
    }

    .projects{
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        
        
    }
 
    .project1{
        font-size: xx-small;
        width: 100px;
        height: 110px;
        float: left;

        

    }

    .jectbtn{
        font-size: xx-small;
    }
    
    
    .navbtn{
        font-size: xx-small;
        width: auto;
    }



    .book1-1{
        grid-template-columns: 1fr;
        
    }

    

    .me{
        font-size: 16px;
        line-height: normal;
        grid-template-columns: 1fr ;
        
        
    }

    .encorage{
        font-size: medium;
        width: fit-content;
    }.aboutbtn{
        font-size: 10px;
        padding: 15px;
        border-radius: 100%;
    
    }
    .gif{
        width: auto;
        height: 200px;
    }
 
    .header2{
        width: auto;
    }

    .footerdiv>h1>div>img{
        width: 15%;
        height: 15%;
    }
}




/* @media only screen and (max-width: 768px) {

    .navbar{
        width: auto;
    }

    .gif{
        width: auto;
        height: 400px;
    }

    img{
        width: auto;
        height: 780px;
        
    }

    .projects{
        grid-template-columns: 1fr 1fr;
        width: auto;
    }
    

    .encorage{
        font-size: larger;
    }#aboutbtn{
        font-size: 10px;
    }

    .ratediv{
        top: 85%;
        font-size: 20px;
        width: 62%;
        justify-content: space-evenly;
    }

} */