.banner {
    position: fixed;
    top: 50px;
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: center;
}

.banner-content {
    background-color: oklch(97% 0.014 254.604);
    width: fit-content;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid oklch(88.2% 0.059 254.128);
    position: relative;
    animation: move-down 0.25s linear;
    width: 30%;
    display: none;
}

.banner-title {
    font-weight: bold;
    color: oklch(42.4% 0.199 265.638);
}

.banner-message {
    font-size: 0.875em;
    color: oklch(48.8% 0.243 264.376);
}

.banner-icon {
    color: white;
    background-color: oklch(62.3% 0.214 259.815);
    padding: 5px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-success .banner-content {
    background-color: oklch(98.2% 0.018 155.826);
    border: 1px solid oklch(92.5% 0.084 155.995);
}
.banner-success .banner-title {
    color: oklch(44.8% 0.119 151.328);
}
.banner-success .banner-message {
    color: oklch(52.7% 0.154 150.069);
}
.banner-success .banner-icon {
    background-color: oklch(72.3% 0.219 149.579);
}

.banner-warning .banner-content {
    background-color: oklch(98.7% 0.026 102.212);
    border: 1px solid oklch(94.5% 0.129 101.54);
}
.banner-warning .banner-title {
    color: oklch(47.6% 0.114 61.907);
}
.banner-warning .banner-message {
    color: oklch(55.4% 0.135 66.442);
}
.banner-warning .banner-icon {
    background-color: oklch(79.5% 0.184 86.047);
}

.banner-error .banner-content {
    background-color: oklch(97.1% 0.013 17.38);
    border: 1px solid oklch(88.5% 0.062 18.334);
}
.banner-error .banner-title {
    color: oklch(44.4% 0.177 26.899);
}
.banner-error .banner-message {
    color: oklch(50.5% 0.213 27.518);
}
.banner-error .banner-icon {
    background-color: oklch(63.7% 0.237 25.331);
}

@keyframes move-down {
    from {
        transform: translateY(-10px);
    }
    to {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .banner-content {
        width: 80%;
    }

    .banner .row {
        flex-wrap: nowrap;
    }
}