/* navbar style starts */
 @keyframes shimmer
 {
     0%
     {
         transform: translate(50%, -50%) rotate(20deg);
     }

     100%
     {
         transform: translate(50%, 50%) rotate(20deg);
     }
 }

 .animate-shimmer
 {
     animation: shimmer 1s linear;
     background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 75%);
     background-size: 600% 600%;
     width: 40%;
     height: 500%;
     transform: rotate(45deg);
     position: absolute;
     top: 0%;
     left: 0%;
 }

 .navbar-card
 {
     position: fixed;
     right: 0;
     top: 0;
     height: 100vh;
     /* width: 200px; */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .icon
 {
     color: white;
     margin: 60px 0;
     font-size: calc(1rem + 1vw);
 }

 .neon
 {
     text-shadow: 0 0 0.5rem #fff,
         0 0 1rem #fff,
         0 0 1.5rem #fff,
         0 0 2.5rem #d400ff,
         0 0 4rem #d400ff,
         0 0 5.5rem #d400ff,
         0 0 6rem #d400ff,
         0 0 9.5rem #d400ff
 }

 .icon.home:hover
 {
     text-shadow: 0 0 0.5rem #fff,
         0 0 1rem #fff,
         0 0 1.5rem #165cff,
         0 0 2.5rem #0000ff,
         0 0 4rem #0000ff,
         0 0 5.5rem #0000ff,
         0 0 6rem #0000ff,
         0 0 9.5rem #0000ff;
 }

 .icon.encrypted:hover
 {
     text-shadow: 0 0 0.5rem #fff,
         0 0 1rem #fff,
         0 0 1.5rem #f4690c,
         0 0 2.5rem #ff7f00,
         0 0 4rem #ff7f00,
         0 0 5.5rem #ff7f00,
         0 0 6rem #ff7f00,
         0 0 9.5rem #ff7f00;
 }

 .icon.lock_open_right:hover
 {
     text-shadow: 0 0 0.5rem #fff,
         0 0 1rem #fff,
         0 0 1.5rem #1cff1c,
         0 0 2.5rem #008000,
         0 0 4rem #008000,
         0 0 5.5rem #008000,
         0 0 6rem #008000,
         0 0 9.5rem #008000;
 }

 .icon.download:hover
 {
     text-shadow: 0 0 0.5rem #fff,
         0 0 1rem #ffffff,
         0 0 1.5rem #ff07c9,
         0 0 2.5rem #ff1493,
         0 0 4rem #ff1493,
         0 0 5.5rem #ff1493,
         0 0 6rem #ff1493,
         0 0 9.5rem #ff1493;
 }

 .icon
 {
     position: relative;
 }

 .icon::after
 {
     font-family: "Orbitron", sans-serif;
     letter-spacing: 2px;
     font-size: 12px;
     content: attr(data-tooltip);
     position: absolute;
     bottom: -35px;
     left: 50%;
     transform: translateX(-50%);
     background: transparent;
     color: white;
     padding: 5px;
     border-radius: 5px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s;
 }

 .icon:hover::after
 {
     opacity: 1;
 }

 /* navbar style ends  */

 #main-title
 {
     font-family: "Orbitron", sans-serif;
 }

 .circle
 {
     width: 450px;
     height: 450px;
     background: linear-gradient(to bottom, #a72aa2 40%, #671B65 60%);
     filter: blur(120px);
     animation: grow-shrink 5s ease-in-out infinite;
 }

 @keyframes grow-shrink
 {
     0%
     {
         transform: scale(1);
     }

     50%
     {
         transform: scale(1.5);
     }

     100%
     {
         transform: scale(1);
     }
 }

 body
 {
     background: #180d27;
 }

 .app-container
 {
     background: #180d27;

     width: 100%;
     height: 100vh;
 }

 /* button styling starts */
 .btn
 {
     position: relative;
     text-decoration: none;
     display: block;
 }

 .btn-title
 {
     position: relative;
     z-index: 3;
     padding: 20px 30px;
     color: #fff;
     background: linear-gradient(90deg, #AC14E3, #fa024d, #F73AB8, #AC14E3);
     background-size: 800%;
     border-radius: 20px;
     text-transform: uppercase;
     animation: bganim 12s linear infinite;
     animation-play-state: paused;
 }

 .btn-title:hover
 {
     animation-play-state: running;

 }

 @keyframes bganim
 {
     0%
     {
         background-position: 0%;
     }

     100%
     {
         background-position: 400%;
     }

 }

 .btn:before
 {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 2;
     background: linear-gradient(90deg, #b900ff, #ff5108, #f441a5, #b900ff);
     background-size: 800%;
     border-radius: 50px;
     transition: filter 1s;
 }

 .btn:hover::before
 {
     filter: blur(30px);
 }

 /* button styling ends */

 .gradient-text
 {
     background: linear-gradient(to right, red, rgb(255, 19, 204), rgb(255, 1, 247), rgb(255, 3, 120));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .gradient-text-2
 {
     background: linear-gradient(to right, rgb(0, 204, 255), rgb(20, 252, 171), rgb(11, 198, 255));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* styles for numbers used for encryption and decryption */
 .number-1
 {
     color: red;
 }

 .number-2
 {
     color: orange;
 }

 .number-3
 {
     color: yellow;
 }

 .number-4
 {
     color: green;
 }

 .number-5
 {
     color: rgb(0, 170, 204);
 }

 .number-6
 {
     color: rgb(253, 255, 253);
 }