body {
  background-color : #555560;
  overflow : hidden;
}
#background {
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
	background-image : url("../images/background.png");
	background-repeat : no-repeat;
	background-position : center;
	opacity : 1;
	filter : invert(25%);
	background-size : cover;
}
#menu {
	position : absolute;
	top : 0;
	left : 0;
	right : 0;
	height : 50px;
	background-color : #444450;
	box-shadow : 0 0 5px rgba(0, 0, 0, 1);
	transition : top 0.25s;
	z-index : 20;
}
.menu-button {
	position : absolute;
	top : 0;
	right : 0;
	height : 50px;
	width : 50px;
	background-color : #444450;
	transition : background-color 0.25s, box-shadow 0.25s;
}
.menu-button:hover {
	background-color : #555560;
	/* box-shadow : 0 0 10px rgba(0, 0, 0, 1); */
}
.button-image {
	position : absolute;
	top : 6.125px;
	left : 6.125px;
	height : 35.5px;
	width : 35.5px;
	/*background-color : #006622;*/
	box-shadow : 0 0 0 rgba(0, 0, 0, 0);
	transition : top 0.25s, left 0.25s, height 0.25s, width 0.25s, background-color 0.25s;
}
.menu-button:hover > .button-image {
	top : 3.0625px;
	left : 3.0625px;
	height : 43.875px;
	width : 43.875px;
	/*background-color : #006688;*/
	cursor : pointer;
}
#account {
	right : 0;
}
#pages {
	right : 50px;
}
#settings {
	right : 0;
}
#icon {
	position : absolute;
	top : 0;
	left : 0;
	height : 50px;
	width : 50px;
	background-color : #444450;
	box-shadow : 0 0 0 rgba(0, 0, 0, 0);
	transition : height 0.25s, width 0.25s, box-shadow 0.25s;
	cursor : pointer;
}
.logo-img {
    position : absolute;
    top : 5px;
    left : 5px;
    height : calc(100% - 10px);
    width : calc(100% - 10px);
}
#icon:hover {
	/* height : 62.5px;
	width : 62.5px; */
	/* box-shadow : 0 0 5px rgba(0, 0, 0, 1); */
	cursor : pointer;
}
#heading {
	font-family : Helvetica;
	color : #aaaaaa;
	font-size : 12.5px;
	position : absolute;
	left : 75px;
	height : 50px;
}
#heading:hover {
	cursor : pointer;
}
#heading > h1 {
	vertical-align : middle;
	line-height : 100px;
	position : relative;
	top : -40px;
	font-weight : normal;
}
#search {
	position : absolute; 
	top : 0;
	right : 150px;
	height : 50px;
	min-width : 200px;
	width : calc(50% - 150px);
}
h2 {
    color : #aaaaaa;
    font-family : Helvetica;
    font-size : 25px;
    margin : 5px;
    padding : 5px;
    font-weight : normal;
}
input {
	padding : 10px;
	margin : 10px;
	border : none;
	background-color : #555560;
	box-shadow : none;
	outline : none;
	border-radius : 5px;
	color : #aaaaaa;
	width : 200px;
	transition : width 0.25s;
}
input:focus {
    width : 250px;
}
.form-button {
    border : none;
    background-color : #444450;
    color : #aaaaaa;
    font-family : Helvetica;
    font-size : 25px;
    padding : 5px;
    margin : 5px;
    transition : background-color 0.25s;
}
.form-button:hover {
    background-color : #555560;
}
.span-option {
    color : #aaaaaa;
    text-decoration : underline;
    font-size : 15px;
    font-family : Helvetica;
    margin : 5px;
    padding : 5px;
    transition : color 0.25s, font-size 0.25s;
}
.span-option:hover {
    color : #006622;
    font-size : 16px;
}
.potential > div {
    padding : 5px 0 0 12.5px;
}
#input {
	position : absolute; 
	right : 0;
	width : 50%;
	height : 10px;
}
#input:focus {
	width : 75%;
}
#screen {
	position : absolute;
	top : 75px;
	left : 25px;
	/* ATTN: figure out later why the screen is too tall */
	bottom : 25px;
	right : 25px;
	/* box-shadow : inset 0 0 10px rgba(0, 0, 0, 1); */
}
#screen::after {
    content: '';
    position: absolute;
    z-index: 2;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 1);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
