@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700&display=swap');

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', Arial, sans-serif; /* Use Rubik as the primary font */
}

/* Body Styles */
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('../images/topBackground.City.png'); /* Replace with your background path */
    image-rendering: pixelated;         /* Ensure sharp pixels for pixel art */
    image-rendering: crisp-edges;       /* Fallback for older browsers */
    image-rendering: -moz-crisp-edges;  /* For Firefox */
    image-rendering: -webkit-optimize-contrast; /* For WebKit-based browsers */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFECD6;
    position: relative;
}

/* Header Styles */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 0.5rem 2rem;
    width: 100%;
    font-size: 1rem;
    background: linear-gradient(
        to bottom,
        rgba(116, 94, 175, 0.4), /* #745EAF at 40% opacity */
        rgba(48, 39, 73, 0.4)   /* #302749 at 40% opacity */
    );
    backdrop-filter: blur(4px); /* Apply 4px background blur */
    z-index: 10;
}

/* Time Container */
.time-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between the time and battery icon */
}

/* Price and Time Styles */
.price, .time {
    font-weight: bold;
    color: #FFECD6;
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}

/* Battery Icon */
.battery-icon svg {
    top: 100%;
    width: 125%;
    height: auto;
    fill: #FFECD6; /* Match the color of the text */
}

/* Centering the Content */
.content {
    height: 100vh;               /* Make the container full viewport height */
    display: flex;               /* Enable Flexbox */
    justify-content: center;     /* Center horizontally */
    align-items: center;         /* Center vertically */
}

/* Logo Styles with Pixel Art Upscaling */
.logo {
    width: 400px;
    max-width: 80%;
    height: auto;
    image-rendering: pixelated;         /* Ensure sharp pixels for pixel art */
    image-rendering: crisp-edges;       /* Fallback for older browsers */
    image-rendering: -moz-crisp-edges;  /* For Firefox */
    image-rendering: -webkit-optimize-contrast; /* For WebKit-based browsers */
    filter: drop-shadow(0px 2px 5px rgba(34, 17, 58, 0.5)); /* Blur the shadow for a softer look */
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .header{

        padding: 0.4rem 2rem 0.2rem 2rem;
    }

    .logo {
        width: 300px; /* Reduce logo size for smaller screens */
    }
}

@media (max-width: 400px) {
    .logo {
        width: 200px;
    }
}