body {
font-family: 'Lucida Console', 'Courier New', monospace;
padding-top: 150px; /* Adjust based on the height of the shape divider */
margin: 0;
background: rgb(2,0,36);
background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,75,1) 46%, rgba(0,212,255,1)
100%);
background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,75,1) 46%,
rgba(0,212,255,1) 100%);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,75,1) 46%, rgba(0,212,255,1) 100%);
filter:
progid:[Link](startColorstr="#020024",endColorstr="#00d4ff",GradientT
ype=1);
color: white;
.custom-shape-divider-top-1716198145 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
z-index: -1; /* Ensure the shape divider is behind content */
.custom-shape-divider-top-1716198145 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 120px;
.custom-shape-divider-top-1716198145 .shape-fill {
fill: #FFFFFF; /* Adjust to your background color */
h1{ font-size: 50px;
h1, p {
margin: 10px 0;
h1 {
text-align: center;
.table-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-content: center;
padding: 20px;
.table-container {
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 10px;
text-align: left; /* Ensure all content in table is aligned to the left */
.table-container:nth-child(5) {
grid-column: span 2;
justify-self: center;
table {
border-collapse: collapse;
width: 100%;
margin: 0 auto;
table th, table td {
border: 1px solid silver;
padding: 10px;
text-align: left; /* Align text to the left */
vertical-align: top; /* Ensure vertical alignment to top */
table thead th {
background-color: rgba(255, 255, 255, 0.2);
table tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.1);
}
table tr:nth-child(odd) {
background-color: rgba(192, 192, 192, 0.1);
table img {
width: 100%;
height: auto;
border-radius: 5px;
display: block; /* Ensures the image is a block element */
margin: 0 auto 10px; /* Center image and add margin below */
.loader {
--cell-size: 52px;
--cell-spacing: 1px;
--cells: 3;
--total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
display: flex;
flex-wrap: wrap;
width: var(--total-size);
height: var(--total-size);
.cell {
flex: 0 0 var(--cell-size);
margin: var(--cell-spacing);
background-color: transparent;
box-sizing: border-box;
border-radius: 4px;
animation: 1.5s ripple ease infinite;
.cell.d-1 {
animation-delay: 100ms;
.cell.d-2 {
animation-delay: 200ms;
.cell.d-3 {
animation-delay: 300ms;
.cell.d-4 {
animation-delay: 400ms;
.cell:nth-child(1) {
--cell-color: #00FF87;
.cell:nth-child(2) {
--cell-color: #0CFD95;
.cell:nth-child(3) {
--cell-color: #17FBA2;
.cell:nth-child(4) {
--cell-color: #23F9B2;
.cell:nth-child(5) {
--cell-color: #30F7C3;
.cell:nth-child(6) {
--cell-color: #3DF5D4;
.cell:nth-child(7) {
--cell-color: #45F4DE;
.cell:nth-child(8) {
--cell-color: #53F1F0;
.cell:nth-child(9) {
--cell-color: #60EFFF;
/*Animation*/
@keyframes ripple {
0% {
background-color: transparent;
30% {
background-color: var(--cell-color);
60% {
background-color: transparent;
100% {
background-color: transparent;
button {
--green: #1BFD9C;
font-size: 20px;
padding: 1.2em 3.5em;
letter-spacing: 0.06em;
position: relative;
font-family: inherit;
border-radius: 1.2em;
overflow: hidden;
transition: all 0.3s;
line-height: 1.6em;
border: 2px solid var(--green);
background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%, transparent 60%,
rgba(27, 253, 156, 0.1) 100%);
color: var(--green);
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
button:hover {
color: #82ffc9;
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
button:before {
content: "";
position: absolute;
left: -5em;
width: 5em;
height: 100%;
top: 0;
transition: transform .4s ease-in-out;
background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156,
0.1) 60%, transparent 100%);
button:hover:before {
transform: translateX(17em);
