:root {
  --hen_bifam: #f3f5fb;
  --hax_frout: #ffffff;
  --loprux: #2342d4;
  --tro-movain: #17265c;
  --fis: #283151;
  --cama-troke: #6e7796;
  --zolaim: #dadfef;
  --von: #2ca987;
  --di: #edf0ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--hen_bifam);
  color: var(--fis);
  font-family: Inter,Arial,sans-serif;
}

.las__drur {
  background: var(--hax_frout);
  border-bottom: 1px solid var(--zolaim);
  box-shadow: 0 2px 10px rgba(23,38,92,.06);
}

.rounin__brem {
  max-width: 1190px;
  min-height: 72px;
  margin: auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 2.5rem;
  align-items: center;
}

.claiden {
  display: flex;
  gap: .8rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.claiden span {
  display: grid;
}

.claiden strong {
  color: var(--tro-movain);
  font-size: 1.05rem;
  white-space: nowrap;
}

.claiden small {
  max-width: 320px;
  color: var(--cama-troke);
  font-size: .7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.las__drur nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: stretch;
}

.las__drur nav a {
  display: grid;
  place-items: center;
  padding: 0 1rem;
  color: var(--cama-troke);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  border-bottom: 3px solid transparent;
}

.las__drur nav a:hover {
  color: var(--loprux);
  border-bottom-color: var(--loprux);
}

.raclout {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
}

.raclout span,.codai,.fucla__ciprum,.bralet {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--loprux);
  color: #ffffff;
  font-weight: 800;
}

.raclout span {
  width: 32px;
  height: 32px;
}

.skail {
  max-width: 1190px;
  margin: auto;
  padding: 2.4rem 1.25rem 5rem;
}

.bai {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}

.bai p {
  color: var(--loprux);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .7rem;
  font-weight: 800;
}

.bai h1 {
  color: var(--tro-movain);
  font-size: clamp(2.3rem,5vw,4.4rem);
  letter-spacing: -.045em;
  margin: .25rem 0;
}

.stouvot__ha {
  display: flex;
  background: var(--hax_frout);
  border: 1px solid var(--zolaim);
  border-radius: 10px;
  overflow: hidden;
}

.stouvot__ha span {
  min-width: 95px;
  padding: .8rem 1rem;
  display: grid;
  text-align: center;
  color: var(--cama-troke);
  font-size: .65rem;
  border-right: 1px solid var(--zolaim);
}

.stouvot__ha span:last-child {
  border: 0;
}

.stouvot__ha b {
  color: var(--tro-movain);
  font-size: 1.05rem;
}

.kegli__sam {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1rem;
  background: var(--tro-movain);
  color: #ffffff;
  border-radius: 9px 9px 0 0;
}

.kegli__sam>div {
  display: flex;
  gap: .6rem;
}

.kegli__sam small {
  opacity: .7;
}

.safoux {
  background: var(--hax_frout);
  border: 1px solid var(--zolaim);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}

.ren {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 70px 34px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--zolaim);
}

.ren:last-child {
  border-bottom: 0;
}

.ren:hover {
  background: #ffffff;
}

.codai,.fucla__ciprum {
  width: 42px;
  height: 42px;
}

.netroum {
  display: flex;
  gap: .4rem;
}

.netroum span,.glel__de footer span,.skem__di header footer span {
  padding: .18rem .45rem;
  border-radius: 4px;
  background: var(--di);
  color: var(--loprux);
  font-size: .62rem;
  font-weight: 700;
}

.vaim h2 {
  font-size: 1rem;
  margin: .25rem 0;
}

.vaim h2 a {
  color: var(--tro-movain);
  text-decoration: none;
}

.vaim>p {
  color: var(--cama-troke);
  font-size: .8rem;
  margin: .25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vaim>small {
  color: var(--cama-troke);
  font-size: .68rem;
}

.paix {
  display: grid;
  text-align: center;
  color: var(--cama-troke);
  font-size: .65rem;
}

.paix b {
  color: var(--tro-movain);
  font-size: 1rem;
}

.cibra {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hen_bifam);
  color: var(--loprux);
  text-decoration: none;
}

.bro {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .7rem 1rem;
  border-radius: 6px;
  background: var(--loprux);
  color: #ffffff;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
}

