@font-face {
    font-family: 'Alumni Sans SC';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/AlumniSansSC-Medium.ttf') format('truetype');
    font-display: fallback;
}

@font-face {
    font-family: 'Alumni Sans SC';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/AlumniSansSC-Bold.ttf') format('truetype');
    font-display: fallback;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');
    font-display: fallback;
}

html {
  overflow-y: scroll;
}

*,  a {
  padding: 0;
  box-sizing: border-box;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  color: #141414;
  font-size: 17px;
  text-decoration: none;
}

.page-container {
  max-width: 1720px;
  margin: 8px auto;
  padding: 16px;
  background-color: #f5f5f0;
  font-size: 24px;
  gap: 4vw;
  text-align: justify;
}

.main-container {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 4vw, 80px);
  margin: 64px auto;
}

/* Шапка */

.header-container {
  margin-bottom: 3.2vw;
}

.header-title {
  font-family: "Alumni Sans SC", monospace;
  color: #141414;
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(64px, 20vw, 358px);
  letter-spacing: clamp(0px, 0.18vw, 7px);
  line-height: 0.82;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  top: -0.2em;
  margin: 0 0 -0.27em;
  z-index: 1;
}

.nav-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0px;
  z-index: 10;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  width: 100%;
  justify-items: start;
  margin-left: 0px;
}

.nav-grid a {
  text-align: left;
  padding: 7px 0;
  font-size: 24px;
  letter-spacing: 0.48px;
  line-height: 0.64;
  text-decoration: none;
  white-space: normal;
  transition: color 0.3s ease;
  display: flex;
  align-items: flex-start;
  margin-left: 0px;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.nav-grid a * {
  letter-spacing: 0.48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: pre;
  text-rendering: optimizeLegibility;
}

.nav-char {
  display: inline-block !important;
  letter-spacing: 0 !important;
  transition: none !important;
  animation: none !important;
  will-change: transform;
  position: relative;
  top: 0;
  left: 0;
}

/* МОБИЛЬНАЯ НАВИГАЦИЯ */
.mob-container {
  width: 100%;
  max-width: 100%;
  margin-left: 0px;
}

.mobile-nav {
  display: none;
  grid-template-columns: 3fr 1fr 1fr;
  width: 100%;
  align-items: top;
  margin-left: 0px;
}

.nav-line {
  width: 30%;
  padding: 0;
  margin: 10px 0 0 auto;
  border-style: dashed;
}

#mobileMenu .nav-link {
  font-size: 24px;
  line-height: 0.8;
  text-align: right;
  margin-right: 7vw;
}

@media (max-width: 768px) {
  .nav-grid {
    display: none;
  }
  .header-title {
    margin-bottom: -0.2em;
  }
  
  .mobile-nav {
    display: grid;
  }
}

.hiddened-text {
  display: grid;
}

@media (max-width: 1058px) {
  .hiddened-lg-text {
    visibility: hidden !important;
  }
}

@media (min-width: 769px) {
  .nav-grid {
    display: grid !important;
    margin-left: 0px;
  }
  .header-title {
    margin-bottom: -0.27em;
  }
  
  .mobile-nav {
    display: none !important;
  }
}

body,
.about-link,
.link-button,
.projects-link,
.nav-grid a,
.mobile-btn,
#mobileMenu .nav-link {
  font-family: "Alumni Sans SC", monospace;
  font-weight: 500;
  color: #141414;
  text-decoration: none;
}
.contact-text {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  color: #141414;
  text-decoration: none;
}

