/* Catppuccin Mocha Theme */
:root {
    --ctp-base: #1E1E2E;
    --ctp-mantle: #181825;
    --ctp-crust: #11111B;
    --ctp-text: #CDD6F4;
    --ctp-subtext: #A6ADC8;
    --ctp-overlay: #9399B2;
    --ctp-surface0: #45475A;
    --ctp-surface1: #585B70;
    --ctp-surface2: #6C7086;
    --ctp-blue: #89B4FA;
    --ctp-lavender: #B4BEFE;
    --ctp-sapphire: #74C7EC;
    --ctp-green: #A6E3A1;
    --ctp-yellow: #F9E2AF;
    --ctp-peach: #FAB387;
    --ctp-maroon: #EBA0AC;
    --ctp-red: #F38BA8;
    --ctp-mauve: #CBA6F7;
    --ctp-pink: #F5C2E7;
    --ctp-flamingo: #F2CDCD;
    --ctp-rosewater: #F5E0DC;
  }

  
  @font-face {font-family: custom; src: url(/assets/font/basiic.ttf)}


body {
	display: flex;
	justify-content: center;
	color: var(--ctp-text);
    font-family: 'Courier New', Courier, monospace;
	background: radial-gradient(transparent 90%, #0000ff10) var(--ctp-base);
	height: 100vh;
	padding: 6em;
	box-sizing: border-box;

	&::after {content: none}
  scrollbar-width: thin;
  scrollbar-color: var(--ctp-lavender) var(--ctp-base);
  overflow-x: hidden;
}

header {
	display: flex;
	justify-content: space-between;
	font-size: 0.875em;

	margin-bottom: -2em;
}

main {
	display: flex;
	flex-direction: column;
	width: 400px;
	padding: 2em 4em;
	overflow: hidden auto;
	position: relative;
    font-size: 0.8em;
    border: 2px solid var(--ctp-lavender);
}

img {
    max-width: 200px;
}

.lav{
	color: var(--ctp-lavender);
}

.comment {
  color: var(--ctp-subtext);
  font-size: 10px;
}

h2 {
    color: var(--ctp-pink);
    text-align: center;
}

ul {
    text-align: left;
}