.gle__no>header {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.gle__no h1 {
  color: var(--tro-movain);
  font-size: 3.5rem;
  margin: .2rem 0;
}

.gle__no header p {
  color: var(--loprux);
  font-size: .7rem;
  font-weight: 800;
}

.gle__no>header>span {
  padding: .55rem 1rem;
  border-radius: 99px;
  background: var(--loprux);
  color: #ffffff;
  font-weight: 800;
}

.gal__placot {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding: .9rem 1rem;
  background: var(--tro-movain);
  color: #ffffff;
  border-radius: 8px 8px 0 0;
}

.gal__placot small {
  opacity: .7;
}

.glel__de {
  background: var(--hax_frout);
  border: 1px solid var(--zolaim);
  border-radius: 0 0 8px 8px;
}

.glel__de article {
  display: grid;
  grid-template-columns: 48px 1fr 120px;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--zolaim);
}

.glel__de h2 {
  font-size: 1rem;
  margin: .1rem 0;
}

.glel__de h2 a {
  color: var(--tro-movain);
  text-decoration: none;
}

.glel__de p {
  color: var(--cama-troke);
  font-size: .78rem;
  margin: .3rem 0;
}

.glel__de footer {
  display: flex;
  gap: .4rem;
}

.glel__de aside {
  display: grid;
  justify-items: end;
  color: var(--cama-troke);
  font-size: .68rem;
}

.glel__de aside b {
  color: var(--loprux);
  font-size: 1.15rem;
}

.skem__di>nav {
  display: flex;
  gap: .6rem;
  align-items: center;
  color: var(--cama-troke);
  font-size: .75rem;
  margin-bottom: 1.5rem;
}

.skem__di>nav a {
  color: var(--loprux);
}

.skem__di>nav b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skem__di>header {
  padding: 1.5rem 1.8rem;
  background: var(--tro-movain);
  color: #ffffff;
  border-radius: 9px 9px 0 0;
}

.skem__di>header p {
  opacity: .7;
  font-size: .72rem;
}

.skem__di h1 {
  font-size: clamp(2rem,5vw,4rem);
  margin: .5rem 0;
}

.skem__di header footer {
  display: flex;
  gap: .4rem;
}

.car {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: var(--hax_frout);
  border: 1px solid var(--zolaim);
  border-top: 0;
  border-radius: 0 0 9px 9px;
}

.car>aside {
  padding: 2rem 1rem;
  text-align: center;
  background: #fbfcfe;
  border-right: 1px solid var(--zolaim);
}

.bralet {
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  font-size: 1.7rem;
}

.car>aside strong,.car>aside small {
  display: block;
}

.car>aside strong {
  color: var(--tro-movain);
}

.car>aside small {
  color: var(--cama-troke);
  font-size: .68rem;
  margin-top: .3rem;
}

.bem {
  padding: 2rem;
  font: 1.02rem/1.7 Georgia,serif;
}

.rom__na {
  padding: 1rem;
  background: var(--hen_bifam);
  border-left: 3px solid var(--loprux);
  font-family: Arial,sans-serif;
  color: var(--cama-troke);
}

.bem h2 {
  color: var(--tro-movain);
  font-family: Arial,sans-serif;
}

.bem a {
  color: var(--loprux);
}

.tobi__litra {
  position: relative;
  max-width: 800px;
  margin: auto;
  background: var(--hax_frout);
  border: 1px solid var(--zolaim);
  border-radius: 10px;
  overflow: hidden;
}

.tobi__litra>header {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: 2rem;
  background: var(--tro-movain);
  color: #ffffff;
}

.tobi__litra h1 {
  font-size: 2.5rem;
  margin: .2rem 0;
}

.tobi__litra header p,.tobi__litra header span {
  font-size: .72rem;
  opacity: .75;
}

