@font-face {
  font-display: swap;
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('ftn/pt-sans-v18-cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'),
       url('ftn/pt-sans-v18-cyrillic_cyrillic-ext_latin-regular.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('ftn/pt-sans-narrow-v19-cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'),
       url('ftn/pt-sans-narrow-v19-cyrillic_cyrillic-ext_latin-regular.ttf') format('truetype');
}

body {
  background-color: #f0f0f0;
  color: #0a0a0a;
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

@media (max-width: 576px) {
  body {
    font-size: 14px;
  }
}

a {
  color: #ff685b;
}

a:visited {
  color: #0097a4;
}

del {
  color: #888888;
}

*::selection {
  background-color: #ff685b;
  color: white;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.layout {
  background-color: #ffffff;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
  min-width: 240px;
  min-height: 100vh;
  line-height: 1.25;
}

.header .character {
  user-select: none;
  width: 240px;
}

/* #region Webring */
.webring {
  width: 100%;
}

.webring a {
  color: #0a0a0a;
  text-decoration: none;
  font-size: 11px;
}

@media (max-width: 576px) {
  .webring a {
    font-size: 9px;
  }
}

.webring a:hover {
  font-weight: 600;
}
/* #endregion */

.divider {
  margin: 0px 9px;
}

.section {
  padding: 6px 9px;
}

.heading {
  font-family: 'PT Sans Narrow', sans-serif;
  color: #ff685b;
  padding: 6px 0px;
  margin: 0;
}

.text {
  text-align: justify;
  font-size: 14px;
  padding: 6px 0px;
  margin: 0;
}

@media (max-width: 576px) {
  .text {
    font-size: 11px;
  }
}

.contacts {
  border-collapse: collapse;
  margin: 6px 0px;
}

.contacts .title,
.contacts .contact {
  border: 1px solid;
  text-align: left;
  font-size: 14px;
  padding: 6px;
}

@media (max-width: 576px) {
  .contacts .title,
  .contacts .contact {
    font-size: 11px;
  }
}


/* #region Buttons */
.buttons {
  list-style-type: none;
  padding: 0px;
  margin: 6px 0px;
  text-align: center;
}

.button, .button img {
  width: 88px;
  height: 31px;
  border: 0;
}

.button {
  display: inline-block;
}
/* #endregion */

/* #region Images */
.irl {
  width: 112px;
  float: right;
  margin: 6px;
  border: 0;
}

.qr {
  width: 56px;
  height: 56px;
  float: right;
  margin: 6px;
}

.qr:hover {
  width: 112px;
  height: 112px;
  cursor: none;
}
/* #endregion */

.footer {
  text-align: center;
  font-size: 11px;
  margin: 9px;
}

@media (max-width: 576px) {
  .footer {
    font-size: 9px;
  }
}

div svg {
  width: 0;
  height: 0;
  position: absolute;
  top: 0px;
  left: 0;
}