@import url(style_cs.1768022806.css);

@font-face {
    font-family: 'Nunito';
    src: local("Nunito"), url(/files/000e/3b/4c/90120.ttf);
    font-style: normal;
}

@font-face {
    font-family: 'Bellota Text';
    src: local("Bellota Text"), url(/files/000e/3b/4c/14042.ttf);
    font-style: normal;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    src: local("Material Symbols Outlined"), url(https://forumstatic.ru/files/001b/d6/ea/60419.ttf);
    font-style: normal;
}

:root {
  --forum-max-width: 900px;
  --main-bg-color: oklch(0.95 0.02 233.85);
  --main-text-color: oklch(0.41 0.0159 266.53);
  --main-bg-img: url(/files/000e/3b/4c/61449.png);
  --main-border-color: oklch(0.84 0.0672 230.16);
  
  --amc-link-color: oklch(0.78 0.0525 272.95);
  --head-gray-color: oklch(0.41 0.0159 266.53 / 25%);
  --link-color: oklch(0.57 0.1139 278);
  
  --forum-bg-color: oklch(0.89 0.0203 233.88);
  /*--forum-bg0-color: rgba(159, 214, 240, 0.5);*/
  /*--forum-bg0-color: rgba(181, 223, 245, 1);*/
  --forum-bg0-color: oklch(0.93 0.0351 229.3);
  --forum-border-color: oklch(0.85 0.068 229.71);
  --forum-icon-border-color: oklch(0.73 0.0886 207.69);
  
  --nav-font-size: 1.7rem;
  --nav-icon-size: 2em;
  --nav-bg-color: rgba(200,195,195, 1); /* #c8c3c3 */
  --nav-border-color: rgba(200,195,195, 1); /* #c8c3c3 */
  --nav-link-color: rgba(129,138,147, 1); /* #818a93 */
}

.clip {
    -webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

* {
    margin: 0;
    padding: 0;
}

html {
    margin: 0;
    padding: 0;
    font-family: 'Nunito';
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    overflow-x: hidden;
}
html::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1000;
    width: 750px;
    height: 750px;
    background: var(--main-bg-img) right top no-repeat;
    background-color: var(--main-bg-color);
    background-blend-mode: darken;
    opacity: 0.2;
    top: -1rem;
    right: 0;
    transform: translateX(5rem);
}
html::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1000;
    width: 750px;
    height: 750px;
    background: var(--main-bg-img) left top no-repeat;
    background-color: var(--main-bg-color);
    background-blend-mode: darken;
    opacity: 0.2;
    top: 0;
    left: 3rem;
    transform: rotate(270deg);
}

/* Общий стиль всех ссылок */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--main-text-color);
}

/* Подсказки при наведении */
#tooltip {
    position: absolute;
    background: var(--forum-bg-color);
    z-index: 999;
    max-width: 200px;
    min-width: 100px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 0px 1px rgba(0,0,0,.05) inset;
    font-size: 12px;
    display: none;
    color: var(--link-color);
    text-align: center;
    padding: 0.5em 1em;
    font-weight: 400;
}

/* HEADER */
#html-header {
    height: 250px;
    /*border: 1px solid;*/
}

/* Админы */
AMC {
    display: block;
    text-align: right;
    font: 20px 'Bellota Text';
    margin: 0.5em 0 0;
    padding-right: 5em;
    margin-left: 0.3em;
}

AMC a {
    color: var(--amc-link-color);
}

AMC a:not(:last-child):after {
    content: '\002662';
    color: var(--head-gray-color);
    margin-left: 0.3em;
    cursor: default;
}

/* Лого */
#pun-title {display: none;}
LOGO {
    display: block;
    padding-left: 5em;
    font: 1.5em 'Advent Pro';
    text-transform: uppercase;
    background: linear-gradient(#676EB8 10%, #5DB8C5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

FastLinks {
    display: block;
    column-count: 2;
    width: 160px;
    position: relative;
    left: 10em;
    top: 1em;
    z-index: 2;
}

FastLinks a {
    color: var(--head-gray-color);
    display: inline-block;
    width: 80px;
    border: 1px solid var(--head-gray-color);
    padding: 0.05em;
    margin: 0.15em 0;
    text-align: center;
    font: 1em Bellota Text;
    text-transform: uppercase;
    background-color: var(--main-bg-color);
}
FastLinks a:hover {
    color: var(--link-color);
    border: 1px solid var(--link-color);
}

/* Арисато */
.arisato-bg {
    width: 200px;
    height: 200px;
    background: no-repeat 70% 10% url(/files/000e/3b/4c/95095.jpg?v=1), var(--main-bg-color);
    background-blend-mode: luminosity;
    background-size: 130%;
    display: block;
    position: relative;
    top: -14em;
    left: 70.5%;
    opacity: 0.7;
    z-index: -1;
}

/* Лучший пост */
#BestMsg {
    display: inline-block;
    width: 290px;
    font-size: 0.75em;
    text-indent: 2em;
    text-align: justify;
    position: relative;
    top: -5em;
    left: 29em;
    quotes:'\201C' '\201D';
    z-index: 2;
}

#BestMsg:before {
  content: open-quote;
  font-size: 5em;
  position: absolute;
  z-index: -1000;
  top: -0.3em;
  left: -0.8em;
}
#BestMsg:after  {
  content: close-quote;
  font-size: 5em;
  position: absolute;
  z-index: -1000;
  bottom: -1em;
  right: 0;
}

/* Юзер-инфо */
#userInfo {
    /*border: 1px solid red;*/
    position: relative;
    top: -20em;
    display: flex;
    gap: 0 5em;
    align-items: self-end;
}
.userInfo_border {
    background: var(--main-border-color);
    width: 102px;
    height: 102px;
    position: relative;
    left: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.userInfo_userpic {
    width: 100px;
    height: 100px;
    position: relative;
}
.userInfo_userpic a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.userInfo_greetings {
    text-indent: 1em;
    font-size: 12px;
}


/* Первый контейнер сайта (кроме админки) */
#pun_wrap {position: relative;}

/* Второй контейнер сайта (первый для админки) */
#pun {
    position: relative;
    max-width: var(--forum-max-width);
    margin: 0 auto;
}


/* --------- Стили в админке --------- */
#pun-admain {
    font: normal 68.75% verdana, arial, helvetica, sans-serif;
    background: var(--forum-bg-color);
}
#adnav-standard li {
    list-style-type: none;
}