/**
 * This is the main CSS for cinescape.com. Refer to theme files for specific design variations.
 * Version: 1.2.4
 * 
 * Table of Contents:
 * 
 *    1 - Reset
 *    2 - Background Fix
 *    3 - Global
 *    4 - Header
 *    5 - Home Page
 *    6 - Privacy Policy
 */


/**
 * 1 - Reset
 */

*,
*:after,
*:before
{
	/* Apply a natural box layout model to all elements. */
	-moz-box-sizing: border-box; /* Firefox ≤ 28 */
	-webkit-box-sizing: border-box; /* Android ≤ 3, iOS ≤ 4.3 */
	box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5+ */
}

[hidden], /*  Address [hidden] styling not present in IE 8/9/10 */
template /* Hide the template element in IE 8/9/11, Safari, and Firefox < 22 */
{
	display: none;
}

article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
main,
nav,
ruby,
section,
summary
{
	display: block;
}

button, /* Correct the inability to style clickable types in iOS and Safari. */
[type="button"],
[type="reset"],
[type="submit"]
{
  -webkit-appearance: button;
}

html
{
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* Prevents adjustments of font size after orientation changes in iOS */
	overflow-y: scroll; /* Persistent Scrollbars */
}


/**
 * 2 - Background Fix
 * Note: "background-attachment: fixed" does not work in mobile browsers
 */

div.content
{
	position: absolute;
	width: 100%;
}

div.theme
{
	background: var(--color-background);
	background-repeat: no-repeat;
	background-position: center;
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	z-index: -1;
}


/**
 * 3 - Global
 */

:root
{
	--color-background: white;
	--color-highlight-default-background: black;
	--color-highlight-hover-background: white;
	--color-highlight-text: white;
	--color-text: black;
}

@font-face
{
	font-family: 'FuturaPT';
	src:
		url('/assets/fonts/Futura-PT_Book.woff2') format('woff2'),
		url('/assets/fonts/Futura-PT_Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'FuturaPT';
	src:
		url('/assets/fonts/Futura-PT_Book-Oblique.woff2') format('woff2'),
		url('/assets/fonts/Futura-PT_Book-Oblique.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face
{
	font-family: 'FuturaPT';
	src:
		url('/assets/fonts/Futura-PT_Bold.woff2') format('woff2'),
		url('/assets/fonts/Futura-PT_Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

a
{
	color: var(--color-text);
	text-decoration-color: var(--color-highlight-default-background);
	text-decoration-thickness: 0.12rem;
	text-underline-offset: 0.12rem;
}

a:hover
{
	text-decoration-color: var(--color-highlight-hover-background);
}

body
{
	color: var(--color-text);
	font-family: FuturaPT, Futura, sans-serif;
	font-size: 18px;
	line-height: 2rem;
	margin: 0;
}

div.content
{
	padding: 1.5rem;
}

figure
{
	background-color: var(--color-highlight-default-background);
	border-radius: 0.2rem;
	margin: 0 0 1.5rem 0;
	max-width: 100%;
	padding: 0.5rem;
}

figure figcaption
{
	color: var(--color-highlight-text);
	padding: 0.5rem 0.5rem 0 0.5rem;
	text-align: center;
}

figure img
{
	border-radius: 0.2rem;
	display: block;
	width: 100%;
}

main h1,
main p
{
	padding: 0;
}

main h1
{
	line-height: 4rem;
	margin: 0 0 1.5rem 0;
}

main p
{
	margin: 0 0 1rem 0;
}

@media (min-width: 640px)
{
	main
	{
		margin-top: 5.74rem;
		padding: 0 1.5rem 1.5rem 1.5rem;
	}
}


/**
 * 4 - Header
 */

div.content > header
{
	font-size: 1.2rem;
	line-height: 2rem;
	text-align: center;
}

div.content > header a
{
	background-color: black;
	border: 0.12rem solid black;
	border-radius: 0.2rem;
	color: white;
	display: inline-block;
	font-weight: bold;
	padding: 1rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
}

div.content > header a:hover
{
	background-color: white;
	color: black;
}

div.content > header div
{
	padding: 0.9rem 0;
}

@media (min-width: 640px)
{
	div.content > header
	{
		left: 1.5rem;
		position: fixed;
		text-align: left;
		top: 1.5rem;
		transform: none;
		z-index: 200;
	}
	
	div.content > header a
	{
		margin: 0 1.5rem 0 0;
	}
	
	div.content > header div
	{
		display: inline;
		padding: 0;
	}
}


/**
 * 5 - Home Page
 */

main#home
{
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
	text-align: center;
}

main#home form
{
	margin: 0 0 1.5rem 0;
}

main#home form input
{
	background-color: white;
	border: 0.12rem solid black;
	border-radius: 0.2rem;
	display: block;
	font-family: inherit;
	font-size: 1.2rem;
	margin: 0 auto 1.5rem auto;
	outline: none;
	padding: 1rem 1.5rem;
	text-align: center;
}

main#home form button
{
	background-color: black;
	border: 0.12rem solid black;
	border-radius: 0.2rem;
	color: white;
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0 auto;
	padding: 1rem 1.5rem;
	text-transform: uppercase;
}

main#home form button:hover
{
	background-color: white;
	color: black;
}

main#home h1
{
	font-size: 2rem;
	line-height: 3rem;
}

@media (min-width: 640px)
{
	main#home form button,
	main#home form input
	{
		display: inline;
		margin: 0 0.75rem;
	}
	
	main#home form input
	{
		text-align: left;
	}
	
	main#home h1 span
	{
		display: block;
	}
}


/**
 * 6 - Privacy Policy
 */

main#privacy
{
	max-width: 700px;
}

main#privacy address
{
	margin-left: 1.5rem;
}

main#privacy h1
{
	font-size: 3rem;
}

main#privacy h2
{
	border-bottom: 0.12rem solid var(--color-highlight-default-background);
	margin-top: 3rem;
}

main#privacy h3
{
	margin-top: 1.5rem;
	text-decoration: underline;
	text-decoration-thickness: 0.12rem;
	text-underline-offset: 0.12rem;
}

main#privacy table
{
	border: 0.12rem solid var(--color-highlight-default-background);
	border-collapse: collapse;
	text-align: left;
	width: 100%;
}

main#privacy table tr td,
main#privacy table tr th
{
	border: 0.12rem solid var(--color-text);
	padding: 0.2rem 0.4rem;
	vertical-align: top;
}

main#privacy table tr th
{
	background-color: var(--color-highlight-default-background);
	color: var(--color-highlight-text);
	min-width: 9rem;
	width: 25%;
}