@charset "UTF-8";
/* CSS Document */

*, *:before, *:after {
    box-sizing: border-box;
}
.android-alert {
    background-color: #fffdf0; /* Very light amber/cream */
    border: 1px solid #d4a017; /* Darker gold/border */
    color: #5c4b00;            /* Dark brown/gold text for readability */
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    
    /* Clears floats so it doesn't get squeezed or overlapped */
    clear: both; 
    display: block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Optional: Add a little "Android Green" accent icon via CSS */
.android-alert::before {
    content: "🤖"; 
    margin-right: 10px;
    font-size: 1.2em;
    vertical-align: middle;
}

.row{
	margin-left: 0;
    margin-right: 0;
	margin-top: 10px;
	min-width:320px;/*600*/
	max-width:800px;/*800*/
	text-align: center;
}
img {
    height: auto;
    max-width: 100%;
}
.col{
	float:left;
	margin-bottom: 15px;
	margin-top:15px;
	width:25%;
}
.screenshotrow{
	width:100%;
	padding: 0px;
	margin-top: 10px;
}
.screenshotcol{
	width:50%;
	float:left;
	margin-bottom: 15px;
	margin-top:15px;
}
.screenshotcol img {
	width:90%;
	margin-left:10px;
}
.screenshotrow:after {
  content: "";
  display: table;
  clear: both;
}
.col-ap{
	width:25%;
	float:left;
	margin-bottom: 15px;
	margin-top:15px;
}
.col img {
	width:85%;
}
.col-ap img{
	width:80%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
overflow-x: hidden; /* The ultimate safety net */
    position: relative;
    width: 100%;
}
.store-button-container img {
    width: 140px; /* Forces the 140-150px size you want */
    height: auto;
    margin: 10px; /* Adds space between the two buttons */
}

/* Ensure they stay centered on mobile */
@media (max-width: 767px) {
    .store-button-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}
h1 {
	margin-left: 20px; /* This creates the 20px gap from the logo */
    flex: 1;               /* Takes up the remaining space to the right */
    color: #FFFFFF !important;
    text-align: left !important; /* Changed from center to align with logo */
    font-size: 1.5rem;
    line-height: 1.2;
    /* Add the black outline/shadow for readability */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 
                 -1px -1px 0 #000,  
                  1px -1px 0 #000,
                 -1px  1px 0 #000,
                  1px  1px 0 #000;
}
header .logo, header img {
    max-width: 100%;       /* Ensures the logo doesn't push the boundary */
    height: auto;
}
header{
	display: flex;
    flex-wrap: wrap;       /* Allows the black nav bar to wrap below */
    align-items: center;   /* Vertically aligns logo and text */
    padding: 10px;
    background-image: -webkit-linear-gradient(-45deg, rgb(25,65,179) 0%, rgb(175,200,230) 100%);
/*  position: fixed;*/
  background-image:-moz-linear-gradient( -45deg, rgb(25,65,179) 0%, rgb(175,200,230) 100%);
  background-image: -webkit-linear-gradient( -45deg, rgb(25,65,179) 0%, rgb(175,200,230) 100%);
  background-image: -ms-linear-gradient( -45deg, rgb(25,65,179) 0%, rgb(175,200,230) 100%);
  background-image: -ms-linear-gradient( -45deg, rgb(25,65,179) 0%, rgb(175,200,230) 100%);
 /* background:rgba(150,150,220,0.9);*/
/*	background: #9999EE;
	
	padding:10px*/
}
.head-logo {
    width: 150px;
    float: left;
    margin-left: 10px; /* This "bumps" it in from the left edge */
    height: auto;
}
header ul, header li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2; /* Tightens the vertical space around text */
}
.top-nav{
	width:100%;
/*	padding: 2.00em;*/
/*	min-height: 80px;*/
	background-color:black;
	color: azure;
}
header nav {
    display: flex;
    align-items: center; /* This prevents the box from stretching vertically */
    justify-content: space-between; /* Keeps logo left, links right */
    height: auto; /* Ensures it only stays as tall as the content */
}
.top-nav ul {
	display: flex;
    justify-content: center; /* Centers your links on the screen */
    list-style: none;
    margin: 0;
    padding: 0;
}
.top-nav ul li {
	padding-left: 5px;
	padding-top:3px;
	float:left;
	font-size: 15px;
	}
