@import url("./css/components.css");
@import url("./css/keyframes.css");
@import url("./css/layout.css");
@import url("./css/modals.css");

/* Components */
@import url("./css/components/buttons.css");
@import url("./css/components/cards.css");
@import url("./css/components/dropdowns.css");
@import url("./css/components/labels.css");

/* Pages */
@import url("./css/pages/home.css");
@import url("./css/pages/minecraft.css");
@import url("./css/pages/rules.css");
@import url("./css/pages/stats.css");
@import url("./css/pages/shrimp.css");

html,
body {
	margin: 0;
	height: 100%; 
	overflow: hidden
}

html {
	zoom: 1.2;
}

body {
	font-family: var(--primary-font);
	background: var(--crust);
	color: var(--text);
	font-size: 16px;
	line-height: 1.5;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface1) transparent;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--surface1);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

:root {
	--primary-font: "Segoe UI", sans-serif;
	--secondary-font: "JetBrains Mono", monospace;

    --sidebar-width: 220px;
	--transition-time: 0.15s;
	--transition-time-long: 0.3s;

	--fw-light: 301;
	--fw-regular: 401;
	--fw-medium: 501;
	--fw-semibold: 601;
	--fw-bold: 701;

    --content-padding-top: 2.5rem;
    --content-padding-bottom: 2.5rem;

	/* Catppuccin Mocha */
	--accent: rgb(213, 33, 70);
	--rosewater: rgb(245, 224, 220);
	--flamingo:  rgb(242, 205, 205);
	--pink:      rgb(245, 194, 231);
	--mauve:     rgb(203, 166, 247);
	--red:       rgb(243, 139, 168);
	--maroon:    rgb(235, 160, 172);
	--peach:     rgb(250, 179, 135);
	--yellow:    rgb(249, 226, 175);
	--green:     rgb(166, 227, 161);
	--teal:      rgb(148, 226, 213);
	--sky:       rgb(137, 220, 235);
	--sapphire:  rgb(116, 199, 236);
	--blue:      rgb(137, 180, 250);
	--lavender:  rgb(180, 190, 254);
	--text:      rgb(205, 214, 244);
	--subtext1:  rgb(186, 194, 222);
	--subtext0:  rgb(166, 173, 200);
	--overlay2:  rgb(147, 153, 178);
	--overlay1:  rgb(127, 132, 156);
	--overlay0:  rgb(108, 112, 134);
	--surface2:  rgb(88, 91, 112);
	--surface1:  rgb(69, 71, 90);
	--surface0:  rgb(49, 50, 68);
	--base:      rgb(30, 30, 46);
	--mantle:    rgb(24, 24, 37);
	--crust:     rgb(17, 17, 27);
}

[data-theme="latte"] {
	--rosewater: rgb(220, 138, 120);
	--flamingo:  rgb(221, 120, 120);
	--pink:      rgb(234, 118, 203);
	--mauve:     rgb(136, 57, 239);
	--red:       rgb(210, 15, 57);
	--maroon:    rgb(230, 69, 83);
	--peach:     rgb(254, 100, 11);
	--yellow:    rgb(223, 142, 29);
	--green:     rgb(64, 160, 43);
	--teal:      rgb(23, 146, 153);
	--sky:       rgb(4, 165, 229);
	--sapphire:  rgb(32, 159, 181);
	--blue:      rgb(30, 102, 245);
	--lavender:  rgb(114, 135, 253);
	--text:      rgb(76, 79, 105);
	--subtext1:  rgb(92, 95, 119);
	--subtext0:  rgb(108, 111, 133);
	--overlay2:  rgb(124, 127, 147);
	--overlay1:  rgb(140, 143, 161);
	--overlay0:  rgb(156, 160, 176);
	--surface2:  rgb(172, 176, 190);
	--surface1:  rgb(188, 192, 204);
	--surface0:  rgb(204, 208, 218);
	--base:      rgb(239, 241, 245);
	--mantle:    rgb(230, 233, 239);
	--crust:     rgb(220, 224, 232);
}

