@import url('./main-layout.css');
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,600;1,600&display=swap');

html {
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 3rem;
    --lumo-font-size-xxl: 2.25rem;
    --lumo-font-size-xl: 1.75rem;
    --lumo-font-size-l: 1.375rem;
    --lumo-font-size-m: 1.125rem;
    --lumo-font-size-s: 1rem;
    --lumo-font-size-xs: 0.875rem;
    --lumo-font-size-xxs: 0.8125rem;
    --lumo-line-height-m: 1.4;
    --lumo-line-height-s: 1.2;
    --lumo-line-height-xs: 1.1;
    --lumo-border-radius-s: 1px;
    --lumo-border-radius-m: 2px;
    --lumo-border-radius-l: 4px;
    --lumo-font-family: Saira;

}

[theme~="dark"] {
    --lumo-base-color: rgb(27, 29, 29);
    --lumo-primary-color: rgb(0, 255, 0);
    --lumo-primary-color-50pct: rgba(0, 255, 0, 0.5);
    --lumo-primary-color-10pct: rgba(0, 255, 0, 0.1);
    --lumo-body-text-color: hsla(214, 0%, 99%, 0.9);
    --lumo-primary-text-color: hsl(214, 0%, 98%);
    --lumo-shade: hsl(214, 100%, 98%);
    --lumo-shade-5pct: hsla(214, 100%, 98%, 0.05);
    --lumo-shade-10pct: hsla(214, 100%, 98%, 0.1);
    --lumo-shade-20pct: hsla(214, 100%, 98%, 0.2);
    --lumo-shade-30pct: hsla(214, 100%, 98%, 0.3);
    --lumo-shade-40pct: hsla(214, 100%, 98%, 0.4);
    --lumo-shade-50pct: hsla(214, 100%, 98%, 0.5);
    --lumo-shade-60pct: hsla(214, 100%, 98%, 0.6);
    --lumo-shade-70pct: hsla(214, 100%, 98%, 0.7);
    --lumo-shade-80pct: hsla(214, 100%, 98%, 0.8);
    --lumo-shade-90pct: hsla(214, 100%, 98%, 0.9);

}

.account-container {
    position: relative;
    text-align: center;
    height: 150px;
    width: 150px;
}

.acc-image-pos {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
}

.acc-image-rank {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
}

vaadin-login-overlay-wrapper::part(description) {
    color: black !important;
}