body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white; /* For contrast against the black background */
    font-family: Arial, sans-serif;
	
	background-image: url("images/pxlfall.jpg");
	background-repeat:no-repeat;
	background-position:center;
	top:100px;
	background-position:top;
}


.blue{
	color:white;
	background-color:blue;
	padding:2px 4px 2px 4px;
	font-size: 1.4vw; 
}

	
img {
    max-width: 100%;
    height: auto;
}

.fa-ul {
    /* Customizes the entire list */
	margin-top:12px;
	padding-left:-50px;
	margin-left:-50px;
	float:left;
	width:90%;
	height:9s0%;
	font-size:24px;
	text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Horizontal offset, vertical offset, blur radius, color */

}

.fa-li {
    /* Customizes the list item icons */
	padding-left:5px;
}

.fa-stop {
    color: white; /* Set the color of the square bullets */
    /* Add more styling rules here if necessary */
}

a.pxllabs-link {
        text-decoration: none; /* Removes underline from links */
        color: inherit; /* Keeps the text color consistent with the surrounding text */
    }
a.pxllabs-link img {
	vertical-align: bottom; /* Aligns image with text */
}
	
nav {
    height: 60px;
    background-color: #0c0c0c; /* Dark grey */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.main {
    min-height: 314px;
	height:auto;
	margin-bottom:-5px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px; /* To ensure it's not hidden behind the fixed navbar */
}

.container {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    box-sizing: border-box;
    justify-content: center;
    gap: 10px; /* Adjust gap between boxes */
}

.box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: calc(20% - 10px); /* Adjust based on gap */
    max-width: calc(20% - 10px);
}

.bottom, .bottom2, .bottom3, .bottom4, .bottom5 {
    flex: 1;
    aspect-ratio: 1;
    display: flex;
    align-items: left;
    justify-content: left;
    background-size: cover; /* Ensure background images cover the div */
    background-position: center; /* Center the background images */
    width: 100%;
}

.top, .toplogo, .bottomlogo, .top2, .top3, .top4, .top5 {
    flex: 1;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Ensure background images cover the div */
    background-position: center; /* Center the background images */
    width: 100%;
}

.top {
    background-color: #0013ff;
    margin-bottom:10px;
	text-align:center;
	font-size:24px;
}
.top2 {
    background-color: #07ff00;
    margin-bottom:10px;
	text-align:center;
	font-size:24px;
}
.top3 {
    background-color: #ffff00;
    margin-bottom:10px;
	text-align:center;
	font-size:24px;
    text-shadow: 2px 4px 8px #ccc;

}
.top4 {
    background-color: #ff9d00;
    margin-bottom:10px;
	text-align:center;
	font-size:24px;
}
.top5 {
    background-color: #ff0000;
    margin-bottom:10px;
	text-align:center;
	font-size:24px;
}

.top h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.top2 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.top3 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.top4 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.top5 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}

h1 {
    font-size: 2.4vw; /* Adjust the size as needed */
}

.fa-ul li {
    font-size: 1.24vw; /* Adjust the size as needed */
	padding-left:5px;
}

.bottom {
	background-image: url("images/06.jpg");
	text-align:left;
}

.bottom2 {
	background-image: url("images/07.jpg");
	text-align:left;
}
.bottom3 {
    background-color: #d300d3;
	text-align:left;
}
.bottom4 {
	background-image: url("images/09.jpg");
	text-align:left;
}
.bottom5 {
	background-image: url("images/10.jpg");
	text-align:left;
}


.bottom h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.bottom2 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.bottom3 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.bottom4 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}
.bottom5 h1 {
    font-size: 2.4vw; /* Adjusts size based on the width of the viewport */
}


img {
    max-width: 100%;
    height: auto;
}

.toplogo {
	background-image: url("images/pxllabslogo.svg");
    margin-top:60px;
	color:black;
	font-size:16px;
	font-weight:bold;
}
.toplogo p {
    font-size: 0.8vw; /* Adjusts size based on the width of the viewport */
}

.nostyles {
    text-decoration: none; /* Removes underline from the link */
    color: inherit; /* Optional: Ensures the link color matches the surrounding text or specifies a color */
}


.bottomlogo {
	min-height:220px;
	width:100%;
}

.pxlsquare{
	padding-top:0px;
	padding-left:0px;
	width:0.8vw;
	height:0.8vw;    
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* Horizontal offset, vertical offset, blur radius, color */

	
}

@media (max-width: 920px) {
	
body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white; /* For contrast against the black background */
    font-family: Arial, sans-serif;
	background-image: url("images/pxlfall.jpg");
	background-repeat:no-repeat;
	background-position:center;
	top:150px;
	background-position:top;
}

.bottomlogo {
	min-height:50px;
	max-height:250px;
	width:100%;
}

    .container {
        flex-direction: column;
    }
    .box {
        width: 100%;
        max-width: 100%;
    }
	

.pxlsquare{
	padding-top:0px;
	padding-left:0px;
	width:3.2vw;
	height:3.2vw;
}

.toplogo p {
    font-size: 3.8vw; /* Adjusts size based on the width of the viewport */
}

.top h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}
.top2 h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}
.top3 h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}
.top4 h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}
.top5 h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}


.bottom h1 {
    font-size: 62vw; /* Adjusts size based on the width of the viewport */
}
.bottom2 h1 {
    font-size: 62vw; /* Adjusts size based on the width of the viewport */
}
.bottom3 h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}
.bottom4 h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}
.bottom5 h1 {
    font-size: 12vw; /* Adjusts size based on the width of the viewport */
}


.fa-ul li {
    font-size: 4.2vw; /* Adjust the size as needed */
}


.blue{
		color:white;
		background-color:blue;
		padding:2px 4px 2px 4px;
		font-size: 4.8vw; 
	}
	

}


@media (max-width: 480px) {
	
.fa-ul li {
    font-size: 6.2vw; /* Adjust the size as needed */
}


}

.wppage {
	float:center;
	width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align:center;
}
.wppage1 {
	width:100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
	text-align:center;
	background-color:green;
}
.wppage2 {
	width:100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
	text-align:center;
	background-color:green;
}
.wppage3 {
	width:100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
	text-align:center;
	background-color:green;
}


.footer {
	width:100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
	text-align:center;
	background-color:black;
}