#frame {
    position : absolute;
    top : 0;
    left : 0;
    bottom : 0;
    right : 0;
}
iframe {
    border : none;
}
#top {
	position : absolute;
	top : 0;
	left : 50%;
	right : 0;
	height : 50px;
	width : 50%;
	transform : translate(-50%, -50%);
	opacity : 0;
	transition : opacity 0.25s, height 0.25s, width 0.25s, border-radius 0.25s;
}
#info {
	position : absolute;
	top : 75px;
	left : 25px;
	height : 50px;
	width : 50px;
	background-color : #555560;
	box-shadow : 3px 3px 3px rgba(0, 0, 0, 0.5);
	border-radius : 0 0 10px 0;
	transition : background-color 0.25s;
	z-index : 5;
}
#info:hover {
	background-color : #444450;	
}
#info > p {
	text-align : center;
	font-size : 25px;
	color : #aaaaaa;
	line-height : 25px;
	padding : 12.5px;
	vertical-align : middle;
	margin : -5px 0 0 0;
	cursor : pointer;
}
#top:hover {
	opacity : 0;
	height : 100px;
	cursor : row-resize;
}
#top > .circle {
	position : absolute;
	height : 50px;
	width : 50px;
	background-color : #555560;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	border-radius : 25px;
	box-shadow : 0 0 5px rgba(0, 0, 0, 1);
	transition : height 0.25s, width 0.25s, border-radius 0.25s;
}
#top:hover > .circle {
	height : 100px;
	width : 100px;
	border-radius : 50px;
}
#right {
	position : absolute;
	top : 0;
	right : 0;
	bottom : 0;
	height : 50%;
	width : 50px;
	transform : translate(50%, 50%);
	opacity : 0;
	background-color : orange;
	transition : opacity 0.25s, height 0.25s, width 0.25s, border-radius 0.25s;
}
#right:hover {
	opacity : 0;
	width: 100px;
	cursor : col-resize;
	background-color : red;
}
#right > .circle {
	position : absolute;
	height : 50px;
	width : 50px;
	background-color : #555560;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	border-radius : 25px;
	box-shadow : 0 0 5px rgba(0, 0, 0, 1);
	transition : height 0.25s, width 0.25s, border-radius 0.25s;
}
#right:hover > .circle {
	height : 100px;
	width : 100px;
	border-radius : 50px;
}
#bottom {
	position : absolute;
	bottom : 0;
	right : 0;
	bottom : 0;
	height : 50px;
	width : 50%;
	transform : translate(-50%, 50%);
	opacity : 0;
	transition : opacity 0.25s, height 0.25s, width 0.25s, border-radius 0.25s;
}
#bottom:hover {
	opacity : 0;
	height: 100px;
	cursor : row-resize;
}
#bottom > .circle {
	position : absolute;
	height : 50px;
	width : 50px;
	background-color : #555560;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	border-radius : 25px;
	box-shadow : 0 0 5px rgba(0, 0, 0, 1);
	transition : height 0.25s, width 0.25s, border-radius 0.25s;
}
#bottom:hover > .circle {
	height : 100px;
	width : 100px;
	border-radius : 50px;
}
#left {
	position : absolute;
	top : 0;
	left : 0;
	bottom : 0;
	height : 50%;
	width : 50px;
	transform : translate(-50%, 50%);
	opacity : 0;
	transition : opacity 0.25s, height 0.25s, width 0.25s, border-radius 0.25s;
}
#left:hover {
	opacity : 0;
	width: 100px;
	cursor : col-resize;
}
#left > .circle {
	position : absolute;
	height : 50px;
	width : 50px;
	background-color : #555560;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	border-radius : 25px;
	box-shadow : 0 0 5px rgba(0, 0, 0, 1);
	transition : height 0.25s, width 0.25s, border-radius 0.25s;
}
#left:hover > .circle {
	height : 100px;
	width : 100px;
	border-radius : 50px;
}
#open-menu {
	position : absolute;
	top : -500px;
	left : 0;
	right : 0;
	height : 500px;
	background-color : #444450;
	transition : top 0.25s;
	z-index : 10;
}
.box-shadow {
    box-shadow : 0 0 5px rgba(0, 0, 0, 1);
}
.icon-img {
    position : absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    width : 100%;
    height : 100%;
}
.screen-iframe {
    position : absolute;
    top : 0;
    left : 0;
    bottom : 0;
    right : 0;
}
.potential {
    display : none;
}
.hidden {
    display : none;
}
.index-section {
    width : 200px;
    height : 400px;
    /* box-shadow : inset 0 0 5px rgba(0, 0, 0, 1); */
    background-color : #555560;
    display : inline-block;
    margin : 25px;
    vertical-align : top;
}
.index-section > h1, .index-section > p {
    padding : 5px;
    padding-left: 15px;
    background-color : none;
    position : relative;
    left : -12.5px;
    top : -10px;
    font-family : Helvetica;
    color : #333344;
    width : 100%;
    transition : background-color 0.25s, color 0.25s;
}
.index-section > p:hover {
    background-color : #444455;
    color : #666666;
}
.hidden-iframe {
    display : none;
}