/******************************************************************************\
# CSS - MAIN                                     #          Melodyway          #
################################################################################
#                                                #       /\           /\       #
# Teoman Deniz                                   #      /  \         /  \      #
# melodyway.app                                  # \   /    \   ^   /    \   / #
#                                                #  \ /      \ / \ /      \ /  #
# +.....................++.....................+ #   \        /   \        /   #
# : C - Melodyway       :: Create - 2024/10/10 : #  / \      / \ / \      / \  #
# :---------------------::---------------------: # /   \    /   V   \    /   \ #
# : License - BY-NC-ND4 :: Update - 2025/07/27 : #      \  /         \  /      #
# +.....................++.....................+ #       \/           \/       #
\******************************************************************************/

/* ************************ [v] IMPORTING FONTS [v] ************************* */
@import url(
	'https://fonts.googleapis.com/css2?\
		family=Jost:ital,wght@0,100..900;1,100..900&display=swap'
	);
/* ************************ [^] IMPORTING FONTS [^] ************************* */

/* ************************ [v] COLOUR VARIABLES [v] ************************ */
:ROOT
{
	                  --WHITE: #FFF;
	                --PRIMARY: #E84A8C;
	    --PRIMARY_TRANSPARENT: #E84A8C4D;

	      --TEXT_ON_DARK_BG_L: #E9DDED;
	      --TEXT_ON_DARK_BG_M: #E9DDEDD9;
	      --TEXT_ON_DARK_BG_S: #E9DDEDB3;
	 --TEXT_ON_DARK_BG_GRAYED: #E9DDED66;
	--TEXT_ON_LIGHT_BG_GRAYED: #16091E66;

	             --BACKGROUND: #010205;
	           --DARK_OVERLAY: #00000059;
	           --FRAME_DARKER: #4E4B7533;
	          --FRAME_LIGHTER: #4E4B7566;

	                --SUCCESS: #7DD276;
	                --WARNING: #FFB876;
	                  --ERROR: #F23E53;
}
/* ************************ [^] COLOUR VARIABLES [^] ************************ */

/* *************************** [v] SCROLL BAR [v] *************************** */
*::-WEBKIT-SCROLLBAR
{
	WIDTH: 12PX;
}

*::-WEBKIT-SCROLLBAR-TRACK
{
	   BACKGROUND: TRANSPARENT;
	BORDER-RADIUS: 16PX;
}

*::-WEBKIT-SCROLLBAR-THUMB
{
	   BACKGROUND: VAR(--FRAME_DARKER);
	BORDER-RADIUS: 16PX;
}

*::-WEBKIT-SCROLLBAR-THUMB:HOVER
{
	   BACKGROUND: VAR(--TEXT_ON_DARK_BG_M);
	BORDER-RADIUS: 16PX;
}

@SUPPORTS (-MS-IME-ALIGN: AUTO)
{
	*::-WEBKIT-SCROLLBAR-THUMB:HOVER
	{
		BOX-SHADOW: NONE !IMPORTANT; /* SIMPLIFY THE EFFECT IN EDGE */
	}
}
/* *************************** [^] SCROLL BAR [^] *************************** */

/* *************************** [v] SAFARI FIX [v] *************************** */
DIV,
SPAN,
P,
H1,
H2,
H3,
H4,
H5,
H6,
SVG,
IMG
{
	   -MOZ-USER-SELECT: NONE;
	    -MS-USER-SELECT: NONE;
	        USER-SELECT: NONE;
	-WEBKIT-USER-SELECT: NONE;
	            OUTLINE: NONE;
}
/* *************************** [^] SAFARI FIX [^] *************************** */

::SELECTION
{
	BACKGROUND-COLOR: TRANSPARENT;
}

@SUPPORTS NOT SELECTOR(::-WEBKIT-SCROLLBAR)
{
	*
	{
		SCROLLBAR-COLOR: VAR(--FRAME_DARKER) TRANSPARENT;
	}
}

*
{
	                     MARGIN: 0;
	                FONT-FAMILY: "Jost", sans-serif;
	                      COLOR: VAR(--TEXT_ON_DARK_BG_M);
	       scrollbar-face-color: white; /* IE */
	       scrollbar-base-color: #111; /* IE */
	      scrollbar-track-color: #000; /* IE */
	      scrollbar-arrow-color: white; /* IE */
	     scrollbar-shadow-color: #000; /* IE */
	    scrollbar-3dlight-color: #000; /* IE */
	  scrollbar-highlight-color: #000; /* IE */
	scrollbar-dark-shadow-color: #000; /* IE */
}

A, A SPAN
{
	FONT-WEIGHT: 600;
	LINE-HEIGHT: 23PX;
	  FONT-SIZE: 16PX;
	      COLOR: VAR(--TEXT_ON_DARK_BG_L);
}

