html {
    height: 100vh;

}

main {
    height: 0px;
}


#home-button {
  background-color: #f65454;
}
#home-button a span {
  color: #000000;
}


.header {
    height: 100vh;
    margin: 0px;
    padding: 0px;
    background-color: black;
}

.background-image-container {
    position: absolute;
    z-index: 1;
    overflow: hidden;

    opacity: 0; /* Initially hidden */
    transition: opacity 10s ease-in-out; /* Smooth transition for opacity */
}

.background-image-container.visible {
    opacity: 1; /* Make the item visible */
}

.background-image-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;

    user-select: none;
    -drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

.map-container {
    top: 0px;
    right: 0px;
    width: calc(max(40%, 400px));
}

.car-container {
    bottom: 0px;
    left: 0px;
    height: calc(min(35%, 400px));
}

.max-container {
    top: 0px;
    left: 0px;
    height: calc(min(60%, 800px));
}

.map-gradient {
    height: 100%;
    width: 100%;
    background-image: radial-gradient(closest-side at 50% 50%, rgba(0, 0, 0, 0.088),rgba(0, 0, 0, 0.151),rgba(0, 0, 0, 0.3));
    position: absolute;
    top: 0;
    left: 0;
}

.car-gradient {
    height: 100%;
    width: 100%;
    background-image: radial-gradient(closest-side at 50% 50%, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.099),rgba(0, 0, 0, 0.362));
    position: absolute;
    top: 0;
    left: 0;
}

.max-gradient {
    height: 100%;
    width: 100%;
    background-image: radial-gradient(closest-side at 55% 60%, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.566),rgb(0, 0, 0));
    position: absolute;
    top: 0;
    left: 0;
}