.top-nav ul li a {
	padding: 3px 20px; /* This creates the "gap" between links */
    display: inline-block;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	text-decoration: none;
}
.selected {
	color:cyan;
}
.not-selected{
	color:whitesmoke;

}
.selected a:link {
	color:cyan;
	text-decoration: none;
}
.selected a:hover {
	color:cyan;
	text-decoration: none;
}
.selected a:active {
	color:cyan;
	text-decoration: none;
}
.selected a:visited  {
	color:cyan;
	text-decoration: none;
}


footer{
	margin-top: 50px;
	min-height: 100px;
	color:antiquewhite;
	background-color: darkblue;
	text-align: center;
	padding:10px;
	text-decoration: none;
	font-size: 20px;
}
footer a:link {
	color:antiquewhite;
	text-decoration: none;
}
footer a:hover {
	color:antiquewhite;
	text-decoration: none;
}
footer a:active {
	color:antiquewhite;
	text-decoration: none;
}
footer a:visited  {
	color:antiquewhite;
	text-decoration: none;
}
.headlink a:link {
	color:antiquewhite;
	text-decoration: none;
}
.headlink a:hover {
	color:antiquewhite;
	text-decoration: none;
}
.headlink a:active {
	color:antiquewhite;
	text-decoration: none;
}
.headlink a:visited  {
	color:antiquewhite;
	text-decoration: none;
}
main{
	margin-top:12em;
	/*	margin: 20px;*/
	font-size:21px;
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
}
h3 {
    display: block;      /* Forces it to be a "block" that starts a new line */
    float: none;         /* Stops other elements from wrapping next to it */
    clear: both;         /* Extra safety to ensure it clears any previous floats */
    font-size: 21px;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
    margin-bottom: 10px; /* Optional: adds a little space before the next paragraph */
}
@media (max-width: 767px) {
	.row, .top-nav, main, header {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px; /* Safe breathing room */
        padding-right: 10px;
    }
	img {
        max-width: 100% !important; /* Forces images to stay inside the phone screen */
        height: auto;
    }
	main {
        margin-top: 20px !important; /* This closes the big gap */
    }
    header {
        display: flex;
        flex-direction: column; /* Stacks everything to ensure no horizontal overflow */
        align-items: center;
        padding: 10px 0;
    }
.logo-wrapper {
    flex: 0 0 150px;       /* Fixed width for the logo area */
    margin-right: 20px;
}
	
    .head-logo {
        width: 100px; /* Small enough to stay centered */
        height: auto;
    }

    .top-nav {
        width: 100%; /* Spans the full width for the black bar effect */
        background-color: black;
        display: flex;
        justify-content: center; /* Centers the links inside the black bar */
        padding: 5px 0;
    }

    .top-nav ul {
        display: flex;
        justify-content: center;
        width: auto;
    }

    .top-nav ul li a {
        padding: 8px 6px !important; 
        font-size: 12px;
        white-space: nowrap;
    }
}
@media (min-width: 768px){
	.logo-wrapper {
        float: left;
        width: 150px;
    }
    .head-logo {
        width: 100%; /* Fills the 150px wrapper */
        height: auto;
    }
	.top-nav{
		width:100%;
		/*padding: 2.00em;*/
	/*	min-height: 80px;*/
		background-color:black;
		color: azure;
	}
    .top-nav img {
        max-width: 120px; /* Adjust this number until it fits perfectly */
        height: auto;
    }

	main{
		margin-top:1em;
	}
	.top-nav ul li {
/*	padding-left: 5px;
	padding-top:5px;
*/	}
	header nav ul li a {
        /* Reduce horizontal padding so links fit on one line */
        padding-left: 4px !important;
        padding-right: 4px !important;
        
        /* Optional: slightly smaller font if they still overlap */
        font-size: 14px; 
    }
    
    header nav ul {
        /* Ensure the list itself doesn't have any hidden edge padding */
        padding: 0;
        justify-content: center;
    }
}
 body {
      background-color: white;

    }

@media (min-width: 1024px){
	.logo-wrapper {
        float: left;
        width: 150px;
    }
    .head-logo {
        width: 100%; /* Fills the 150px wrapper */
        height: auto;
    }

	.top-nav{
		width:100%;
		padding: 2px;
	/*	min-height: 80px;*/
		background-color:black;
		color: azure;
	}
	body {
       /* max-width: 1200px;*/ /* Or whatever width you like */
        margin: 0 auto;
    }
	main{
			margin-top:1em;

		}
	.top-nav ul li {
		padding-left: 15px;
		padding-top:2px;

	}
}	
main {
		margin-left: auto;
		margin-right: auto;
		max-width: 90%;

	}
}