/* Кнопки на мобильных */
.mobile-btn {
  font-size: 24px;
  letter-spacing: 0.48px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Кнопка гамбургера */
.hamburger-btn {
  padding: 7px;
  border: none;
  background-color: #f5f5f0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(32, 31, 28, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ГЛАВНАЯ страница */
.index-section,
.about-section {
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: flex-start;
  gap: 16px;
}

.photo-frame {
  background-color: #e4e6e3;
  position: relative;
  overflow: hidden;
  width: clamp(700px, 50vw, 852px);
  height: clamp(367px, 50vw, 690px);
  min-width: 350px;
  min-height: 367px;
  display: inline-flex;
  justify-content: center;
}

/* Общие стили для обеих ссылок */
.about-link,
.projects-link {
  position: absolute;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 10;
  color: whitesmoke !important;
  letter-spacing: 0.48px !important;
  margin-left: 0 !important;
}

/* Стили только для ссылки "ОБО МНЕ" */
.about-link {
  font-weight: 700 !important;
  font-size: 42px !important;
  top: 74%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  white-space: nowrap;
}

/* Стили только для ссылки "ПРОЕКТЫ" */
.projects-link {
  top: 0;
  left: 8px;
  text-align: left;
}

/* Стили для спанов с буквами */
.about-link .hover-char,
.projects-link .hover-char {
  display: inline-block;
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  margin-left: 0 !important;
}

@media (max-width: 768px) {
  .index-section {
    flex-direction: column-reverse;
    align-items: start;
    gap: 16px;
  }
  
  .photo-frame {
    width: 100%;
    height: clamp(300px, 70vw, 600px);
    justify-content: left;
  }
  .photo-frame img {
    scale: 120%;
  }
}

/* ОБО МНЕ */
.about-photo-frame {
  background-color: #e4e6e3;
  position: relative;
  overflow: hidden;
  flex: 0 0 35%;
  min-width: 345px;
  min-height: 357px;
  max-height: 590px;
  aspect-ratio: 420 / 500;
  display: flex;
  justify-content: start;
}

.info-container {
  margin-left: clamp(16px, 2vw, 48px);
  margin-right: 0;
  display: flex;
  flex: 0 0 60%;
  gap: clamp(32px, 3.2vw, 64px);
  flex-direction: column;
  flex-wrap: flex-start;
  overflow: hidden;
  line-height: 1.2;
}

.group-name {
  min-width: 150px;
}

.extra-top-margin {
  margin-top: 32px;
}

.vertical-medium-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 32px;
}

.vertical-small-section {
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: 1vw;
  text-decoration: none;
  color: #201F1C;
  text-align: left;
}

.vertical-small-section a* {
  text-decoration: none;
  color: #201F1C;
}

.horizontal-big-section {
  display: flex;
  flex-direction: row;  
  gap: 3.7vw;
  align-items: flex-start;
  width: fit-content;
}

.horizontal-big-section-always {
  display: flex;
  flex-direction: row;  
  gap: 3.7vw;
  align-items: flex-start;
  width: fit-content;
}

.uppercase-text {
  text-transform: uppercase;
}

.selection-effect:hover,
.selection-effect:hover * {
  background-color: #141414;
  /* background-color: #A9625E; */
  color: #f5f5f0;
  text-decoration: none;
}

.text-selection-effect:hover {
  color: #141414;
}

.paradigms-row {
  display: flex;
  gap: 2vw;
  flex-direction: row;
  align-items: end;
  width: 100%;
}

.paradigms-row div {
  min-width: 220px;
}

.experience {
  display: flex;
  gap: 3.7vw;
  flex-direction: row;
}

.inner-section {
  display: flex;
  gap: 2vw;
  flex-direction: row;
}

.data-section {
  min-width: 210px;
}

.link-button {
  background-color: #141414;
  color: #f5f5f0;
  text-decoration: none;
  text-transform: uppercase;
  width: 388px;
  padding-left: 8px;
  font-size: 24px;
  white-space: pre;
}

.small-screen-only,
.medium-screen-only {
  display: none;
  }

@media (min-width: 769px) and (max-width: 1058px) {
  .about-photo-frame {
    display: flex;
    flex-direction: row;
    gap: 16px;
    position: relative;
    overflow: visible;
    flex: 0 0 35%;
    line-height: 1.2;
    margin-bottom: 175px;
    justify-content: left;
    width: 100%;
    flex-wrap: wrap;
    background-color: #f5f5f0;
  }
  .about-photo-frame img {
    max-width: 357px;
  }
  .horizontal-big-section {
    flex-direction: column;
    gap: 8px;
  }
  .info-container {
    max-width: calc(100% - (345px + 3.2vw + 16px));
    min-width: 0;
    overflow-wrap: break-word;
  }
  .link-button {
    width: 357px;
  }
  .not-on-medium-screen {
    display: none;
  }
  .medium-screen-only {
    display: flex;
  }
}

@media (max-width: 768px) {
  .about-section {
    flex-direction: column;
    gap: 64px;
    width: 100%;
  }
  .about-photo-frame {
    justify-content: left;
    width: 100%;
    margin: 16px 0;
  }
  .info-container {
    gap: 64px;
    margin-left: 0px;
  }
  .vertical-medium-section {
    gap: 16px;
  }
  .horizontal-big-section {
    flex-direction: column;
    gap: 8px;
  }
  .button-section {
    margin-top: 32px;
  }
  .not-small-screen {
    display: none;
  }
  .small-screen-only {
    display: flex;
  }
}

/* Блок ПОИСк РАБОТЫ */

.open-to-work {
  color: #009A22;
  border-color: #009A22;
  border-width: 1px;
  border-style: solid;
  width: 150px;
  text-align: center;
}

.open-to-work:hover {
  background-color: #009A22;
  color: #f5f5f0;
}


/* Блок ПРОЕКТЫ */
.projects-container {
  display: flex;
  flex-direction: column;
  gap: 4vw;
  width: 100%;
}

.projects-section {
  max-width: 62.5%;
  min-width: 388px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
}

.project-item {
    display: flex;
    gap: 64px;
    width: 100%;
}

.matrix-color {
  font-size: 13px !important;
  color: #009A22;
  margin: 0;
  padding: 0 3px 0 0;
  width: 100px;
  overflow: hidden;
}

.wake-up-neo {
  color: #f5f5f0;
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
}

.projects-section * {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 17px;
  color: #141414;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-info {
  gap: 64px;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.project-name {
  min-width: 210px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 17px;
  color: #141414;
  text-decoration: none;
}

.project-technologies {
  overflow: hidden;
}

.project-techs {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px dashed transparent;
  margin-left: -8px;
}

.project-tech-link {
  opacity: 0.47;
  border-color: #141414;
  padding: 0 8px;
}

.project-tech-link-active {
  background-color: #141414;
  color: #e4e6e3;
}

.reset-link {
  text-decoration: underline;
  margin-bottom: 24px;
}

.pagination {
  width: 100%;
  align-items: flex-start;
  gap: 32px;
  line-height: 64px;
}

.section-with-filter {
  width: 100%;
  display: flex;
  gap: 64px;
  justify-content: space-between;
}

.filter-section, .filter-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 450px;

}

.filter-button {
  justify-content: left;
  margin: auto 0;
  border: 1px dashed transparent;
}

.filter-button:hover {
  border-color: #141414;
  margin: 0 -8px;
  padding: 0 8px;
}

.filter-button-active {
  background-color: #201F1C;
  color: #f5f5f0;
  border: 1px dashed transparent;
  text-align: left;
  margin: 0 -8px;
  padding: 0 8px;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1085px;
}

.project-title-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.project-title {
  width: 140px;
}

.project-status {
  color: #AEAEAE;
}

.project-detail {
  min-width: 210px;
}

.project-description {
  line-height: 1.32;
}

ul.square-list {
    list-style-type: square;
    padding-left: 16px;
    margin-bottom: 0;
  }

@media (max-width: 1058px) {
  .section-with-filter {
    flex-direction: column-reverse;
    gap: 48px;
  }
  .filter-section {
    flex-direction: column-reverse;
    width: 100%;
    flex-wrap: wrap;
    /* line-height: 0.3; */
    gap: 36px;
  }
  .filter-list {
    flex-direction: row;
    height: 100%;
    align-items: bottom;
    gap: 8px 32px;
    flex-wrap: wrap;
  }
}

/* Блок КОНТАКТЫ */

.contacts-container,
.mob-footer-container {
  margin-left: 0px;
  padding-left: 0px;
  padding-bottom: 3.2vw;
}

.contact-item {
  display: flex;
  gap: 8px;
  align-items: center;
  /* text-transform: uppercase; */
}

.contact-icon {
  width: clamp(20px, 1.8vw, 36px);
  height: clamp(20px, 1.8vw, 36px);
  display: inline-flex;
  align-items: end;
  justify-content: end;
  margin-left: 0px;
}

.contact-icon img {
  width: 100%;
  height: 100%;
}

.text-comment {
  text-transform: uppercase;
  font-size: 14px;
  width: fit-content
}

/* Мобильная версия */

.mob-footer-container {
  width: 100%;
  max-width: 100%;
  display: none;
  align-items: top;
}

@media (max-width: 1058px) {
  .contact-item-hidden-lg {
    display: none;
  }
}
@media (max-width: 900px) {
  .contact-item-hidden-md {
    display: none;
  }
}
@media (max-width: 788px) {
  .contact-item-hidden-sm {
    display: none;
  }
}
@media (max-width: 767px) {
  .mob-footer-container {
    display: block;
  }
}



/* Блок БЛОГ */

.blog-container {
  width: 100%;
  max-width: 1500px;
  gap: 3.2vw 64px;
  display: flex;
  flex-direction: row;
  align-self: left;
  align-items: center;
  justify-content: left;
  flex-wrap: wrap;
}

.filters-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filters {
  line-height: 32px;
  text-transform: uppercase;
  padding: 0px 16px;
  width: fit-content;
  border: #201F1C;
  border-width: 1px;
  border-style: solid;
}

.filters.selected {
  background-color: #201F1C;
  color: #f5f5f0;
}

.articles-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  width: 100%;
  gap: clamp(16px, 2vw, 32px) clamp(32px, 3.8vw, 64px);
}

