pages/global.css

@font-face {
    font-family: 'Hack';
    src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
}

:root {
    --white: #fff;
    --pastel-violet: #c099ff;
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --lavender: #b4befe;
    --text: #cdd6f4;
    --subtext0: #a6adc8;
    --subtext1: #bac2de;
    --overlay0: #6c7086;
    --overlay1: #7f849c;
    --overlay2: #9399b2;
    --surface0: #313244;
    --surface1: #45475a;
    --surface2: #585b70;
    --base: #1e1e2e;
    --mantle: #181825;
    --crust: #11111b;
    --bg-primary: #1e1e2e;
}

::selection {
	background-color: var(--mauve);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-size: 1rem;
    background-color: var(--base);
    color: var(--text);
    overflow-x: hidden;
}

* {
    font-family: 'Hack', 'JetBrainsMono', monospace;
}

a {
    color: var(--white);
}

a:hover,
svg:hover {
    color: var(--pastel-violet);
}

.cards {
    background-color: var(--mantle);
    border: 2px solid var(--surface1);
    padding: 20px;
    border-radius: 10px;
    width: 600px !important;
    text-align: center;
    transition: border 0.1s;
}

.cards:hover {
    border: 2px solid var(--surface2);
}

.shadow {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tooltip {
    display: flex;
    justify-content: center;
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 125%;
    background-color: var(--base);
    border: 1px solid var(--overlay0);
    color: var(--text);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: default;
}

.text-inp {
	background-color: var(--base);
	color: var(--text);
	padding: 3px
}

.p1 {
	padding: 1px;
}

.p2 {
	padding: 2px;
}

.p3 {
	padding: 3px;
}

.p4 {
	padding: 4px;
}

.p5 {
	padding: 5px;
}

.p10 {
	padding: 10px;
}

.p15 {
	padding: 15px;
}

.p20 {
	padding: 20px;
}

/* border */

.no-b {
	border: none;
}

.b1 {
	border-width: 1px;
	border-style: solid;
}

.b2 {
	border-width: 2px;
	border-style: solid;
}

.b3 {
	border-width: 3px;
	border-style: solid;
}

.b4 {
	border-width: 4px;
	border-style: solid;
}

/* text */
.h1 { font-size: 32px   }
.h2 { font-size: 24px   }
.h3 { font-size: 20.8px }
.h4 { font-size: 16px   }
.h5 { font-size: 12.8px }
.h6 { font-size: 11.2px }