* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	background-color: #000000;
	line-height: 1.5;
}

a {
	text-decoration: none;
	cursor: pointer;
}

input, button, textarea, select {
	font: inherit;
}

::selection {
	background: #FFF1A5;
	color: #000000;
}

/* -------------------- HEADER -------------------- */

header {
	width: 80vw;
	padding: 5vw;
	margin: 10vw 0 0 10vw;
/* */
	background: url(../img/bg.svg) repeat;
}

logo {
	display: block;
	height: 5vw;
	width: 42vw;
/* */
	background: url(../img/logo.svg) no-repeat center left;
	background-size: contain;
}

aside {
	margin: 5vw 0 0 0;
/* */
	font-family: 'Newsreader', serif;
	font-weight: 200;
	font-size: 2.2vw;
	color: #CCCCCC;
}

aside a {
        color: #FFF1A5;
}

/* -------------------- MAIN -------------------- */

main {
	padding: 5vw 0 0 0;
/* */
	font-family: 'Newsreader', serif;
	font-weight: 300;
	font-size: 1.5vw;
	color: #CCCCCC;
}

main a {
	color: #FFF1A5;
}

.quote {
	display: block;
	font-size: 1vw;
}

.title {
	display: block;
	padding: 5vw 0 0 0;
/* */
	font-weight: 200;
	font-size: 2.2vw;
}

ul {
  list-style-type: circle;
}

footer {
	width: 80vw;
	height: 10vw;
	margin: 0 0 0 10vw;
}

/* -------------------- EXTRAS -------------------- */

.rainbow {
  display: inline-block;
  margin-left: 0.5vw;
  width: 1.8vw;
  height: 1vw;
/* */
  border-radius: 0.1vw;
  background-image: linear-gradient(
    to bottom,
    red,
    red 17%,
    orange 17%,
    orange 34%,
    yellow 34%,
    yellow 51%,
    green 51%,
    green 68%,
    blue 68%,
    blue 86%,
    purple 86%,
    purple
  );
}

/* -------------------- MEDIA -------------------- */

@media only screen and (max-width: 744px) and (orientation: portrait) {

	body {
		margin: 0;
	}

	header {
		width: 100%;
		padding: 10vw;
		margin: 0;
	}

	aside {
		margin: 10vw 0 0 0;
	/* */
		font-size: 5vw;
	}
	
	.title {
		font-size: 5vw;
	}
	
	main {
		font-size: 3.5vw;
	}
	
	.quote {
		font-size: 2.5vw;
	}
	
	footer {
		display: none;
	}

}

/* -------------------- PRINT -------------------- */

@media print {

	* {
		display: none;
	}

}