@media (max-width: 768px) {
  .articles-container {
    display: flex;
    flex-direction: column;
  }
}

.post-card {
  max-width: 780px;
  width: 100%;
  height: 232px;
  border-bottom: #201F1C;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  overflow: hidden;
}

.post-card-body {
  display: flex;
  width: 100%;
  gap: 16px;
  flex-direction: column;
  max-width: 880px;
}

.post-card-body .filters-container {
  height: 32px;
  margin-bottom: 0;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  width: 100%;
}

.article-preview {
  gap: 0px;
  height: 116px;
}

.post-card-title {
  text-transform: uppercase;
  text-align: left;
  justify-content: left;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  min-height: 29px;
}

.post-card-text {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-text-fill-color: #AEAEAE;
  text-align: left;
  min-height: 87px;
  text-transform: lowercase;
}

.article-rating {
  display: flex;
  width: 100%;
  height: 36px;
  justify-content: space-between;
  align-items: center;
}

.date-author-container {
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: right;
}

.date, .author {
  color: #AEAEAE !important;  
}

.author {
  text-decoration: underline !important;
}

.likes-container {
  display: flex;
  gap: 32px;
  flex-direction: row;
  align-items: center;
  justify-content: right;
}

.likes, .comments {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: right;
  gap: 4px;
}