[data-theme="frappe"] {
	--rosewater: rgb(242, 213, 207);
	--flamingo:  rgb(238, 190, 190);
	--pink:      rgb(244, 184, 228);
	--mauve:     rgb(202, 158, 230);
	--red:       rgb(231, 130, 132);
	--maroon:    rgb(234, 153, 156);
	--peach:     rgb(239, 159, 118);
	--yellow:    rgb(229, 200, 144);
	--green:     rgb(166, 209, 137);
	--teal:      rgb(129, 200, 190);
	--sky:       rgb(153, 209, 219);
	--sapphire:  rgb(133, 193, 220);
	--blue:      rgb(140, 170, 238);
	--lavender:  rgb(186, 187, 241);
	--text:      rgb(198, 208, 245);
	--subtext1:  rgb(181, 191, 226);
	--subtext0:  rgb(165, 173, 206);
	--overlay2:  rgb(148, 156, 187);
	--overlay1:  rgb(131, 139, 167);
	--overlay0:  rgb(115, 121, 148);
	--surface2:  rgb(98, 104, 128);
	--surface1:  rgb(81, 87, 109);
	--surface0:  rgb(65, 69, 89);
	--base:      rgb(48, 52, 70);
	--mantle:    rgb(41, 44, 60);
	--crust:     rgb(35, 38, 52);
}

[data-theme="macchiato"] {
	--rosewater: rgb(244, 219, 214);
	--flamingo:  rgb(240, 198, 198);
	--pink:      rgb(245, 189, 230);
	--mauve:     rgb(198, 160, 246);
	--red:       rgb(237, 135, 150);
	--maroon:    rgb(238, 153, 160);
	--peach:     rgb(245, 169, 127);
	--yellow:    rgb(238, 212, 159);
	--green:     rgb(166, 218, 149);
	--teal:      rgb(139, 213, 202);
	--sky:       rgb(145, 215, 227);
	--sapphire:  rgb(125, 196, 228);
	--blue:      rgb(138, 173, 244);
	--lavender:  rgb(183, 189, 248);
	--text:      rgb(202, 211, 245);
	--subtext1:  rgb(184, 192, 224);
	--subtext0:  rgb(165, 173, 203);
	--overlay2:  rgb(147, 154, 183);
	--overlay1:  rgb(128, 135, 162);
	--overlay0:  rgb(110, 115, 141);
	--surface2:  rgb(91, 96, 120);
	--surface1:  rgb(73, 77, 100);
	--surface0:  rgb(54, 58, 79);
	--base:      rgb(36, 39, 58);
	--mantle:    rgb(30, 32, 48);
	--crust:     rgb(24, 25, 38);
}

[data-theme="discord"] {
	--accent:    rgb(88, 101, 242);
	
	--rosewater: rgb(220, 138, 120);
	--flamingo:  rgb(221, 120, 120);
	--pink:      rgb(233, 30, 99);
	--mauve:     rgb(155, 89, 182);
	--red:       rgb(243, 139, 168);
	--maroon:    rgb(231, 76, 60);
	--peach:     rgb(234, 152, 0);
	--yellow:    rgb(241, 196, 15);
	--green:     rgb(46, 204, 113);
	--teal:      rgb(23, 146, 153);
	--sky:       rgb(4, 165, 229);
	--sapphire:  rgb(32, 159, 181);
	--blue:      rgb(52, 152, 219);
	--lavender:  rgb(114, 135, 253);
	--text:      rgb(242, 243, 245);
	--subtext1:  rgb(181, 186, 193);
	--subtext0:  rgb(148, 155, 164);
	--overlay2:  rgb(128, 132, 142);
	--overlay1:  rgb(107, 112, 122);
	--overlay0:  rgb(78, 80, 88);
	--surface2:  rgb(49, 51, 56);
	--surface1:  rgb(43, 45, 49);
	--surface0:  rgb(35, 36, 40);
	--base:      rgb(30, 31, 34);
	--mantle:    rgb(24, 25, 28);
	--crust:     rgb(17, 18, 20);
}

@media (max-width: 640px) {
	:root {
		--sidebar-width: 0px;
		--content-padding-top: 1.2rem;
		--content-padding-bottom: 3rem;
	}

	#sidebar {
		width: 100%;
		height: auto;
		position: static;
		flex-direction: row;
		align-items: center;
		padding: 0.5rem 1rem;
		border-right: none;
		border-bottom: 1px solid var(--surface0);
		flex-wrap: wrap;
	}

	.sidebar-brand {
		padding: 0;
		border-bottom: none;
		margin-bottom: 0;
	}

	.nav-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
		padding: 0;
		flex: 1;
		flex-wrap: wrap;
	}

	.nav-section {
		display: none;
	}

	.sidebar-footer {
		padding: 0;
		border-top: none;
	}
	.btn-logout {
		width: auto;
	}

	#content-wrap {
		margin-left: 0;
	}
	#content {
		padding: var(--content-padding-top) 1rem var(--content-padding-bottom);
	}

	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}