/* For width smaller than 400px: */
	@font-face
	{
		font-family: azonix;
		src: url(../Azonix.otf);
	}
	body
	{
		margin: 0;
		min-height: 100vh;
		width: 100%;
		font-family: arial,sans-serif;
		background-color: #fff;
	}
	#page-container
	{
		position: relative;
		min-height: 100vh;
	}
	#content-wrap
	{
		padding-bottom: 50px;
	}

	#topmsgpanel
	{
		background-color: #d2d2d2;
		color: #000;
		display: block;
		position: absolute;
		bottom: 0px;
		right: 0px;
		padding: 2px;
		font-size: 12px;
		overflow: hidden;
		box-shadow: 0px 0px 2px #848484;
		border-radius: 5px;
	}
	#formPanel
	{
		background-color: transparent;
		height: 100%;
	}
	#form
	{
		padding-top: 20vh;
		padding-bottom: 7vh;
	}
	#form h1 {
		font-size: 36px;
		margin: 20px 0;
		color: #333;
	}
	
	#form p {
		font-size: 18px;
		margin-bottom: 20px;
		color: #666;
	}
	a.logo
	{
		color: #f00;
		text-decoration:none;
		letter-spacing:0;
		font-size:55px;
		font-family: azonix, "Azonix";
		display: block;
		padding: 25px 15px;
		width: max-content;
	}
	span.part2
	{
		color:#00008B;
	}
	.part3
	{
		display: block;
		width: max-content;
		font-size: 14px;
		margin-left: 160px;
	}
	#formarea
	{
		max-width: max-content;
		margin: auto;
		font-size: 0;
		border-radius: 5px;
		text-align: center;
	}
	#formarea:hover
	{
		box-shadow: none;
	}
	#qfield
	{
		background-color: #fff;
		color: #000;
		width: 75%;
		padding: 12px 6px 12px 6px;
		font-size: 15px;
		border: 1px solid #848484;
		border-radius: 5px 0px 0px 5px;
		border-right: none;
		outline: none;
	}
	#livesearch
	{
		display: flex; flex-direction: column; border-top: none; background-color: #fff; color: #000;
		border-radius: 0 0 5px 5px; font-size: 15px;
	}
	#livesearch ul { list-style: none; padding: 0; margin:0; }
	.dOption { display:flex; align-items: end; background-color:transparent; padding:3px; }
	.dOption:hover { background-color:#e3e3e3; cursor:default; }
	.dOption .data { display: flex; flex-direction: column; align-items: center; padding-left: 20px; }
	.dOption .data .meta { font-size: 12px; }
	.dOption .data .cryptoprice { color:#00008B }
	.dOption .data .red { color:red }
	.dOption .data .green { color:green }
	.selected { background-color: #e3e3e3; }
	.retail_suggestion { display:flex; flex-direction: row; align-items: center; padding:3px; text-decoration:none; color:#00008B; }
	.retail_suggestion:hover { background-color:#e3e3e3; cursor:pointer; }
	.adOption { font-size:13px; color:#848484 }
	.homeTrends { display:flex; flex-direction:column; justify-content:center; width:90%; margin:auto; color:#ccc; border-radius:5px; padding:10px; }
	.trendsMainTitle { display:flex; font-size: 10pt; align-items:center; padding:10px 0; }
	.trendsHomeContainer { display:block; padding:10px 0; }
	.tLabel { display:inline-block; font-size:8pt; padding:5px; margin:3px; border-radius:10px; border:1px solid #555; text-decoration:none; color:#ccc; }
	#searchButton
	{
		background-color: #fff;
		color: #b5b5b5;
		padding: 12px 6px 12px 6px;
		font-size: 15px;
		border: 1px solid #848484;
		border-radius: 0px 5px 5px 0px;
		border-left: none;
		cursor: pointer;
	}
	#resetButton
	{
		display: none;
		background-color: #fff;
		color: #b5b5b5;
		padding: 12px 6px 12px 6px;
		font-size: 15px;
		border: 1px solid #848484;
		border-left: none;
		border-right: none;
		cursor: pointer;
	}
	#apiLink a { color: #00008B; }

	#mSearchUI
	{
		display: none; position: fixed; z-index: 1; left: 0; top: 0;
		width: 100%; height: 100%; overflow: auto; background-color: #fff;
	}
	#mSearchUI_content { display: flex; flex-direction: column; }
	#mSearchForm { display: flex; flex-direction: row; justify-content: center; height: 50px; }
	#mSearchfield { width:85%; border:0; padding-left:5px; font-size:15px; background-color: #fff; color:#000; outline:none; }
	#mSearchResetButton { display: none; }
	#close_mSearchUI, #mSearchResetButton {border: 0; color:#d2d2d2; background-color: #fff; margin: 0; padding:10px;}
	#suggestionsList { display:block; padding-top:10px; border-top: 1px solid #d2d2d2;}
	.suggestionLink {
		display:flex; color:#808080; padding:10px 0 10px 10%;
		border-bottom:1px solid #d2d2d2; text-decoration: none; font-size:15px;
	}
	.video_container {
		display: flex;
		justify-content: center;
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		height: 0;
	}
	#video_modal
	{
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable auto if needed */
		background-color: #000;
	}
	#yt-iframe { width: 100%; height: 350px; border: solid 1px #37474F; }
	@media only screen and (min-width: 812px) and (max-device-width: 1199px)
	{ #yt-iframe { width: 85%; height: 350px; } }
	@media only screen and (min-width: 1200px)
	{ #yt-iframe { width: 60%; height: 500px; } }
	.close
	{
		position: absolute;
		top: 15px;
		right: 35px;
		color: #fff;
		font-size: 40px;
		font-weight: bold;
		transition: 0.3s;
	}
	.close:hover, .close:focus
	{
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}

	#footer
	{
		display: flex;
		flex-direction: row;
		position: absolute;
		background-color: #f2f2f2;
		height: 50px;
		bottom: 0;
		width: 100%;
		box-shadow: 0px 0 5px rgba(0, 0, 0, 0.3);
	}
	.footerlinkContainer1
	{
		margin-top: 15px;
		margin-left: 15px;
	}
	.footerlinkContainer2
	{
		position: absolute;
		margin-top: 15px;
		right: 15px;
	}
	.footerLink
	{
		text-decoration: none;
		color: #70757a;
		font-size: 12px;
		margin: 5px 10px;
		font-family: arial,sans-serif;
	}

	/* Style the features section */
	.content {
    	text-align: center;
    	padding: 40px 0;
	}

	.feature {
    	margin: 20px;
    	display: inline-block;
    	text-align: left;
    	max-width: 300px;
	}

	.feature img {
    	width: 80px;
    	height: 80px;
    	margin-bottom: 10px;
	}

	.feature h3 {
    	font-size: 24px;
    	margin-bottom: 10px;
    	color: #333;
	}

	.feature p {
    	font-size: 16px;
    	color: #666;
	}

	/* Styles for Follow Us Section */
	#follow-us {
    	text-align: center;
    	padding: 40px 0;
	}

	#follow-us h2 {
    	font-size: 24px;
    	margin-bottom: 20px;
    	color: #333;
	}

	.social-icons {
    	display: flex;
    	justify-content: center;
    	align-items: center;
	}

	.social-icons a {
    	margin: 0 10px;
    	text-decoration: none;
    	transition: opacity 0.3s ease;
	}

	.social-icons a img {
    	width: 32px;
    	height: 32px;
	}

	.social-icons a:hover {
    	opacity: 0.7;
	}

	/* For Desktops 
	width 1200px and larger: */

	@media only screen and (min-width: 1200px)
	{
		#topmsgpanel
		{
			margin-bottom: 5px;
			margin-right: 5px;
			font-size: 14px;
		}
		#form { padding-top:10%; padding-bottom:4%; }
		a.logo { font-size:55pt; }
		.part3 { display:block; font-size:15px; letter-spacing: 2px; margin-left: 230px; }
		#formarea { max-width: max-content; box-shadow: 0px 0px 7px #7b7b7b; }
		#qfield { width:auto; font-size: 19px; padding:12px 6px 12px 12px; box-shadow:none; }
		#livesearch { font-size:19px; }
		#searchButton { font-size: 19px; padding: 12px 12px 12px 12px; box-shadow:none; }
		#resetButton { font-size: 19px; padding: 12px 12px 12px 12px; box-shadow:none; }
		.footerlinkContainer1 { margin-left: 30px; }
		.footerlinkContainer2 { right: 30px; }
		.footerLink { font-size: 14px; margin: 0 10px; }
		.homeTrends { width:40%; border-radius:5px; padding:10px; }
		.trendsMainTitle { font-size:11pt; padding:10px 0; }
		.trendsHomeContainer { padding:10px 0; }
		.tLabel { font-size:11pt; padding:7px; margin:5px; border-radius:10px; }
	}