::-webkit-scrollbar {
    width: 6px;               /* Thin width of the scrollbar */
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;      /* Background of the scrollbar track */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888;         /* Color of the scrollbar thumb */
    border-radius: 3px;       /* Rounded corners for the thumb */
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555;         /* Color of the thumb on hover */
  }
  
  /* For Firefox */
  html {
    scrollbar-width: thin;    /* Thin width of the scrollbar */
    scrollbar-color: #603eb3 #f1f1f1; /* Thumb color and track color */
    scroll-behavior: smooth
  
  }
*,
          ::after,
          ::before,
          input[type=text] {
              box-sizing: border-box
          }
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
}

body {
      font-size: 1rem;
    line-height: 1.6;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.container {
    background-color: #F7FAFD;
     width: 200%;
    max-width: 1190px;
    padding: 30px;
    box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-height: 600px;
      margin: 5px 5px;
}

.tool-info {
    text-align: center;
    margin-bottom: 0px;
}

#tool-title {
    font-size: 32px;
    color: #424ae0;
    margin-bottom: 20px;
}

#tool-description {
    font-size: 16px;
    color: #101020;
    font-weight: 400;
    margin-bottom: 0px;
}

.stats {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #101020;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
}

.coin {
    height: 230px;
    width: 230px;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    margin-bottom: 15px;
    box-shadow: 0 0 20px 5px rgba(66, 74, 224, 0.5); /* Glow effect */
border-radius: 50%; /* Ensures the glow is circular around the coin */
animation: initial-flip 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    
}
@keyframes initial-flip {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(720deg);
}
100% {
transform: rotateX(0deg);
}
}
#flip-button {
width: 150px; /* Adjust width */
height: 50px; /* Adjust height */
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: #ffffff;
}

#reset-button {
width: 150px; /* Adjust width */
height: 50px; /* Adjust height */
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: #ffffff;
}

.coin img {
    width: 230px;
}

.heads, .tails {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.tails {
    transform: rotateX(180deg);
}

@keyframes spin-tails {
    0% {
        transform: rotateX(0deg) scale(1);
    }
    40% {
        transform: rotateX(720deg) scale(1.4);
    }
    60% {
        transform: rotateX(1440deg) scale(1.5);
    }
    100% {
        transform: rotateX(2000deg) scale(1);
    }
}

@keyframes spin-heads {
    0% {
        transform: rotateX(0deg) scale(1);
    }
    40% {
        transform: rotateX(1080deg) scale(1.4);
    }
    60% {
        transform: rotateX(1800deg) scale(1.5);
    }
    100% {
        transform: rotateX(2160deg) scale(1);
    }
}

.buttons {
width: 100%;
display: flex;
justify-content: center; /* Center buttons horizontally */
gap: 30px; /* Space between buttons */
margin-top: 30px; /* Adjust top margin */
margin-bottom: 20px; /* Add bottom margin */
}

#flip-button,#reset-button {
width: 200px; /* Default button width */
height: 50px; /* Default button height */
padding: 10px 20px; /* Adjust padding inside buttons */
border: 2.5px solid #424ae0;
border-radius: 10px; /* Make buttons slightly rounded */
cursor: pointer;
transition: background-color 0.2s ease, transform 0.3s ease;
text-align: center;
}

#flip-button {
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: #ffffff;
}

#reset-button {
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: #ffffff;
}

button:hover {
background: linear-gradient(45deg, #feb47b, #ff7e5f);
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#reset-button:hover {
background: linear-gradient(45deg, #2575fc, #6a11cb);
}
/* Title Styling */
.title {
color: #ff7e5f; /* Change to your desired color */
font-size: 2rem;
text-align: center; /* Center the title */
margin-bottom: px;
}

/* Description Styling */
.description {
color: #424ae0; /* Change to your desired color */
font-size: 1.2rem;
text-align: center; /* Center the description */
margin-bottom: 2px;
}

/* Stats Styling */
.stats {
color: #424ae0; /* Change to your desired color */
font-size: 1.5rem;
text-align: center; /* Center stats */
margin: 0px;
}

.stats p {
margin: 1px 0; /* Add spacing between stats items */
}
header, nav {
background: #6d46cb;
}
.logo {
display: flex;
justify-content: center;
}
header .header1 {
padding: 0 10px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.links a, a {
text-decoration: none;
}

header #tablinks a {
background: 0 0;
cursor: pointer;
}
#tablinks .links {
display: flex;
overflow-x: auto;
flex-wrap: nowrap;
white-space: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
padding: 5px;
background: #603eb3;
}
.links {
overflow: scroll;
}
.links h3 {
color: #000;
font-size: 18px;
margin: 10px;
}
header #tablinks a {
background: 0 0;
cursor: pointer;
}
header #tablinks a, header h1, header h2 {
color: #fff;
text-shadow: 0 1px 2px black;
}
.links a {
display: inline-block;
color: #333;
background-color: #fff;
padding: 7px 14px;
margin: 4px;
font-size: 1em;
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
transition: .3s;
position: relative;
border-radius: 20px;
}
.sidebar {
top:0;
margin: 0;
padding: 0;
width: 340px;
background-color: #f1f1f1;
float: right;
height: 100%;
overflow: auto;
margin-top:5px;
min-height: 694px;
}
.main{
display: flex;
justify-content: center;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}

.sidebar a.active {
background-color: #04AA6D;
color: white;
}

.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
footer img{
    min-width: 90%;
    }
    footer img{
        display: block;
        margin: 20px auto;
        max-width: 70%;
        box-shadow: 2px 2px 4px 2px #00000033;
        }
    .footer {
        width: 100%;
      margin: auto;
      }
      .footer {
        width: 99%;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        background: #f4f5f7;
        padding-bottom: 5px;
        margin: 0 auto;
      }
      .footer p {
        color: #444;
        font-weight: 300;
        line-height: 1.8em;
        text-align: left;
        margin: 5px;
       margin-left: 15px;
        margin-right: 15px;
      }
      .footer h1 {
        margin-top: 20px;
         margin-bottom: 10px;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;
      }
      .footer h2,h3 {
      text-align: left;
        margin: 5px;
        margin-left: 15px;
        margin-right: 15px;
      }
ul{
    margin-top:10px;
  }
  ul{
    text-align:left;
    margin-left:30px;
    line-height:30px;
}
.imp-pages{
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 8px;
}
.pages {
    float: left;
    padding: 10px;
    background: #6d46cb;
    color: white;
}
    .copyright-area {
        text-decoration: none;
        text-align: center;
        color: white;
        padding: 10px;
    }
    .copyright-area a{
        text-decoration: none;
        color: white;
    }
    .pages a{
        text-decoration: none;
        color:#fff;
    }
@media screen and (max-width: 992px) {
.main{
display:inline;
}  
.container {
width:100%;
margin:0;}
.sidebar {  
width: 100%;
overflow: auto;
margin-top:5px;
}
}      
@media (max-width: 600px) {
.main{
display:inline;
}
.container {
width:100%;
margin:0;
}
.sidebar {  
width: 100%;
overflow: auto;
margin-top:5px;
}
}