html, body{
	margin:		0;
	padding:	0;
}

html{
	background-color:	rgb(201,213,234);
	background-image:   url(../img/square_bg.png);
	height:				100%;
	font-family: 'Roboto', sans-serif;
}

.navbar a{
	color:				inherit;
	text-decoration:  	none;
}

.content{
	margin:				1% 5% 1% 5%;
	overflow: 			hidden;
}

.footer{
	position:			relative;
	font-variant:  		small-caps;
	font-size:			10pt;
	background-color:	rgba(80,80,80,0.6);
	color:				white;
	padding:			0.5em;
	border-radius:		0 0 5px 5px;
}

.navbar{
	position:			relative;
	background:			rgba(80,80,80,0.6);
	color:				white;
	padding:			0 0 0 0.5em;
	border-radius:		5px 5px 0 0;
	margin-top:			5px;
	min-height:			30px;
}

.navbtn{
	display:			inline-block;
	min-width:			150px;
	text-align:  		center;
	padding:			5px;
	transition: 		background-color 0.5s, text-shadow 0.5s;
	font-size:			16pt;
	height:				30px;
}

.navbtn:hover{
	background-color:	rgba(120,120,120,0.8);
	cursor:				hand;
	cursor:				pointer;
	text-shadow: 		2px 2px rgb(0,0,0);
}

.info{
	background-color:	rgba(200,200,200,0.8);
	height:				auto;
	overflow-y:			auto;
	/* height:				65%; */
}

.item{
	display:			flex;
	flex-direction:		row;
	background-color:	white;
	margin-bottom:		5px;
	padding: 5px 0;
}

.logo{
	flex:				2;
	text-align:			center;
}

.logo img{
	max-width:70%;
}

.itemtxt{
	flex:				8;
	background-color:	white;
	padding:			0.25em;
}

.title{
	font-size:			14pt;
	font-variant:  		small-caps;
	/* border-bottom:		1px solid black; */
	font-weight: bold;
	background-color: #037fc1;
	color: white;
	padding-left: 5px;
}

.cover{
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	background-image:   url(../img/what-the-hex.png);
	opacity:			0.2;
}

.infoSingle{
	background-color:	rgba(200,200,200,0.8);
	height:				auto;
	overflow-y:			auto;
	height:				65%;
	padding:			1em;
}

.fadeinleft{
	animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.fadeinbottom{
	animation-name: fadeInBottom;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes fadeInLeft {
   0% {
      opacity: 0;
      transform: translateY(-10px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}   

@keyframes fadeInBottom {
   0% {
      opacity: 0;
      transform: translateY(10px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}   