/* Reset and Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23161518' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");

}

body.dark-mode {
    background-color: #121212;
    color: white;
}

header, main, .section-content {
    width: 100%;
}

header {
    max-width: 100%;
    background-color: #333;
    color: white;
    padding: 1em;
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    margin-right: 4.2rem;
}

.header-logo .logo {
    width: 40px; /* Adjust logo size */
    height: 40px;
    padding: 0;
}


h1 {
    font-size: 1rem;
    padding: 2rem;
    padding-right: 0.5rem;
    white-space: nowrap;
}

h2{
    text-align: center;
    font-weight: bold;
    font-size: large;
}

#menu {
	font-size: 1.5rem;
	border: 0;
	background: none;
	color: white;
	position: absolute;
	top: 3.5rem;
	right: 1rem;
}

#menu::before {
	content: "☰";
}

#menu.open::before {
	content: "❎";
}

#toggleTheme{
    background-color: black;
    color: white;
    padding: 3px;
    float: right;
    border-radius: 7px;
    margin-top: 0.2rem;
}

nav ul {
    list-style: none;
}

.navigation a {
	display: none;
	text-align: center;
	text-decoration: none;
	color: white;
    font-weight: 700;
    padding: 1rem;
}

.navigation a:hover { 
	background-color: black;
	color: white;
	font-weight: 700;
}

.open a {
	display: block;
}

.section-content {
    padding: 2em;
    text-align: center;
    font-weight: bold;
    font-size: large;
    max-width: 100%;
}

.section-content.active {
    display: block; /* Show the active section */
}

.hidden {
    display: none;
}

.chart {
    height: 100%;
    width: auto;
}

.other-chart canvas {
    width: auto;
    height: 100%;
}

.market-cap.full-figure {
    display: none; 
}

/* Table Styles */

/* Wrapper for horizontal scrolling */
.table-wrapper {
    overflow-x: auto;
    width: 100%;
    position: relative;
    margin-top: 1em;
}

/* Base table styles */
.crypto-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.7rem;
}

/* Sticky Table Header */
.crypto-table thead {
    position: sticky;
    top: 0; /* Keeps the table header at the top of the viewport */
    z-index: 1; /* Ensure the header stays above the table body */
    background-color: #f4f4f4;
}

.crypto-table th {
    padding: 0.75em;
    text-align: left;
    font-weight: bold;
    border: 1px solid #ddd;
    background-color: inherit; /* Inherit from thead to maintain consistency */
}

/* Sticky First Two Columns */
.crypto-table th:nth-child(1),
.crypto-table td:nth-child(1) {
    position: sticky;
    left: 0;
    background-color: white; /* Match table background */
    z-index: 2; /* Keep the first column above the body content */
}

.crypto-table th:nth-child(2),
.crypto-table td:nth-child(2) {
    position: sticky;
    left: 35px; /* Adjust to match the width of the first column */
    background-color: white;
    z-index: 1; /* Slightly lower z-index for the second column */
}

/* Table Cells */
.crypto-table td {
    padding: 0.75em;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
    font-size: 0.9em;
}

/* Ensure row demarcation lines are visible */
.crypto-table tbody tr {
    border-bottom: 1px solid #ddd; /* Add bottom borders to table rows */
}

/* Alternating Row Colors */
.crypto-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Hover Effect */
.crypto-table tbody tr:hover {
    background-color: #f1f1f1;
}




/* Ensure images align */
.crypto-table img {
    vertical-align: middle;
    margin-right: 0.5em;
}

/* Dark Mode Adjustments */
body.dark-mode table {
    border-color: white;
}

body.dark-mode table th:nth-child(1),
body.dark-mode table td:nth-child(1), 
body.dark-mode table th:nth-child(2),
body.dark-mode table td:nth-child(2) {
    background-color: black;

}
body.dark-mode table tbody tr:nth-child(even) {
    background-color: black;
}

body.dark-mode table th {
    background-color: black;
    color: white;
    font-weight: bold;
}

body.dark-mode table tbody tr:hover {
    background-color: rgb(79, 87, 87);
}


.price-change-positive {
    color: green;
    font-weight: bold;
}
  
.price-change-negative {
    color: red;
    font-weight: bold;
}

/* Positive change (green) */
.positive-change {
    color: green;
    font-weight: bold;
}

/* Negative change (red) */
.negative-change {
    color: red;
    font-weight: bold;
}