// colors  
$white-main: #DEDEDF
$accent-main: rgb(255, 51, 255)
$gray-main: #696969
$gray-dull: #141414
$card-color: #080808
$red-color: rgb(143, 2, 2)

// sizes
// Ширина
$main-width: 48vw
// Отступ от боков экрана
$main-offset: 25vw
// Отступы между абзацами
$div-offset: 1vw

// mixins
// Ширина обводки, цвет овбодки, радиус
$border-border-radius($a, $b, $c)
  border: $a solid $b
  border-radius: $c
// color, background-color
$color($a, $b)
  color: $a
  background-color: $b
// верх, право, низ, лево
$margin($a, $b, $c, $d)
  margin: $a $b $c $d
// ширина, высота
$width-height($a, $b)
  width: $a
  height: $b
// justify, align
$flex-justify-align($a, $b)
  display: flex
  justify-content: $a
  align-items: $b
// display flex + column dir
$flex-column()
  display: flex
  flex-direction: column
// изменение цвета бордера при нажатии
$focus-input-border()
  transition: border .3s ease
  &:focus
    border: .1vw solid $accent-main
    outline: none
// изменение цвета при наведении
$hover-color($color)
  transition: color .3s ease
  &:hover
    color: $color

.accent
  color: $accent-main
.accent-dull
  opacity: .8
  color: $accent-main
.gray
  color: $gray-main
.card-color
  color: $card-color
.gray-dull
  color: $gray-dull
.red
  color: $red-color

// тут почему то не работает соответствующий миксин
::selection
  color: white
  background-color: rgba(255, 51, 255, .7)

// устанавливает отступы для всех вложенный div'ов 
#div-offset 
  div
    margin-top: $div-offset

a
  cursor: pointer
  color: $white-main
  text-decoration: none
  &:hover
    text-decoration: none

input 
  font-size: 1vw
  width: 10vw
  $border-border-radius(.1vw, $gray-dull, .3vw)
  $color($white-main, $card-color)
  $focus-input-border()
  &[type="file"]
    display: none

textarea
  $border-border-radius(.1vw, $gray-dull, .3vw)
  padding: .5vw
  $color($white-main, $card-color)
  font-size: 1vw
  margin-top: 1vw
  resize: vertical
  width: 100%
  $focus-input-border()

button
  padding: .2vw
  $border-border-radius(.1vw, $gray-main, .3vw)
  font-size: 1vw
  $color($white-main, $card-color)
  cursor: pointer

.button
  padding: .2vw
  $border-border-radius(.1vw, $gray-main, .3vw)
  font-size: 1vw
  $color($white-main, $card-color)
  cursor: pointer

