body {
    font-family: 'Roboto', sans-serif;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand img {
    margin-right: 10px;
}

.navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
}

.navbar-brand .brand-text h3 {
    margin: 0;
    /* Remove default margin */
    line-height: 1;
    /* Adjust line height if needed */
}

.slot-machine-container {
    display: inline-block;
    width: 4em;
    /* Fixed width to fit the longest word */
    text-align: center;
}

.slot-machine {
    display: inline-block;
    animation: spin 2s infinite;
    color: #686fff;
    /* Change this to your desired color */
}

@keyframes spin {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    10% {
        transform: translateY(0);
        opacity: 1;
    }

    90% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.row {
    display: flex;
    align-items: stretch;
    /* Make all columns in a row the same height */
}

.firstpage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    text-align: center;
    /* Center text */
    height: 400px;
    /* Set a fixed height for all columns */
}

.img-fluid {
    max-height: 100%;
    /* Ensure images do not exceed the height of their container */
    object-fit: cover;
    /* Ensure images cover the container without distortion */
}

.content {
    margin-top: 150px;
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slot-machine-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    /* Add some margin to ensure spacing */
}

.slot-machine {
    white-space: pre;
}

/* Media query for smaller screens */
@media (max-width: 576px) {
    .d-flex {
        flex-direction: column;
        text-align: center;
    }
}

.selected-slot {
    background-color: #686fff;
    color: white;
    border-radius: 5px;
    padding: 5px;
    
}

/* Change the color of the picked day in the date picker calendar */
.flatpickr-day.selected {
    background-color: #686fff; /* Change to your desired color */
    color: white; /* Change to your desired text color */
}