body{
    background-color: rgb(14, 13, 13);
}
.nav-brand{
    color: white;
}
.icon{
   height: 50px;
   width:  50px;
   margin-left: -20px;
}
.navbar{
    background-color: black;
}
.nav-link:hover{
    color: rgb(112, 89, 89);
    font-size: 25px;
    font-family: Comic Sans;
    transition: transform 1s;
    transform: scale(1.1);
    font-weight: bold;
}

 .nav-link{
    margin: 8px;
    font-size: 24px;
 }
.nav-link::after{
content: "";
    bottom: 0;
    width: 0;
    height: 5px;
    background-color: burlywood;
    transition: width 0.3s;
    left: 0;
    position: absolute;
    border-radius: 10px;
}
.nav-link:hover::after{
    width: 100%;
}
.content-auto {
    border-right: .15rem solid white;
    color: white;
    overflow: hidden;
    width: 0;
    white-space: nowrap;
    animation: typing 8s steps(50, end) infinite forwards;
}

@keyframes typing {
    0% {
        width: 0%;
    }
    60% {
        width: 100%;
    }
}
.auto-typ{
    margin-top: 150px;
}
#clock{
    color: white;
    margin-top: 100px;
    text-align: center;
    padding-top: 23px;
    font-size: 36px;
}
 .ghari{
    height: 90px;
    background-color: rgb(85, 72, 56);
    border-radius: 100px ;
  width: 300px;
  transition: all 0.3s;
}
#clock{
    font-size: 35px;
    transition: all 0.3s;
}
.clock:hover {
    font-size: 60px;
    font-weight: bold;
}
.ghari:hover{
    background-color: rgb(41, 35, 28);
 outline: 4px solid rgb(153, 138, 138);
}
/* Adjust the animation for smaller screens */
@media screen and (max-width: 768px) {
    .content-auto {
        font-size: 15px;
    }
    #clock{
        color: white;
        margin-top: 50px;
        text-align: center;
        padding-top: 10px;
        font-size: 20px;
    }
     .ghari{
        height: 40px;
        background-color: rgb(85, 72, 56);
        border-radius: 100px ;
      width: 300px;
    }
}
.footer{
     background-color: black;
     margin-bottom: -100px;
 }
.copy{
    text-align: center;
    color: gray;
}
 .main-display{
    margin-top: 100px;
 }
 .main-display h1{
    font-size: 100px;
    color: white;
    word-spacing: -2px; /* Adjust this value as needed */
    transition: all 0.7s;
  }
  .main-display h1:hover{
    margin-left: 30px;
   }
 .e{
    font-family: Fantasy
    ;

 }
 .m{
    font-family: Cursive

    ;
 }
 .p{
    font-family: Serif

    ;
 }
 .e3{
    font-family: Monospace
    ;
    margin: -8px;

 }
 .r{
    font-family: Times
    ;
    margin-left: -12px;

 }
 .a{
    font-family: Times New Roman
    ;
 }
 .t{
    font-family: Helvetica
    ;
 }
 .u{
    font-family: Courier
    ;
 }
 .r2{
    font-family: Verdana
    ;
    margin-left: -18px;

 }
 .e2{
    font-family: Optima
    ;
 }
 .main-display img{
    height: 150px;
    width: 160px;
}
.SI h1{
color: aliceblue;
margin-left: 24px;    

transition: all 0.6s;
}
.SI h1:hover{
margin-left: -24px;    
}
.SI li{
    color: aliceblue;
    list-style-type: none;
    font-family: Cursive;
    font-size: 30px
    ;
    transition: all 0.6s;

    }
    .SI li:hover{
        margin-left: 20px;
    }
    .SI p{
        font-size: 20px;
    }
    td{
        color: white;
    }
    th{
        color: white;
    }
    marquee{
        background-color: white;
        border-radius: 50px;
    }