body
  $color($white-main, #000)
  font-size: 1vw
  margin: 0
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
  $flex-column()
  position: relative
  overflow-x: hidden

@keyframes blink
  0%, 100%
    opacity: 1
  50%
    opacity: 0

.content
  position: relative
  $margin(0, $main-offset, 2vw, $main-offset)
  width: $main-width
  flex: 1
  .main-content
    position: relative
    width: 100%
    margin-right: 0vw
    box-sizing: border-box
    .tags
      color: $gray-main
      font-weight: 700
      margin-bottom: 1vw
    .post
      position: relative
      $border-border-radius(.1vw, $gray-dull, 1vw)
      background-color: $card-color
      padding: 1vw
      $margin(1vw, 0, 1vw, 0)
      text-decoration: none
      &:hover::after, &:hover::before
        content: ''
        opacity: .5
        position: absolute
        top: 50%
        transform: translateY(-50%)
        border-width: 2vw
        border-style: solid
      &:hover::after
        left: 100%
        border-color: transparent $accent-main transparent transparent
      &:hover::before
        right: 100%
        border-color: transparent transparent transparent $accent-main
      .date
        border-top: 0.17vw dotted $gray-main
        $margin(.2vw, 0, 1vw, 0)
        padding-top: 1vw
        color: $gray-main
      .title
        border-bottom: 0.17vw dotted $gray-main
        padding-bottom: 1vw
        font-size: 1.7vw
        font-weight: 700
      .body
        margin-bottom: 0
    .read-other-posts
      color: $white-main
      text-align: center
      margin-top: 2vw
      display: flex
      align-items: center
      #right-border
        flex-grow: 1
        border-bottom: 0.1vw solid $white-main
        margin-right: 1vw
      #left-border
        flex-grow: 1
        border-bottom: 0.1vw solid $white-main
        margin-left: 1vw
    .next-post
      color: $white-main
      text-align: center
      margin-top: 2vw
      $flex-justify-align(center, center)
    .content-control
      margin-bottom: 1vw
      display: flex
      align-items: center
      gap: 0.3vw
    .post-header
      text-decoration: none
      overflow-wrap: break-word
      border: none
      padding-bottom: 1vw
      margin-bottom: 0
    .post.red-border
      border: .1vw solid $accent-main
    .mail
      overflow: hidden
      $border-border-radius(.1vw, $gray-dull, 1vw)
      background-color: $card-color
      display: flex
      $width-height(100%, 5vw)
      box-sizing: border-box
      button
        padding: 1vw
        font-size: 2vw
        color: $white-main
        border: none
        $hover-color($gray-main)
      textarea
        border: none
        padding: .7vw
        $color($white-main, transparent)
        font-size: .8vw
        margin-top: 0
        resize: none
        $width-height(100%, 100%)
      form
        width: 100%
        display: flex
    .footer
      color: $gray-main
      text-align: center
      margin-top: 2vw
    .post-container
      $border-border-radius(.1vw, $gray-dull, 1vw)
      background-color: $card-color
      margin-bottom: 1vw
      padding: 1vw
    .pagination
      $flex-justify-align(center, center)
      margin-top: 2vw
      gap: 5vw
    .page-name
      box-sizing: border-box
      width: 100%
      $border-border-radius(.2vw, $gray-dull, .5vw)
      overflow-wrap: break-word
      $margin(1vw, 0, 1vw, 0)
      padding: 1vw
      font-size: 1.7vw
      .cursor
        display: inline-block
        animation: blink 2s step-end infinite

.navbar
  position: relative
  $margin(1vw, $main-offset, 0vw, $main-offset)
  $flex-justify-align(center, center)
  width: $main-width
  gap: 1vw
  .button
    position: relative
    $color($gray-main, $card-color)
    $border-border-radius(.1vw, $gray-dull, .3vw)
    padding: .7vw
    $width-height(auto, auto)
    $hover-color($white-main)
  &::before
    content: ''
    position: absolute
    top: 50%
    $width-height($main-width, .1vw)
    background-color: $gray-dull

.logo
  display: flex
  $margin(2vw, $main-offset, 0vw, $main-offset)
  width: $main-width
  gap: 3vw

  .avatar
    $width-height(6vw, 6vw)
    border-radius: 1vw
    opacity: 60%
    z-index: 99999
    transition: transform .3s ease
    transform: scale(1.2) rotate(30deg)
    &:hover
      transform: rotate(-30deg)

  .site-name-and-status
    $flex-column()
    .site-name
      font-family: Ubuntu Mono, "Courier New", Courier, monospace
      font-weight: bold
      font-size: 3vw

  .last-track
    position: relative
    box-sizing: border-box
    background-color: $card-color
    $border-border-radius(.1vw, $accent-main, 1vw)
    $width-height(17vw, 6vw)
    padding: .5vw
    gap: .5vw
    $flex-justify-align(flex-start, center)
    img 
      box-sizing: border-box
      $border-border-radius(.1vw, $gray-dull, 1vw)
      $width-height(5vw, 5vw)
    .overlay-image 
      background-color: rgba(0, 0, 0, 0.5)
      display: none
      position: absolute
      box-sizing: border-box
      $width-height(5vw, 5vw)
      pointer-events: none
    .descr
      font-size: .8vw
      gap: .1vw
      $flex-column()
      margin-bottom: auto
      max-height: 100%
      overflow-y: scroll
      scrollbar-width: none
      #subdescr
        color: $gray-main