.tobi__litra>section {
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.tobi__litra>aside {
  position: absolute;
  right: 2rem;
  bottom: 1.5rem;
  display: grid;
  text-align: center;
  color: var(--cama-troke);
  font-size: .65rem;
}

.tobi__litra>aside b {
  color: var(--loprux);
  font-size: 1.5rem;
}

.reskon {
  max-width: 600px;
  margin: 10vh auto;
  text-align: center;
  padding: 4rem;
  background: var(--hax_frout);
  border: 1px solid var(--zolaim);
  border-radius: 12px;
}

.reskon>div {
  font-size: 6rem;
  color: var(--zolaim);
  font-weight: 800;
}

.reskon h1 {
  color: var(--tro-movain);
}

.reskon a {
  display: inline-block;
  padding: .7rem 1rem;
  background: var(--loprux);
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
}

.zosai__rabis {
  max-width: 1190px;
  margin: auto;
  padding: 2rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 2rem;
  color: var(--cama-troke);
  font-size: .72rem;
}

.zosai__rabis strong {
  color: var(--tro-movain);
}

.zosai__rabis a {
  color: var(--loprux);
}

@media(max-width:760px) {
  .rounin__brem {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1rem;
  }

  .claiden small,.raclout {
    display: none;
  }

  .las__drur nav {
    grid-column: 1/-1;
  }

  .las__drur nav a {
    padding: .5rem 1rem;
  }

  .skail {
    padding: 1.5rem .7rem 4rem;
  }

  .bai {
    display: block;
  }

  .stouvot__ha {
    margin-top: 1rem;
  }

  .kegli__sam small {
    display: none;
  }

  .ren {
    grid-template-columns: 42px 1fr 28px;
  }

  .paix {
    display: none;
  }

  .glel__de article {
    grid-template-columns: 42px 1fr;
  }

  .glel__de aside {
    display: none;
  }

  .car {
    grid-template-columns: 1fr;
  }

  .car>aside {
    display: flex;
    gap: .8rem;
    align-items: center;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--zolaim);
  }

  .bralet {
    width: 42px;
    height: 42px;
    margin: 0;
  }

  .zosai__rabis {
    grid-template-columns: 1fr;
  }

}

.claiden,.claiden span,.raclout,.bai>*,.vaim,.glel__de article>div:nth-child(2),.skem__di>nav b,.skem__di>header>div,.bem,.zosai__rabis>* {
  min-width: 0;
}

.claiden strong,.claiden small,.raclout b,.bai h1,.stouvot__ha span,.kegli__sam small,.vaim h2,.vaim>small,.gle__no h1,.glel__de h2,.glel__de p,.glel__de aside small,.skem__di h1,.car>aside strong,.car>aside small,.bem,.reskon h1,.reskon p,.zosai__rabis {
  overflow-wrap: anywhere;
}

.netroum,.glel__de footer,.skem__di header footer {
  flex-wrap: wrap;
}

.rodi,.brotut {
  padding: 2.5rem 1.2rem;
  text-align: center;
  color: var(--cama-troke);
}

.rodi b,.brotut b {
  display: block;
  color: var(--loprux);
  font-size: 2rem;
}

.rodi span {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.rodi p,.brotut p {
  max-width: 560px;
  margin: .7rem auto 0;
  line-height: 1.5;
}

.bem pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
  background: var(--hen_bifam);
  font-size: .82rem;
}

.bem table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.bem img,.bem video,.bem iframe {
  max-width: 100%;
  height: auto;
}

@media(max-width:1080px) and (min-width:761px) {
  .rounin__brem {
    gap: 1rem;
  }

  .las__drur nav a {
    padding-inline: .65rem;
  }

  .raclout {
    max-width: 170px;
  }

  .bai {
    display: block;
  }

  .stouvot__ha {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-top: 1rem;
  }

  .stouvot__ha span {
    min-width: 0;
  }

}

@media(max-width:760px) {
  .rounin__brem {
    grid-template-columns: minmax(0,1fr);
  }

  .las__drur nav {
    grid-column: 1;
    flex-wrap: wrap;
  }

  .las__drur nav a {
    flex: 1 1 auto;
    padding: .55rem .75rem;
  }

  .stouvot__ha {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    max-width: 100%;
  }

  .stouvot__ha span {
    min-width: 0;
    padding: .75rem .45rem;
  }

  .netroum,.glel__de footer {
    gap: .3rem;
  }

  .gal__placot {
    gap: 1rem;
  }

  .gal__placot small {
    max-width: 55%;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .skem__di>nav {
    align-items: flex-start;
  }

  .bem {
    padding: 1.4rem;
  }

  .reskon {
    margin: 8vh auto;
    padding: 2.5rem 1.2rem;
  }

  .zosai__rabis {
    gap: .7rem;
  }

}

@media(max-width:390px) {
  .skail {
    padding-inline: .55rem;
  }

  .ren {
    grid-template-columns: 34px minmax(0,1fr) 28px;
    gap: .65rem;
    padding: .85rem .7rem;
  }

  .codai,.fucla__ciprum {
    width: 34px;
    height: 34px;
  }

  .glel__de article {
    grid-template-columns: 34px minmax(0,1fr);
    gap: .65rem;
    padding: .8rem .7rem;
  }

  .skem__di>header {
    padding: 1.2rem 1rem;
  }

  .skem__di h1 {
    font-size: 1.8rem;
  }

  .car>aside,.bem {
    padding: 1rem;
  }

  .kegli__sam {
    padding-inline: .75rem;
  }

}