H1, H2, H3, H4, H5,
SH1, SH2, SH3
{
	 FONT-STYLE: NORMAL;
	FONT-WEIGHT: 500;
}

H1, H2, H3, H4, H5
{
	LINE-HEIGHT: 130%;
}

SH1, SH2, SH3, P1, P2, P3
{
	   LINE-HEIGHT: 150%;
	LETTER-SPACING: 0.01EM;
}

H1, H2, H3
{
	COLOR: VAR(--TEXT_ON_DARK_BG_L);
}

H4, H5, SH1, SH2, P1, P2
{
	COLOR: VAR(--TEXT_ON_DARK_BG_M);
}

SH3, P3
{
	COLOR: VAR(--TEXT_ON_DARK_BG_S);
}

H1
{
	FONT-SIZE: 80PX;
}

H2
{
	FONT-SIZE: 60PX;
}

H3
{
	FONT-SIZE: 44PX;
}

H4
{
	FONT-SIZE: 36PX;
}

H5
{
	FONT-SIZE: 28PX;
}

SH1
{
	FONT-SIZE: 40PX;
}

SH2
{
	FONT-SIZE: 24PX;
}

SH3
{
	FONT-SIZE: 15PX;
}

P1
{
	FONT-WEIGHT: 300;
	  FONT-SIZE: 24PX;
}

P2
{
	FONT-WEIGHT: 400;
	  FONT-SIZE: 24PX;
}

P3
{
	FONT-WEIGHT: 400;
	  FONT-SIZE: 14PX;
}

/* *********** [v] FOR SCREENS EQUAL OR BIGGER THAN 1920X1080 [v] *********** */
@MEDIA SCREEN AND (MIN-WIDTH: 1920PX) AND (MIN-HEIGHT: 1080PX)
{
	A, A SPAN
	{
		LINE-HEIGHT: 29PX;
		  FONT-SIZE: 20PX;
	}

	H1
	{
		FONT-SIZE: 96PX;
	}

	H2
	{
		FONT-SIZE: 64PX;
	}

	H3
	{
		FONT-SIZE: 48PX;
	}

	H4
	{
		FONT-SIZE: 36PX;
	}

	H5
	{
		FONT-SIZE: 28PX;
	}

	SH1
	{
		FONT-SIZE: 60PX;
	}

	SH2
	{
		FONT-SIZE: 30PX;
	}

	SH3
	{
		FONT-SIZE: 22PX;
	}

	P1
	{
		FONT-WEIGHT: 300;
		  FONT-SIZE: 30PX;
	}

	P2
	{
		FONT-WEIGHT: 400;
		  FONT-SIZE: 20PX;
	}

	P3
	{
		FONT-WEIGHT: 400;
		  FONT-SIZE: 18PX;
	}
}
/* *********** [^] FOR SCREENS EQUAL OR BIGGER THAN 1920X1080 [^] *********** */

/* ************************ [v] FOR PHONE SCREEN [v] ************************ */
@MEDIA SCREEN AND (MAX-WIDTH: 767PX) AND (ORIENTATION: PORTRAIT)
{
	A, A SPAN
	{
		LINE-HEIGHT: 26PX;
		  FONT-SIZE: 18PX;
	}

	H1, H2, H3, H4, H5
	{
		LINE-HEIGHT: NORMAL;
	}

	SH1, SH2, SH3, P1, P2, P3
	{
		   LINE-HEIGHT: NORMAL;
		LETTER-SPACING: 0;
	}

	H1
	{
		FONT-SIZE: 64PX;
	}

	H2
	{
		FONT-SIZE: 48PX;
	}

	H3
	{
		FONT-SIZE: 36PX;
	}

	H4
	{
		FONT-SIZE: 30PX;
	}

	H5
	{
		FONT-SIZE: 20PX;
	}

	SH1
	{
		FONT-SIZE: 30PX;
	}

	SH2
	{
		FONT-SIZE: 24PX;
	}

	SH3
	{
		FONT-SIZE: 16PX;
	}

	P1
	{
		FONT-WEIGHT: 300;
		  FONT-SIZE: 18PX;
	}

	P2
	{
		FONT-WEIGHT: 400;
		  FONT-SIZE: 14PX;
	}

	P3
	{
		FONT-WEIGHT: 400;
		  FONT-SIZE: 12PX;
	}
}
/* ************************ [^] FOR PHONE SCREEN [^] ************************ */

BODY, HTML
{
	 WIDTH: -WEBKIT-FILL-AVAILABLE;
	HEIGHT: -WEBKIT-FILL-AVAILABLE;
	MARGIN: 0;
}