/* Parts */
@import './portfolio/welcome.css';
@import './portfolio/header.css';
@import './portfolio/main.css';
@import './portfolio/footer.css';

/* Fonts */
@font-face {
    font-family: 'Melon'; 
    src: url('../static/fonts/Melon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* VARIABLES */
:root {
	/* Global */
	--color-background: #0000;
	--color-background-rgb: 0, 0, 0;
	--color-contrast: white;
	--color-contrast-rgb: 255, 255, 255;
	--color-main: #00f;
	--color-main-rgb: 0, 0, 255;
	--font-main: Melon, 'Courrier New', Courrier, monospace, serif, system-ui, sans-serif;
	color-scheme: dark;

	/* Welcome */
	--welcome-time: 12s;
	--welcome-size: 1.5em;
	--typing-steps: 100;

	/* Header */
	--header-height: 3em;
	--header-size: 1em;

	/* Main */
	--melon-position: sticky;
	--music-position: sticky;
	--main-template: repeat(3, 1fr);
	--main-width: 40vw;
}

/* LIGHT THEME */
:root[data-theme="light"] {
	--color-background: #fff0;
	--color-background-rgb: 255, 255, 255;
	--color-contrast: black;
	--color-contrast-rgb: 0, 0, 0;
	color-scheme: light;
}

/* MOBILE */
@media (max-width: 768px) {
	:root {
		--welcome-size: 1em;
		--header-height: 2.5em;
		--main-template: 1fr;
		--main-width: calc(100vw - 4em - 4px);
		--melon-position: inherit;
		--music-position: inherit;
	}

	#clock[data-nav="opened"] {
		display: none;
	}
}

/* GLOBAL */
body {
	margin: 0;
	padding: 0;

	background-color: var(--color-background);
	color: var(--color-contrast);
	font-family: var(--font-main);
}

main {
	transition: .5s ease-in-out;
}