/*###ФОН САЙТА###*/ 

html { background: #AFC7FC; }
html, body { margin: 0; height: 100%; }

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}

/* ###ОКОШКИ###*/

.folder {
  --fill: #4782EC;
  --b: 6px;        /* толщина обводки */
  --r: 10px;       /* скругление */
  --blur: 1px;   /* размытие обводки */

  position: relative;
  max-width: 440px;
  margin: 0 auto 40px;
  color: #fff;
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

/* ---------- общее для выступа и блока ---------- */
.folder .tab,
.folder .body {
  position: relative;
  isolation: isolate;
  background: var(--fill);            /* слой 1: заливка без блюра */
}

/* слой 2: размытая заливка + градиентная обводка */
.folder .tab::before,
.folder .body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--b) solid transparent;
  border-radius: inherit;
  filter: blur(var(--blur));
}

/* ---------- выступ ---------- */
.folder .tab {
  z-index: 1;
  display: table;
  margin-bottom: calc(var(--b) * -1);  /* заходит на блок */
  padding: calc(10px + var(--b)) calc(26px + var(--b)) 12px;
  font-weight: bold;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(20, 50, 120, .5);
  border-radius: var(--r) var(--r) 0 0;
  overflow: visible;                   /* чтобы заплатка могла выйти вниз */
}

.folder .tab::before {
  border-bottom: 0;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(to bottom,
      rgba(255, 255, 255, .79),
      rgba(103, 157, 245, .32)) border-box;
  /* обрезаем блюр по форме выступа (вместо overflow: hidden) */
  clip-path: inset(0 round var(--r) var(--r) 0 0);
}

/* заплатка: закрывает размытую полосу блока под выступом */
.folder .tab::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--b);
  right: var(--b);
  top: calc(100% - 8px);
  height: calc(var(--b) + 15px);
  background: var(--fill);
}

/* ---------- основной блок ---------- */
.folder .body {
  overflow: hidden;                    /* блюр не выходит за края */
  padding: calc(16px + var(--b)) calc(20px + var(--b)) calc(20px + var(--b));
  line-height: 1.55;
  text-shadow: 0 1px 2px rgba(20, 50, 120, .4);
  border-radius: 0 var(--r) var(--r) var(--r);
}

.folder .body::before {
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(to bottom,
      rgba(103, 157, 245, .32) 0%,
      rgba(109, 161, 250, .32) 55%,
      #74A6FF 100%) border-box;
}

.folder .body p { margin: 0 0 .6em; }
.folder .body p:last-child { margin-bottom: 0; }