@import "variables";
@import "fonts";

html,body {margin:0;}

body {
	display:flex;
	height:100vh;
	font-size:1.2em;
	background:$color-background;
	color:$color-text;
	// font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-family: "Rubik", Roboto, sans-serif;
}

hr {
	border:0 0 10px 0;
	border-style:dashed;
	border-color:#000;
}

a {
	text-decoration:none;
	color:$color-alert;
}

.alert {
	color:$color-alert;
}

aside {
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	flex:0 0 25%;
	text-transform:uppercase;
	text-align:center;
	background:url(../img/dots-top.png) left top no-repeat, url(../img/dots-bottom.png) right bottom no-repeat;
	background-size:100%, 100%;
	background-color:$color-primary;
	color:#fff;

	img {
		max-width:40%;
		margin:0 auto;
	}

	nav {
		font-weight:bold;

		ul {
			margin:0;
			padding:0;
			list-style-type:none;

			a {
				color:#fff;
			}

			li {
				padding:0.8em 0;

				&:hover {
					background-color:#fff;
					color:#000;
				}
			}
		}
	}
}

section {
	padding:4em;
}