/* color palette from <https://catppuccin.com/palette> */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap');

:root {
	--bg-color: #EFF1F5;
	--sbg1-color: #CCD0DA;
	--sbg2-color: #bcc0cc;
	--text-color: #11111B;
	--button-text-color: #EFF1F5;
	--button-color: #11111B;
	
	--rosewater-color: #f4dbd6;
	--flamingo-color: #f0c6c6;
	--pink-color: #f5bde6;
	--mauve-color: #c6a0f6;
	--red-color: #ed8796;
	--maroon-color: #ee99a0;
	--peach-color: #f5a97f;
	--yellow-color: #eed49f;
	--green-color: #a6da95;
	--teal-color: #8bd5ca;
	--sky-color: #91d7e3;
	--sapphire-color: #7dc4e4;
	--blue-color: #8aadf4;
	--lavender-color: #b7bdf8;

  	--vc-pgn-active-color: #8aadf4 !important;
	--vc-pgn-width: .7vw !important;
	--vc-pgn-height: .7vw !important;
	--vc-pgn-border-radius: 50% !important;
}

.dark-theme {
	--bg-color: #1e1e2e;
	--sbg1-color: #313244;
	--sbg2-color: #45475a;
	--text-color: #cdd6f4;
	--button-color: #11111b;
	--button-text-color: #EFF1F5;
	--rosewater-color: #f4dbd6;
	--flamingo-color: #f0c6c6;
	--pink-color: #f5bde6;
	--mauve-color: #c6a0f6;
	--red-color: #ed8796;
	--maroon-color: #ee99a0;
	--peach-color: #f5a97f;
	--yellow-color: #eed49f;
	--green-color: #a6da95;
	--teal-color: #8bd5ca;
	--sky-color: #91d7e3;
	--sapphire-color: #7dc4e4;
	--blue-color: #8aadf4;
	--lavender-color: #b7bdf8;
}

* {
	transition: all 0.3s ease, color 0.3s ease
}

@font-face {
    font-family: 'PressStart2P';
    src: url('@/assets/fonts/PressStart2P-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aldrich';
    src: url('@/assets/fonts/aldrichrusbydaymarius.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

p {
    font-family: 'Aldrich', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'PressStart2P', sans-serif;
}

.text span {
	display: inline-flex;
	border-radius: 10px;
	align-items: center;
	padding: 3px 10px 3px 10px;
	gap: 5px;
	background-image: linear-gradient(to right,
			var(--rosewater-color),
			var(--flamingo-color),
			var(--pink-color),
			var(--mauve-color),
			var(--red-color),
			var(--maroon-color),
			var(--peach-color),
			var(--yellow-color),
			var(--green-color),
			var(--teal-color),
			var(--sky-color),
			var(--sapphire-color),
			var(--blue-color),
			var(--lavender-color)
	);
	color: var(--button-color)
}

.p-image {
	height: auto !important;
	max-height: 370px !important;
	border-radius: 15px !important;
}

.image img {
	height: auto !important;
	max-height: 370px !important;
	border-radius: 15px !important;
}

.p-image-preview {
	height: auto !important;
	max-height: 370px !important;
	border-radius: 15px !important;
}

.p-image-preview-mask {
	border-radius: 15px !important;
}