/*
pifuncssd.css
Last update: 1/1/23
*/

* {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
	
}

    body, html {
		padding: 3px 3px 3px 3px;
		background-color: #212738;
		font-family: Verdana, sans-serif;
		font-size: 100%;
		text-align: center;
}

    .main_page {
		margin-bottom: 3px;
		margin-left: auto;
		margin-right: auto;
		padding: 5px 5px 5px 5px;
		border-radius: 12px;
		border-width: 4px;
		border-color: #212738;
		border-style: solid;
		background-color: #333333;
		text-align: center;
	
}
/* Scroll Bar */

		/* width */
	::-webkit-scrollbar {
		width: 8px;
}

		/* Track */
	::-webkit-scrollbar-track {
		background: #212738; 
}
 
		/* Handle */
	::-webkit-scrollbar-thumb {
		background: #505050; 
}

		/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #555; 
}

    .page_header {
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 3px;
		background-color: #262626;
}

    .page_header img {
		margin-left: auto;
		margin-right: auto;
		max-width: 900px;
		max-height: 100px;
}

	.section_header_orange {
		padding: 3px 6px 3px 6px;
		background-color: #ea874b;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 120%;
		text-align: center;
}

    .section_header_blue {
		background-color: #4660ac;
		padding: 3px 6px 3px 6px;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 120%;
		text-align: center;
}

	.header_element {
		width: 100%;
		position: relative;
		float: center;
	
}
	.floating_element {
		width: 100%;
		position: relative;
		float: center;
}
    .content_section {
		margin-left: auto;
		margin-right: auto;
		border-radius: 12px;
		background-color: #FFFFFF;
		text-align: left;
}

	.content_section_text {
		padding: 4px 8px 4px 8px;
		color: #000000;
		font-size: 1.2em;
		text-align: left;
}
  
	.content_section_text p {
		margin-bottom: 6px;
}  

    .content_section_text a {
		text-decoration: none;
		line-height: 160%;
		font-weight: bold;
}

    .content_section_text ul {
		padding: 0px 8px 6px 16px;
}

	.content_section_text a:link,
    .content_section_text a:visited,
    .content_section_text a:active {
		background-color: #ededed;
		border-radius: 8px;
		color: #000000;
}

	.content_section_text a:hover {
		background-color: #000000;
		color: #e98b52;
}

	.content_section_text_mobile {
		padding: 4px 8px 10px 0px;
		color: #000000;
		font-size: 1.1em;
		text-align: left;
}

    .content_section_text_mobile a {
		text-decoration: none;
        padding-left: 5px;
        padding-right: 5px;
		font-weight: bold;	
}

	.content_section_text_mobile a:link,
    .content_section_text_mobile a:visited,
    .content_section_text_mobile a:active {
		background-color: #ededed;
		border-radius: 8px;
		color: #000000;
}

	.content_section_text_mobile a:hover {
		background-color: #000000;
		color: #e98b52;
}

    .categories {
		text-align: center;
}

    .letters {
		text-align: center;
		font-size: 1.7em;
		color:#f21818;
		font-weight: bold;
} 

	.categoriesd {
		text-align: left;
		padding: 0px 0px 0px 40px;
}

    .lettersd {
		text-align: left;
		font-size: 1.3em;
		font-style: italic;
		color:#f21818;
		font-weight: bold;
} 

    .content_section_text_desktop {
		text-align: left;
		font-size: 117%;
		padding: 0px 0px 10px 2%;
	
}

    .content_section_text_desktop a {
		text-decoration: none;
		font-weight: bold;
		margin-bottom: 5px;
		padding-left: 5px;
		padding-right: 5px;
		line-height: 50%;
}   
  
    .content_section_text_desktop a:link,
    .content_section_text_desktop a:visited,
    .content_section_text_desktop a:active {
		background-color: #ededed;
		border-radius: 8px;
		color: #000000;
}

	.content_section_text_desktop a:hover {
		background-color: #000000;
		color: #e98b52;
}

	.section_header_orange a {
		text-decoration: none;
		font-weight: bold;
		margin-bottom: 5px;
		font-size: 110%;
}

	.section_header_orange a:link,
    .section_header_orange a:visited,
    .section_header_orange a:active {
		color: white;
}

	.styled-button {
      	background-color: #0988b0; /* blue background */
      	color: white; /* White text */
      	border: 5px; /* Remove border */
      	padding: 10px 25px; /* Add padding */
      	font-size: 18px; /* Font size */
      	font-weight: bold;
     	cursor: pointer; /* Pointer cursor on hover */
     	border-radius: 5px; /* Rounded corners */
      	transition: background-color 0.3s; /* Smooth transition */
}

    .styled-button:hover {
      	background-color: #45a049; /* green on hover */
}

	.back_button {  /*catalog pages back button*/
		padding-left: 2%;
		padding-bottom: .5%;
		padding-top: 1.8%;
	}

	.denote_emb {  /*Google play / F-Droid emblems */
		height: 20px;
	}


