nav {
     border-radius: 20px;
     background-color: #ffffff;
     height: 70px;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }

 .logo {
     font-size: 2em;
     font-weight: bold;
     color: #2563eb;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     transition: all ease-in-out 0.5s;

 }

 .nav-links {
     font-size: 1.2em;
     list-style: none;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 40px;
 }

 .nav-links>li>a {
     font-size: 5em;
     font-weight: 700;
     text-decoration: none;
     font-size: 1.2em;
     color: #000000;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     transition: all ease-in-out 0.5s;

 }

 #icon {
     font-size: 2em;
     color: #000000;
     cursor: pointer;
     transition: all ease-in-out 0.3s;
 }

 /* hover effects */

 #icon:hover {
    transform: scale(1.2);
}

.nav-links>li>a:hover {
    color: #2563eb;
}

.logo:hover {
    color: #000000;
    cursor: pointer;
}



 body {
     background-color: #000000;

 }




 #container {
     border-radius: 25px;
     background-color: white;
     width: 50%;
     height: 500px;
     border: 2px solid black;
     margin: auto;
     margin-top: 200px;
     padding: 10px;
     box-shadow: 0px 0px 100px rgb(32, 128, 184);
 }

 .number_container>h1 {
     font-size: 5em;
     color: rgb(0, 0, 0);
     text-align: center;
     margin-bottom: 20px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .button_container {

     text-align: center;
     margin-bottom: 20px;
     margin-top: 250px;
 }

 #increase {
     margin-right: 20px;

     padding: 10px 20px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 8px;
     border: none;
     background-color: #70dd74;
     color: white;
     cursor: pointer;
     transition: all ease-in-out 0.3s;
 }

 #reset {
     margin-right: 20px;
     padding: 10px 20px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 8px;
     border: none;
     background-color: #f06d6d;
     color: rgb(0, 0, 0);
     cursor: pointer;
     transition: all ease-in-out 0.3s;

 }

 #decrease {
     padding: 10px 20px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 8px;
     border: none;
     background-color: #fbff7a;
     color: rgb(0, 0, 0);
     cursor: pointer;
     transition: all ease-in-out 0.3s;

 }

 #back {
     margin-bottom: 10px;
     text-decoration: none;
     padding: 10px 20px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 8px;
     border: none;
     background-color: #f06d6d;
     color: white;
     cursor: pointer;
     transition: all ease-in-out 0.3s;
 }

 #increase:hover {
     background-color: #00ff0d;
     color: black;
     transform: translateY(-3px);
     opacity: 0.9;
 }

 #reset:hover {
     background-color: #ff0000;
     color: black;
     transform: translateY(-3px);
     opacity: 0.9;
 }

 #decrease:hover {
     background-color: #fffb00;
     color: black;
     transform: translateY(-3px);
     opacity: 0.9;
 }

 #back:hover {
     background-color: #ff0000;
     color: black;
     transform: translateY(-3px);
     opacity: 0.9;
 }