/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Variables
	2.	Typography
	3. 	Layout Base
	4. 	Card Header
	5. 	Card Content
	6. 	Animation

-------------------------------------------------------------- */

/* 0. CSS Reset ---------------------------------------------- */

html,
body {
	border: none;
	margin: 0;
	padding: 0;
}
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul, menu {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

/* 1. Variables ---------------------------------------------- */

:root {
    --default-margin: 0.83em; /* this simulate the default margin most elements have */
}

/* 2. Typography --------------------------------------------- */

body {
    background: url(../img/bg2.png) repeat center top fixed;
    background-size: 421px 596px;
    color: white;
    font-family: serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
i, em {
    font-style: italic;
}
b, strong,
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
a {
    color: white;
    font-weight: 700;
}
a:hover {
    color: white;
    text-decoration: none;
}
@media screen and (min-width: 768px) {
    h1 {
        font-size: 2.5em;
    }
    h2 {
        font-size: 2em;
    }
    p {
        font-size: 1.25em;
    }
}

/* 3. Layout Base -------------------------------------------- */

html,
body {
    height: 100%;
    overscroll-behavior: none;
}
main {
    display: flex;
    flex-direction: column;
    min-height: 100%;
	margin-block: calc(var(--default-margin) * 2);
    margin-inline: auto;
	padding-inline: calc(var(--default-margin) * 2);
	max-width: calc(768px + var(--default-margin) * 4);
}
hr {
    margin-block: calc(var(--default-margin) * 3);
}

/* 4. Header ------------------------------------------------- */

header {
    text-align: center;
}

/* 5. Content ------------------------------------------------- */

section {
    text-align: center;
}
section video {
    margin-block: var(--default-margin);
}
section img {
    display: block;
    height: auto;
    margin-block: calc(var(--default-margin) * 3) var(--default-margin);
    width: 100%;
}
section iframe {
    margin-block: calc(var(--default-margin) * 2) var(--default-margin);
}
.subscribe {
    display: inline-block;
    height: auto;
    margin-block: var(--default-margin) calc(var(--default-margin) * 2);
    width: 115px;
}

/* 6. footer -------------------------------------------------- */

footer {
    text-align: center;
}
footer p {
    font-size: 1em;
}

/* 7. Animation ---------------------------------------------- */

body main {
    opacity: 0;
}
body.loaded main {
    opacity: 1;
}