@import 'style_reset.css';
@import 'style_global.css';
@import 'style_about.css';

@import 'style_header.css';

@import 'style_home.css';
@import 'style_index.css';
@import 'style_project.css';

@import 'style_footer.css';

/* Variables
======================================== */
:root{
	/* Text Setting */
	--font: 'Times', serif;
	--fs: 11px;
	--fsl: calc(var(--fs) * 2);
	--lh: 1.2;

	/* Color */
	--bg: #f0f0f0;
    --text: #000;
	--grey: #919191;
	--opacity: 30%;
    --shadow: rgba(0, 0, 0, 0.05);

	/* Margins */
	--ms: .25rem;
	--mm: calc(var(--ms) * 1.5);
	--ml: calc(var(--mm) * 2);

	/* Transitions */
	--speed: 400ms;
	--ease: cubic-bezier(0.83, 0, 0.17, 1);

	/* Effects */
	--blur: blur(100px);

	/* Player */
	--plyr-color-main: none;
	--plyr-range-track-height: 1px;
	--plyr-range-thumb-height: 0px;
	--plyr-range-fill-background: none;
	--plyr-range-thumb-shadow: none;
	--plyr-range-thumb-background: var(--color-grey);
	--plyr-range-fill-background: var(--bg);
	--plyr-video-background: var(--text);
	--plyr-video-progress-buffered-background: transparent;

	--plyr-range-thumb-active-shadow-width: 0px;
	--plyr-control-radius: 0;
	--plyr-control-spacing: var(--mm);
}