* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html, body {
    height: 100%;
    overflow: hidden; /* Prevent scrollbars */
    background-color: #111;
}

body {
    border: 1px solid rgb(255, 188, 89); /* Border around the entire website */
    display: flex;
    justify-content: center; /* Center the container horizontally */
    align-items: center; /* Center the container vertically */
    margin: 0; /* Remove default margin */
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 2px); /* Adjust height for the border */
    width: calc(100% - 2px); /* Adjust width for the border */
}

.logo {
    max-width: 300px; /* Image will never exceed 300px width */
    width: 100%; /* Allows it to scale down on smaller screens */
    height: auto; /* Maintains aspect ratio */
}

@media (max-width: 600px) {
    .logo {
        max-width: 200px; /* Further reduce size for smaller screens */
    }
}

@media (max-width: 400px) {
    .logo {
        max-width: 150px; /* Even smaller screens, smaller image */
    }
}