
:root {
    --glass-border-padding: 5px;
    --block-border-radius: 20px;
    --block-border-weight: 1px;
}

/*
.header-a {
    position: fixed;
    z-index: 99;
    top: 300px;
    left: 200px;
    padding: 5px 10px;
    border-radius: var(--block-border-radius);
    //border: solid var(--block-border-weight) #000;
    transition: 0.2s;
}*/


.blur-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.blur-layer::before {
    content: "";
    inset: 0;
    position: absolute;
    border-radius: calc(var(--block-border-radius) - var(--block-border-weight));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    /*padding: 6px; /* Толщина рамки */
    /*box-sizing: border-box;*/
}


.blur-layer-1::before {
  padding: var(--glass-border-padding);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: -5;
}


.blur-layer-2::before {
    padding: calc(var(--glass-border-padding) * 2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -4;
}

.blur-layer-3::before {
   padding: calc(var(--glass-border-padding) * 3);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  z-index: -3;
}

.blur-layer-3 {
    backdrop-filter: blur(1px) contrast(140%);
    -webkit-backdrop-filter: blur(1px) contrast(140%);
    border-radius: var(--block-border-radius);
    z-index: -2;
}

