@font-face {
    font-family: 'Solpera';
    src: url('../fonts/SolperaBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

body {
    font-size: 1.15em;
    font-weight: 400;
    font-family: "Nunito Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

h2, h3, h4 {
    margin-bottom: 0;
    letter-spacing: 0.015em;
    font-family: 'Solpera', sans-serif;
    color: #0e6739;
}

a {
    text-decoration: none;
    color: inherit;
}

.flash {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: sans-serif;
}

/* Success message */
.flash.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Error message */
.flash.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Warning message */
.flash.warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* Info message */
.flash.info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.notification-bubble {
    white-space: nowrap;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    background-color: #f8f9fa;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-size: 0.875rem;
    z-index: 100;
}

/* Add a small arrow pointing to the button */
.notification-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #dee2e6 transparent transparent transparent;
}

.copy-feedback {
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
    opacity: 0;
    pointer-events: none; /* This prevents click events when invisible */
    visibility: hidden; /* Hide completely when not visible */
}

.fade-in {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
}

.fade-out {
    opacity: 0 !important;
    /* Visibility will be handled by the delayed transition */
}

.container-xxl {
    min-width: 80vw;
}