.blog-container * {
  font-family: "Alumni Sans SC", monospace;
  color: #141414;
  font-weight: 500;
  text-decoration: none;
  font-size: 24px;
  letter-spacing: 2%;
  line-height: 1.2;
}

.post-detail {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: clamp(32px, 3.2vw, 64px);
  margin-bottom: 64px;
}

.article {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.article-text {
  width: 100%;
  margin-bottom: 16px;
}

.all-comments-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.comment-container {
  display: flex;
  width: 100%;
  max-width: 880px;
  flex-direction: row;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: #201F1C;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  overflow: hidden;
}

.userpic-area {
  width: 48px;
  height: 48px;
  image-rendering: auto;
  border-radius: 50%;
  background-color: #e4e6e3;
}

.comment-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  text-align: left;
}

.comment-title {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  background-color: #009A22;
}

.comment-edit-toolbar {
  display: flex;
  flex-direction: row;
  gap: 32px;
  justify-content: right;
}

.all-comments-container *,
.post-detail * {
  font-family: "Alumni Sans SC", monospace;
  color: #141414;
  font-weight: 500;
  text-decoration: none;
  font-size: 24px;
  letter-spacing: 2%;
  line-height: 1.2;
}


@media (max-width: 1058px) {
  .date, .author {
    /* display: flex;
    flex-wrap: nowrap; */
    width: 180px;
    text-wrap: nowrap;
    overflow: hidden;
  }
  .date {
    width: 50px;
  }
  .likes-container {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .post-detail {
    flex-direction: column;
  }
}



/* matrix-glitch */

.matrix-glitch-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.matrix-glitch-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.matrix-glitch-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0; /* Скрываем оригинал, показываем пиксельные версии */
}

.matrix-glitch-pixel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.matrix-glitch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.matrix-glitch-canvas {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.8;
}