*,html{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        color: #000000;
        scroll-behavior: smooth;
    }

    html{
        margin: 0;padding: 0;
        scroll-behavior: smooth;
    }
    
    .navbar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        padding: 5px 5%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 3px solid blue;
        background: linear-gradient(rgb(220, 220, 220),rgb(225, 225, 225));
        z-index: 1000;
    }
    
    .navbar .logo{
        height: 70px;
        width: 70px;
        margin-right: 500px;
        border-radius: 50%;
    }

    .navbar .menu{
        width: 100%;
        display: flex;
        width: 100%;
        justify-content: end;
        gap: 50px;
    }

    .navbar .menu a{
        text-decoration: none;
        font-size: 25px;
        font-weight: 900;
    }

    .navbar .menu a:hover{
        color: blue;
    }

    .home{
        width: 100%;
        height: 100vh;
        display: flex;
        padding: 20px 5%;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));    }
    
    .home .contents{
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
    } 

    .home .contents h1{
        font-size: 50px;
        color: #232323;
    }

    .home .contents h3{
        font-size: 50px;
        color: red;
    }

    .home .contents h3 span{
        color: purple;
    }

    .home .contents h1 span{
        color: blue;
    }
    
    .home .contents .cont{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .home .contents h2{
        font-size: 50px;
        font-weight: bolder;
    }
 
    .home .contents .para{
        font-size: 30px;
        line-height: 1.5;
    }

    .home .myphoto{
        width: 300px;
        margin-top: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        border: 5px solid blue;
    }

    .home .myphoto img{
        width: 100%;
        height: 100%;
    }
     
    .about{
        width: 100%;
        height: 100%;
        display: flex;
        padding: 15px 5%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }

    .about h1{
        font-size: 50px;
        font-family: Arial;
        font-weight: bolder;
    }

    .about{
        width: 2000px;
        font-size: 25px;
    }

    span{
        color: purple;
    }

    .inputbox{
        background: linear-gradient(to right, rgb(42, 42, 223) 50%,rgb(154, 234, 25) 50%);
        width: 500px;
        height: 300px;
        margin-left: 500px;
        margin-top: 30px;


    }
    h1{
        color: white;
        font-size: 40px;
        font-weight: bolder;
        
    }

    input{
        width: 300px;
        height: 25px;
        margin-left: 50px;
    }