* {
    font-family: Calibri;
	/* font-size: 20px; */
}

@media only screen and (max-width: 768px) {
    body {
        margin-bottom: 400px; /* Add margin-bottom to body equal to the height of the footer */
    }
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
	height: 60px;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
	line-height:30px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

/* Set logo to the top left */
.topnav a.logo {
	float: left;
	padding: 0;
}

/* Set everything within api component to be centered*/
.api-component {
	text-align: center;
}

/* Each row can take 2 blocks*/
.block a {
	width: 50%; 
	height: 100px;
	float: left;
	display: inline-block;
	color: black;
	text-decoration: none;
	margin: 25px 0px;
}

/* align images in a block to the text */
.block a img {
	vertical-align: middle;
	width: 130px;
}

/* Styling for the text in each block */
.title {
	font-size: 1.5em; 
	padding-bottom: 0.2em;
}

.text {
	width: 250px; 
	text-align:left; 
	display:inline-block;
	vertical-align: middle;
}

.clearfix {
	clear: both;
}

/* Column nav in the footer */
.column {
	vertical-align: top;
	margin-left: 100px;
	margin-top: 50px;
	display: inline-block;
}

.api-component {
	height: 160vh;
}

.footer {
	background-color: #333;
	height: 50px;
	width: 100%;
	position: absolute;
	bottom: 0px important;
}

.footer a {
	text-decoration: none;
	color: white;
}

.copyright {
	margin-right: 50px;
	color: white;
	float: right;
}