* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	font-family: sans-serif;
	line-height: 1;
	font-weight: 400;
	color: #323232;
	background-color: var(--background-page);
}

:root {
	/* Colors */
	--wht: #fff;
	--background-page: #ecf4f3;
	--background-row-light: #e8e8e8;
	--background-row-dark: #d9d9d9;
	--border: #cbcbcb;
	--background-row-highlight: #c0e6f2;
	--main-color: #3888a2;
	--highlight-color: #44965a;
	--loss-color: #e72020;
	--loss-mild: #c14343;
	--link: #270fa0;
	/* perfect fifth typescale */
	--xlarge: 5.063rem;
	--large: 3.375rem;
	--med: 2.225rem;
	--small: 1.5rem;
	--xsmal: 1rem;
	/* page width */
	--standard-width: 120rem;
}
/* General*/

.shadow {
	box-shadow: 0.25rem 0.25rem 1.5rem 0.25rem#0f0f0f38;
}

.heading {
	font-size: var(--large);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 1rem;
}

.subheading {
	font-size: var(--small);
	text-transform: uppercase;
	font-weight: 400;
}

/* Header Section */
.content-container {
	margin: 5rem;
}
.section-header {
	max-width: var(--standard-width);
	color: white;
	background-color: var(--main-color);
	margin: 3rem auto;
	padding: 2rem 4rem;
	border-radius: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.timeframe {
	list-style: none;
	display: flex;
	gap: 1rem;
	font-size: var(--med);
}

.time-int a {
	color: var(--wht);
}
.time-active a {
	color: var(--link);
}

.btn {
	color: var(--wht);
	border: none;
	background-color: var(--main-color);
	padding: 1rem 2rem;
	border-radius: 0.65rem;
	transition: all 250ms;
}

.btn:hover,
.btn:active {
	cursor: pointer;
	box-shadow: 0.0715rem 0.0715rem 1rem 0.1rem#0f0f0f28;
	transform: translateY(0.195rem);
}

/* MAIN SECTION */
.section-main {
	max-width: var(--standard-width);
	display: flex;
	gap: 3rem;
	justify-content: space-between;
	margin: 3rem auto;
}

/* TABLE */
.table-main {
	border-collapse: collapse;
	font-size: 1.8rem;
	border-radius: 0.85rem;
	overflow: hidden;
	max-width: 90rem;
	margin-bottom: 2rem;

	font-weight: 600;
}

.header-col {
	background-color: var(--main-color);
	color: var(--wht);
	padding: 0.75rem 1rem;
	text-align: left;
}

.header-col:active,
.header-col:hover {
	cursor: pointer;
}

.row {
	font-size: 1.5rem;
	transition: all 175ms;
}

.table-main tbody td {
	padding: 0.25rem 1rem;

	border-right: 0.15rem solid var(--border);
	/* border-bottom: 0.125rem solid var(--border); */
}
.table-main tbody td:last-of-type {
	border-right: none;
	/* border-bottom: 0.125rem solid var(--border); */
}
.table-main tbody td:last-child {
	border-bottom: 0.25 rem solid var(--highlight-color);
	/* border-bottom: 0.125rem solid var(--border); */
}

.icon {
	width: 2.25rem;
	height: 2.25rem;
}

.symbol {
	font-size: 1.2rem;
	font-weight: 400;
	color: #3e3e3e;
}

.change {
	text-align: right;
}

.down-arrow {
	color: var(--loss-color);
}
.up-arrow {
	color: var(--highlight-color);
}

/* sort arrows */
.arrow {
	display: none;
	font-size: 0.925rem;
}

.sort-desc .down {
	display: inline-block;
}
.sort-asc .up {
	display: inline-block;
}

.pagination-btns {
	margin-bottom: 2rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.btn-page-forward {
	margin-left: auto;
}

/* Zebra Stripes */
.row:nth-child(even) {
	background-color: var(--background-row-light);
}

.row:nth-child(odd) {
	background-color: var(--background-row-dark);
}

/* Highlight on hover */
.row:hover {
	background-color: var(--background-row-highlight);
	/* color: var(--highlight-color); */
	cursor: pointer;
}

/* GLANCES */
.glances {
	max-width: 40rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.glance-box {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem;
	align-items: center;
	color: white;

	background-color: var(--highlight-color);
	border-radius: 1rem;
}
/* if the change is positive no class this is the default */

/* if there is a loss */
.loss {
	background-color: var(--loss-mild);
}

.title {
	font-size: var(--med);
	margin-bottom: 1rem;
}

.subtitle {
	font-size: var(--small);
	text-transform: uppercase;
	font-weight: 300;
}

.number {
	font-size: var(--med);
	background-color: white;
	padding: 0.75rem;
	border: 0.25rem solid var(--border);
	color: #323232;
	/* min-width: fit-content; */
}

.glance-coin {
	display: flex;

	gap: 1rem;
	align-items: center;
}