@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 
body {
    font-family: 'Roboto', sans-serif;
    background-color: rgb(253, 200, 102);
    color: #333;
}

nav {
    background-color: rgba(255, 236, 200, 0.9); /* Slight transparency */
}

h1, h2 {
    color: orangered;
    font-size: x-large;
}

#logo {
    height: 60px;
}

.nav-link {
    color: #000; /* Adjust navbar link color */
}

.nav-link.active {
    font-weight: bold;
}

.navbar-toggler-icon {
    filter: invert(1);
}

.alert-container {
    top: 20px; /* Distance from the top of the viewport */
    max-width: 600px; /* Maximum width for the alert container */
    width: 100%; /* Ensures the container is centered */
    z-index: 1050;
    transform: translateX(-50%);
}

.alert {
    margin-bottom: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

input#title {
    background-color: rgba(255, 236, 200, 0.9);
    border-color: rgba(87, 67, 31, 0.9);
}