@CHARSET "UTF-8";

:root {

	/* ------------------------------------------------------------------ Boxed Container */

	--boxed-container-max-width: 140rem;
	--boxed-cont-hor-offset: 5rem;

	/* Mobile */

	--boxed-cont-hor-offset-mobile: var(--col-hor-margin-mobile);

	/* ------------------------------------------------------------------ Mixed Container */

	--section-offset: 5rem;

	/* Mobile */

	--section-offset-mobile: 3rem;

	/* ------------------------------------------------------------------ Columns */

	--col-hor-margin: 1.5rem;
	--col-ver-margin: calc(var(--col-hor-margin) * 2);

	/* Mobile */

	--col-hor-margin-mobile: 1rem;
	--col-ver-margin-mobile: calc(var(--col-hor-margin-mobile) * 2);

	/* ------------------------------------------------------------------ Form */

	--input-hor-margin: 0.5rem;
	--input-ver-margin: calc(var(--input-hor-margin) * 2);
	--input-hor-padding: 1.5rem;
	--input-ver-padding: 1rem;
	--input-min-height: 5rem;
	--input-border: var(--dark-border);

	/* ------------------------------------------------------------------ Table */

	--table-hor-padding: 1.5rem;
	--table-ver-padding: 1rem;

	/* ------------------------------------------------------------------ Typography */

	/* Titles */

	--h1-font-size: 5rem;
	--h2-font-size: 4rem;
	--h3-font-size: 3.3rem;
	--h4-font-size: 3rem;
	--h5-font-size: 2.2rem;
	--title-font: 'Roboto Condensed', sans-serif;
	--title-line-height: 120%;
	--title-font-weight: 800;
	--title-letter-spacing: 0rem;
	--title-text-transform: unset;

	/* Titles Mobile */

	--h1-font-size-mobile: 4rem;
	--h2-font-size-mobile: 2.6rem;
	--h3-font-size-mobile: 2.4rem;
	--h4-font-size-mobile: 2.2rem;
	--h5-font-size-mobile: 2rem;

	/* Paragraph */

	--p-font: 'Roboto', sans-serif;
	--p-font-size: 1.4rem;
	--p-font-weight: 300;
	--p-line-height: 160%;
	--p-letter-spacing: 0.05rem;

	/* Small */

	--small-font-size: 1.2rem;
	--small-line-height: 150%;

	/* ------------------------------------------------------------------ Color */

	/* Palette */

	--color-main: #09aad4;
	--color-dark: #222;
	--color-grey: #f4f7fc;
	--color-1: rgba(78,206,196,1); /* Green */
	--color-2: rgba(62,71,90,1); /* Blue/Grey */
	--color-3: #191919; /* Dark Grey */
	--color-4: #ed5565; /* Red */
	--color-5: #f8ac59; /* Orange */

	/* Main Wrapper */

	--main-wrapper-bg-color: var(--color-grey);

	/* Typography */

	--color-title: #222;
	--color-p: #888;
	--color-link: #222;
	--color-link-hover: var(--color-main);

	/* Form */

	--color-input-bg: var(--color-grey);

	/* Main Footer */

	--main-footer-color-title: var(--color-main);
	--main-footer-color-p: rgba(255,255,255,0.8);
	--main-footer-color-link: #fff;
	--main-footer-color-link-hover: #fff;
	--main-footer-background-color: var(--color-3);

	/* Credits */

	--credits-hor-padding: 0;
	--credits-ver-padding: 1rem /* var(--col-ver-margin) */;

	/* ------------------------------------------------------------------ Borders */
	
	--main-border-radius: 0.4rem;
	--border-size: 0.1rem;
	--light-border: rgba(255,255,255,0.1);
	--dark-border: rgba(0,0,0,0.05);
}