body {
    background-image: url(../Media/liam_10.jpg);
    background-color: #1a0099;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.hoverr :hover {

    cursor: pointer;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    gap: 1.5rem;
}
.frg {
    position: fixed;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 1;
}
.topbar {
    position: fixed;
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
    border-bottom: 1px solid #72aa00;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #333;
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 3.5rem;
    overflow: hidden;
}

    .topbar .content {
        margin: 0.5rem 1rem;
    }

.dvv {
  left: 0;
   
   
}
button {
    /* OKLCH Color System for accurate colors */
    --hue: 140;
    --sat: 0.6;
    --glow-intensity: 1;

    --fg: oklch(15% calc(var(--sat) * 0.5) var(--hue));
    --bg: oklch(75% var(--sat) var(--hue) / 0.8);
    --bg-dark: oklch(45% var(--sat) var(--hue) / 0.75);
    --bottom-glow: radial-gradient( farthest-corner at bottom center, rgba(255, 255, 255, var(--glow-intensity)), transparent );

    background-color: var(--bg);
    background: var(--bottom-glow), linear-gradient(to bottom, var(--bg-dark), var(--bg));
    border: 1px solid var(--bg);
    border-radius: 9999px;

    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);

    color: var(--fg);
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    text-shadow: 0 2px 0.5em rgba(0, 0, 0, 0.2);

    cursor: pointer;
    position: relative;
    transition: all 300ms ease;
 
    user-select: none;
    -webkit-user-select: none;
}

 
    button::after {
        content: "";
        position: absolute;
        top: 4%;
        left: 0.75em;
        width: calc(100% - 1.5em);
        height: 40%;
        background: linear-gradient( to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) );
        border-radius: inherit;
        transition: background 400ms ease;
        pointer-events: none;
    }

    
    button:hover,
    button:focus {
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
        transform: translateY(-1px);
    }

 
    button:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        transform: translateY(1px);
    }


    button.small {
        padding: 0.5em 1.5em;
        font-size: 0.875rem;
    }

button.medium {
    padding: 0.75em 2em;
    font-size: 1rem;
}

    button.large {
        padding: 1em 3em;
        font-size: 1.125rem;
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }