body {
    font-family: 'Courier New', monospace;
    background-color: #f8f9fa;
    padding-top: 2rem; /* Adds padding to the top of the body */
    padding-bottom: 2rem; /* Adds padding to the bottom of the body */
}
/* Custom font style */
.custom-font {
    font-family: 'Courier New', monospace;
    margin-bottom: 2rem; /* Adjusts gap below the header */
}
header, footer {
    background-color: #fff; /* Adds white background to header and footer */
    padding: 1rem; /* Adds padding around the text in the header */
}
/* Tiles section */
.tiles-section .tile {
    height: 0;
    padding-bottom: 90%; /* Makes the tile slightly smaller */
    border-radius: 0.25rem; /* Bootstrap's default border-radius */
    border: 1px solid #313330; /* Darker border */
    transition: background-color 0.1s; /* Faster transition for background color */
}
.tiles-section .tile-icon {
    max-width: 50%; /* Limits the icon size */
    margin-bottom: 0.5rem; /* Space between the icon and the title */
}
.tiles-section .tile:hover {
    background-color: #aeb4c0; /* Color change on hover */
}
.tiles-section .tile:active {
    background-color: #868a90; /* Color change on click */
}
.tiles-section .card-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tiles-section .card-body {
    width: 100%;
    font-size: 0.9em; /* Smaller font size */
}
footer {
    margin-top: 2rem; /* Adjusts gap above the footer */
}