@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700,300);

html, body {
	height: 100%;
	display: block;
	padding:0;
	margin:0;
}

body {
	background-color: #1A141F;
	overflow: hidden;
	background-image:url('./img/mask.png');
	background-position: center;
	background-repeat: repeat;
}

.g__mask {
	position: absolute;
	top:0px;
	left:0px;
	opacity: 0.5;
	width: 800px;
	height: 800px;
}

.g__ui-font {
	font-family: 'Source Code Pro', sans-serif;
}

.task-list {
	font-weight:lighter;
	list-style:none;
	padding:0;
	margin:0;
}

.g__rotate {
	margin-left:100px;
	transform: rotate(350deg);
	transform-origin: 0 0;
}

.task-list__item {
	margin:2em 0;
	font-size:25px;
	color:#fff;
	display: block;
}


.task-list__item--flyout:hover > .task-list__link {
	box-shadow: inset 300px 0 0 0 #3FA6B4;
}
.task-list__item--flyout:hover > .task-list--flyout {
	max-height: 400px;
}

.task-list--flyout {
	background-color: #000;
	max-width: 300px;
	max-height: 0px;
	overflow: hidden;
	transition: max-height 300ms;
}

.screen-fx {}

.screen-fx .screen-fx__text {
    text-shadow: 1px 0px 0px #0ff, -1px 0px 0px #f00;
}

.screen-fx .screen-fx__black-box {
    border-right: 1px solid #033;
    border-left: 1px solid #300;
}
.screen-fx .screen-fx__white-box {
	border: 2px solid;
	border-color:#ff0 #f00 #000 #0cc;
}

.screen-fx__black-box {
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
	transition: all 300ms;
}
.screen-fx__white-box {
	border: 2px solid transparent;
	transition: all 300ms;
}
.screen-fx__text {
	transition: all 300ms;
}

.task-list__link {
	padding:10px;
	cursor: pointer;
	color:#fff;
	text-decoration: none;
	display: inline-block;
	background-color: #000;
    box-shadow: inset 0 0 0 0 #3FA6B4;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
}

.task-list__link--inverted {
    box-shadow: inset 0 0 0 0 #ECFF33;
	background-color: #fff;
	position: relative;
	color:#000;
}

.task-list__link:hover {
    box-shadow: inset 300px 0 0 0 #3FA6B4;
}


.task-list__link--inverted:hover {
	box-shadow: inset 300px 0 0 0 #ECFF33;
}