styles.css

h1{
    margin: 0;
    background-color: beige;
    text-align: center;   
}
.underline {
    background: 
        linear-gradient(currentColor 0 0) 
        0 100% /var(--d, 0) 3px 
        no-repeat;
    transition:0.5s;
}
.underline:hover {
    --d: 100%;
}
.tooltip {
    position: relative; 
    display: inline-block;
    border-bottom: 1px dotted rgb(8, 15, 205);
}
.tooltip .tooltiptext {
    /* visibility: visible; */
    width: 120px; /*kettu mothu dabba pahijhe */
    background-color:beige;
    color: #060505;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;  /*spacing betn ur box and text*/
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.5s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.notes {
    width: 60%;
    margin: auto;
    
}

/*light dark mode*/
body {
    padding: 25px;
    background-color: white;
    color: black;
    font-size: large;
}
.dark-mode {
    background-color: rgb(37, 34, 34);
    color: white;
}



   /* .fa-moon{
    
   } */
/* div[class] {
    display:inline-block;
    font-size:18px;
    font-family:sans-serif;
    margin:25px;
    padding-bottom:5px;
    cursor:pointer;
} */
/* div[class]:nth-child(odd) {
    color:darkblue;
} */
/* body{
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: bisque;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container{
     display: flex;
     gap: 20px;
  }
  .box{
     background-color: cadetblue;
  }
  .h1{
     color: #95ff00;
     text-shadow: 0px 0px 20px #ffff31;
     font-family: sans-serif;
     font-size: 50px;
  }
  .box{
     animation: move 3s forwards ease-in-out;
     border-left: 2px solid #fbff00;
  }
  @keyframes move2{
     from {
         margin-left: -410px;
         width: 400px;
     }
     to{
         margin-left: 0;
         width: 0;
     }
  } */