/* ALLCATALOGS TABLE */
	.catalogs_table table {
		font-family: arial, sans-serif;
		border-collapse: collapse;
		width: 100%;
		
}

	.catalogs_table th {
		border: 2px solid #355785;
		text-align: left;
		font-weight: bold;
		padding: 8px;

}

	.catalogs_table td {
		border: 2px solid #355785;
		text-align: left;
		padding: 8px;
}

	.catalogs_table tr:nth-child(odd) {
		background-color: #ffeed4;
		color: black;
}
/* END ALLCATALOGS TABLE */

	.contact_form input[type=text], select {
		width: 40%;
		padding: 10px 10px;
		margin: 8px 0;
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
}

	.contact_form input[type=submit] {
		width: 50%;
		background-color: #4CAF50;
		color: white;
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		border-radius: 4px;
		cursor: pointer;
}

	.contact_form input[type=submit]:hover {
	    background-color: #45a049;
}

	.contact_form div {
	    border-radius: 5px;
	    background-color: #f2f2f2;
	    padding: 20px;
}

/* Index page OS_Selector */
	.os_select figure {
		border: 4px solid #2a1f14;
    	max-width: 300px;
    	margin: 2% auto;
	}

	.os_select figcaption {
		padding-top: 2%;
		text-align: center;
		font-size: 1.3em;
		font-weight: bold;
	}

	.os_select img {
		max-width: 300px;
		height: auto;
	}



	.os_select_text {
		font-size: 1.2em;
		font-weight: bold;
		text-align: center;
}

    .problems {
		font-size: 1.1em;
	  
}
  
    .footer {
		color: #ffffff;
		font-size: .9em;
		text-align: center;
}

    .domain_timer {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.5em;
        font-style: bold;
}
/* Code for Firefox */
	::-moz-selection { 
		color: orange;
		background: white;
}

	::selection {
		color: white;
		background: #ea8746;
}

/* DESKTOP NAV BAR QUERY */

@media (min-width: 665px) {
    .topnav {
        display: none;
    }
	.content_section_text_mobile {
		display: none;
	}
    .mobile-container {
        display: none;
    }
	.content_section_text a {
		padding-left: 5px;
		padding-right: 5px;
		margin: 8px;
		font-size: 1em;
		text-align: left;
	}
    .about_pictures {
        width: 40%;
        height: auto;
    }

    .os_select {
    	display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;
    }

    .os_select aside {
		grid-column: 1 / span 2;
	}
}

/* MOBILE NAV BAR QUERY */

@media (max-width: 664px) {
    .nav {
        display: none;
    }
	.content_section_text_desktop {
		display: none;
	}
    .content_section {
        font-size: .9em;
    }
	.content_section_text nav {
		padding: 0px 0px 0px 2%;
		font-size: 1em;
		text-align: left;
	}
    .content_section_text a {
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1em;
		text-align: left;
	}
	.article_sites img {
		width: 60%;
	}
    .about_pictures {
        width: 90%;
        height: auto;
    }

    /*Mobile OS_Selector*/

    .os_select {
    	display: grid;
        grid-template-columns: auto;
    }
}

/* OS_Select desktop query*/

@media (min-width: 1555px) {
	.os_select {
    	display: grid;
        grid-template-columns: auto auto auto auto;
    }

    .os_select aside {
		grid-column: 1 / span 4;
	}
}

/* START DESKTOP NAV BAR */

	div.nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		font-weight: bold;
		overflow: hidden;
		background-color: #333;
}

	div.nav li {
		float: left;
		display: inline;
}

	div.nav li a {
		display: block;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 1.1em;
}

	div.nav li a:hover {
		background-color: #4660ac;
		color: white;
		transition: background-color 0.3s;
}

/* END NAV BAR*/

/* START MOBILE NAV BAR */

	.topnav {
		overflow: hidden;
		background-color: #333;
		position: relative;
}

	.topnav #myLinks {
		display: none;
}

	.topnav a {
		color: white;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 1.2em;
		display: block;
}

	.topnav a.icon {
		background: #e98b52;
		color: black;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
}

	.topnav a:hover {
		background-color: #4960a6;
		color: white;
}

	.active {
		background-color: #333333;
		color: blue;
}

/* END MOBILE NAV BAR */