*, ::after, ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #A7C2D2;
}
@media screen and (min-width: 450px) and (max-width: 1524px) {
  body {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5rem;
  }
}

a {
  color: #571513;
}

input {
  height: 2.2rem;
  padding: 0.2rem 1rem;
  border: none;
}

.container {
  display: grid;
  grid-template-rows: repeat(3, min-content);
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 2rem 1rem;
  padding: 1rem 0 1rem 0;
}
@media screen and (min-width: 450px) and (max-width: 1524px) {
  .container {
    display: none;
  }
}
@media screen and (max-width: 449px) {
  .container {
    grid-template-columns: 0.5rem 4.5rem 1fr 4.5rem 0.5rem;
  }
}

.screen-width-error {
  width: -moz-max-content;
  width: max-content;
  display: none;
}
@media screen and (min-width: 450px) and (max-width: 1524px) {
  .screen-width-error {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 4.5rem;
    background: url(../img/Background.png) center/100% 100% no-repeat;
  }
}

@font-face {
  font-family: "Aclonica";
  src: local("Aclonica-Regular");
  src: url("../fonts/Aclonica-Regular.ttf");
  font-weight: regular;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto-Regular");
  src: url("../fonts/Roboto-Regular.ttf");
  font-weight: regular;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comforter";
  src: local("Comforter-Regular");
  src: url("../fonts/Comforter-Regular.ttf");
  font-weight: regular;
  font-style: normal;
  font-display: swap;
}
html {
  font-size: 62.5%;
}

body {
  font-family: "Roboto";
  font-size: 1.5rem;
}

input {
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  text-align: center;
}

.header__icons-figure {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 0.5em;
}

button {
  font-size: 1.6rem;
}

.title {
  font-family: "Aclonica";
  font-size: 4.8rem;
}
@media screen and (max-width: 449px) {
  .title {
    font-size: 3.6rem;
  }
}

.nav-button__list-count {
  font-family: "Roboto";
  font-size: 1.2rem;
}
@media screen and (max-width: 449px) {
  .nav-button__list-count {
    font-size: 1.1rem;
  }
}
.nav-button__text {
  font-family: "Roboto";
  font-size: 1.3rem;
}

.sidebar {
  font-family: "Roboto";
  font-size: 1.8rem;
}
.sidebar__banner p {
  line-height: 1.4em;
}

.user-page-link__help-info {
  font-size: 1.2rem;
  line-height: 1.4em;
}
.user-page__sorting-list {
  font-size: 1.3rem;
}
.user-page__sorting-item {
  font-size: 1.3rem;
  text-align: center;
}
.user-page__user-orders-text {
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.4em;
}
.user-image__change-image-link, .user-image__save-image-link, .user-image__standart-image-link, .user-image__cancel-image-link {
  text-align: center;
  text-decoration: underline;
  line-height: 1.3em;
}
.user-image__save-image-link, .user-image__standart-image-link, .user-image__cancel-image-link {
  text-decoration: none;
}
.user-image__game-winner-message {
  font-size: 1.3rem;
  line-height: 1.4em;
  text-align: center;
}
.user-image__game-winner-message span {
  font-size: 1.4rem;
  font-weight: 700;
}
.user-details__item {
  text-align: center;
}
.user-details__item-header {
  font-weight: 700;
  text-decoration: underline;
}
.user-details__geolocation-help-text {
  font-size: 1.3rem;
  line-height: 1.4em;
  text-align: justify;
}
.user-details__geolocation-help-text span {
  font-weight: 700;
}
.user-details__geolocation-house-text {
  line-height: 1.5em;
}
.user-details__login, .user-details__first-name, .user-details__sur-name {
  word-break: break-all;
}
.user-details__login-pattern, .user-details__first-name-pattern, .user-details__sur-name-pattern {
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 449px) {
  .user-details__login-pattern, .user-details__first-name-pattern, .user-details__sur-name-pattern {
    font-size: 1rem;
  }
}
.user-details__login-helper, .user-details__first-name-helper, .user-details__sur-name-helper {
  font-size: 1rem;
}
@media screen and (max-width: 449px) {
  .user-details__login {
    font-size: 1.2rem;
  }
}
.user-actions__item {
  text-align: center;
  text-decoration: underline;
}

.left-frame {
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.4em;
}

.notification__appeal {
  text-align: center;
}
.notification__text {
  text-align: center;
  line-height: 1.2em;
}
.notification__help-text {
  text-align: justify;
  font-size: 1.3rem;
  line-height: 1.4em;
}
.notification__help-text span {
  font-weight: 700;
}

.game {
  text-align: center;
  line-height: 1.2em;
}
.game__answer-version {
  text-align: left;
}
.game__question {
  text-align: center;
  line-height: 1.2em;
}
.game__question_paragraph {
  font-weight: 700;
}
.game__button-helper {
  font-size: 1.3rem;
  text-align: center;
}
@media screen and (max-width: 449px) {
  .game__button-helper {
    font-size: 1.1rem;
  }
}
.game__helper-text-wrong {
  text-decoration: underline;
}

.target__page-number {
  font-size: smaller;
}

.timer__digit {
  font-size: 2rem;
}
@media screen and (max-width: 449px) {
  .timer__digit {
    font-size: 1.5rem;
    font-weight: bold;
  }
}

.clarifing__user-answer {
  font-weight: 700;
  letter-spacing: 0.1rem;
}
.clarifing__text {
  text-align: center;
  line-height: 1.2em;
  letter-spacing: 0.1rem;
}

.conclusion {
  line-height: 1.2em;
}
.conclusion__text {
  font-weight: 700;
  letter-spacing: 0.1rem;
}
.conclusion__game-continuation {
  text-align: center;
}

.resolution__word {
  font-family: "Comforter";
  font-size: 2.7rem;
}
@media screen and (max-width: 449px) {
  .resolution__word {
    font-size: 1.9rem;
  }
}

.developer-card {
  font-size: 1.6rem;
}
.developer-card__details-spec {
  font-size: 1.3rem;
}
.developer-card__rating-grade {
  font-size: 1.3rem;
}
.developer-page {
  text-align: justify;
}
.developer-page__name {
  font-size: 2.7rem;
  text-align: center;
}
@media screen and (max-width: 449px) {
  .developer-page__name {
    font-size: 2rem;
    text-decoration: underline;
  }
}
.developer-page__rating-grade {
  font-size: 1.3rem;
}
.developer-page__certificates-link {
  text-decoration: none;
}
.developer-page__certificates-link span {
  font-size: 1.3rem;
  line-height: 1.4em;
}
@media screen and (max-width: 449px) {
  .developer-page__spec {
    font-size: 1.25rem;
    text-align: center;
  }
}
.developer-page__about-self {
  line-height: 1.4em;
}
.developer-page__feedback-frame {
  line-height: 1.4em;
}
.developer-page__error {
  text-align: center;
}
.developer-page span {
  font-weight: 700;
}
.developer-technologies__ide-frame span, .developer-technologies__languages-frame span, .developer-technologies__databases-frame span, .developer-technologies__libraries-frame span, .developer-technologies__other-skills-frame span {
  font-size: 1.3rem;
  line-height: 1.4em;
  text-align: center;
  text-decoration: underline;
}
.developer-technologies__ide, .developer-technologies__languages, .developer-technologies__databases, .developer-technologies__libraries, .developer-technologies__other-skills {
  text-align: center;
  line-height: 1.4em;
}
.developer-feedback__create-link {
  text-decoration: underline;
}
@media screen and (max-width: 449px) {
  .developer-feedback__create-link {
    text-decoration: none;
  }
}
.developer-feedback__feedback-list span {
  text-decoration: underline;
  font-weight: normal;
}
.developer-feedback__feedback-helper {
  font-size: 1.3rem;
  text-align: center;
}
@media screen and (max-width: 449px) {
  .developer-feedback__feedback-helper {
    font-size: 1.1rem;
  }
}
.developer-feedback__user-game-winner-message {
  font-size: 1.1rem;
  line-height: 1.3em;
}
.developer-feedback__user-game-winner-message span {
  font-weight: 700;
  text-decoration: none;
}
.developer-feedback__user-name {
  text-align: center;
  font-size: 1.3rem;
}
.developer-feedback__user-text {
  word-break: break-all;
}
.developer-feedback__user-grade span {
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}
.developer-feedback__user-actions span {
  font-size: 1.3rem;
}
.developer-feedback__input-text-frame {
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  line-height: 1.6em;
}
.developer-feedback__date-time {
  font-size: 1.1rem;
  line-height: 1em;
  text-align: end;
}
.developer-feedback__date-time span {
  text-decoration: none;
}
@media screen and (max-width: 449px) {
  .developer-feedback__date-time {
    font-size: 1rem;
  }
}

.footer {
  font-family: "Roboto";
  font-size: 1.3rem;
}

.author-reg-frame__action-item {
  font-size: 1.8rem;
}
.author-reg-frame__help-text {
  font-size: 1.2rem;
}

.authorization-form__helper, .registration-form__helper, .password-change-form__helper, .user-delete-form__helper {
  font-size: 1rem;
}
.authorization-form__login, .authorization-form__password, .authorization-form__name, .authorization-form__password-check, .authorization-form__password-old, .authorization-form__password-new, .registration-form__login, .registration-form__password, .registration-form__name, .registration-form__password-check, .registration-form__password-old, .registration-form__password-new, .password-change-form__login, .password-change-form__password, .password-change-form__name, .password-change-form__password-check, .password-change-form__password-old, .password-change-form__password-new, .user-delete-form__login, .user-delete-form__password, .user-delete-form__name, .user-delete-form__password-check, .user-delete-form__password-old, .user-delete-form__password-new {
  font-size: 1.6rem;
}
.authorization-form__login-pattern, .authorization-form__password-pattern, .authorization-form__name-pattern, .authorization-form__password-check-pattern, .authorization-form__password-old-pattern, .authorization-form__password-new-pattern, .registration-form__login-pattern, .registration-form__password-pattern, .registration-form__name-pattern, .registration-form__password-check-pattern, .registration-form__password-old-pattern, .registration-form__password-new-pattern, .password-change-form__login-pattern, .password-change-form__password-pattern, .password-change-form__name-pattern, .password-change-form__password-check-pattern, .password-change-form__password-old-pattern, .password-change-form__password-new-pattern, .user-delete-form__login-pattern, .user-delete-form__password-pattern, .user-delete-form__name-pattern, .user-delete-form__password-check-pattern, .user-delete-form__password-old-pattern, .user-delete-form__password-new-pattern {
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
}
.authorization-form__login-helper, .authorization-form__login-empty-helper, .authorization-form__login-coherence-helper, .authorization-form__password-helper, .authorization-form__password-empty-helper, .authorization-form__password-coherence-helper, .authorization-form__name-helper, .authorization-form__name-empty-helper, .authorization-form__name-coherence-helper, .authorization-form__password-check-helper, .authorization-form__password-check-empty-helper, .authorization-form__password-check-coherence-helper, .authorization-form__password-old-helper, .authorization-form__password-old-empty-helper, .authorization-form__password-old-coherence-helper, .authorization-form__password-new-helper, .authorization-form__password-new-empty-helper, .authorization-form__password-new-coherence-helper, .registration-form__login-helper, .registration-form__login-empty-helper, .registration-form__login-coherence-helper, .registration-form__password-helper, .registration-form__password-empty-helper, .registration-form__password-coherence-helper, .registration-form__name-helper, .registration-form__name-empty-helper, .registration-form__name-coherence-helper, .registration-form__password-check-helper, .registration-form__password-check-empty-helper, .registration-form__password-check-coherence-helper, .registration-form__password-old-helper, .registration-form__password-old-empty-helper, .registration-form__password-old-coherence-helper, .registration-form__password-new-helper, .registration-form__password-new-empty-helper, .registration-form__password-new-coherence-helper, .password-change-form__login-helper, .password-change-form__login-empty-helper, .password-change-form__login-coherence-helper, .password-change-form__password-helper, .password-change-form__password-empty-helper, .password-change-form__password-coherence-helper, .password-change-form__name-helper, .password-change-form__name-empty-helper, .password-change-form__name-coherence-helper, .password-change-form__password-check-helper, .password-change-form__password-check-empty-helper, .password-change-form__password-check-coherence-helper, .password-change-form__password-old-helper, .password-change-form__password-old-empty-helper, .password-change-form__password-old-coherence-helper, .password-change-form__password-new-helper, .password-change-form__password-new-empty-helper, .password-change-form__password-new-coherence-helper, .user-delete-form__login-helper, .user-delete-form__login-empty-helper, .user-delete-form__login-coherence-helper, .user-delete-form__password-helper, .user-delete-form__password-empty-helper, .user-delete-form__password-coherence-helper, .user-delete-form__name-helper, .user-delete-form__name-empty-helper, .user-delete-form__name-coherence-helper, .user-delete-form__password-check-helper, .user-delete-form__password-check-empty-helper, .user-delete-form__password-check-coherence-helper, .user-delete-form__password-old-helper, .user-delete-form__password-old-empty-helper, .user-delete-form__password-old-coherence-helper, .user-delete-form__password-new-helper, .user-delete-form__password-new-empty-helper, .user-delete-form__password-new-coherence-helper {
  font-size: 1rem;
}

.log-out-modal__question, .log-out-modal .error-identification-modal__message, .password-change-modal__question, .password-change-modal .error-identification-modal__message, .user-delete-modal__question, .user-delete-modal .error-identification-modal__message, .feedback-delete-modal__question, .feedback-delete-modal .error-identification-modal__message {
  font-size: 1.6rem;
  line-height: 1.6em;
  text-align: center;
}

.future-info-modal__text {
  line-height: 1.6em;
  text-align: center;
}

.screen-width-error {
  text-align: center;
  line-height: 1.6em;
}

.content {
  grid-area: 2/2/3/10;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 2rem 3rem;
}
@media screen and (max-width: 449px) {
  .content {
    grid-column: 2/5;
    display: flex;
  }
}
.content__main {
  grid-area: 1/4/-1/-1;
}
@media screen and (max-width: 449px) {
  .content__main {
    width: 100%;
  }
}

.developer-card {
  width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 65, 112, 0.05);
}
.developer-card__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.developer-card__details-actions-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}
.developer-card__rating-list {
  position: relative;
  display: flex;
  gap: 1rem;
}
.developer-card__rating-list:hover li:last-child {
  display: block;
}
.developer-card__rating-grade {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 100%;
  color: #571513;
}
.developer-page {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-row-gap: 2rem;
}
.developer-page__top-section {
  grid-row: 1/2;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: repeat(5, min-content);
  gap: 2rem;
}
@media screen and (max-width: 449px) {
  .developer-page__top-section {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }
}
.developer-page__name {
  grid-column: 2/3;
  grid-row: 1/2;
}
@media screen and (max-width: 449px) {
  .developer-page__name {
    grid-area: 1/1/2/-1;
  }
}
.developer-page__photo-actions-frame {
  width: 27rem;
  grid-column: 1/2;
  grid-row: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.5rem;
  background: rgba(0, 65, 112, 0.05);
  gap: 1.5rem;
}
@media screen and (max-width: 449px) {
  .developer-page__photo-actions-frame {
    width: 17.3rem;
    grid-area: 2/1/4/-1;
  }
}
.developer-page__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.developer-page__back-path-link, .developer-page__feedback-open-link {
  color: #004170;
}
.developer-page__short-info {
  grid-area: 2/2/4/-1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 2rem;
}
@media screen and (max-width: 449px) {
  .developer-page__short-info {
    gap: 0;
  }
}
.developer-page__rating-price-frame {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 449px) {
  .developer-page__rating-price-frame {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
}
.developer-page__rating-frame {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-right: 3rem;
}
@media screen and (max-width: 449px) {
  .developer-page__rating-frame {
    margin-right: 0;
  }
}
.developer-page__rating-list {
  position: relative;
  display: flex;
  gap: 1rem;
}
.developer-page__rating-list:hover li:last-child {
  display: block;
}
.developer-page__rating-grade {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 100%;
  color: #571513;
}
.developer-page__figure {
  width: 4.5rem;
  height: 4.5rem;
  background: url(../img/Figure.png);
}
@media screen and (max-width: 449px) {
  .developer-page__figure {
    display: none;
  }
}
.developer-page__spec-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.developer-page__price-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.developer-page__technologies-frame {
  grid-area: 4/2/5/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 7.5rem;
  background: url(../img/Background.png) center/100% 100% no-repeat;
  gap: 1.5rem;
}
@media screen and (max-width: 449px) {
  .developer-page__technologies-frame {
    grid-area: 4/1/5/-1;
    background: none;
    padding: 0;
  }
}
.developer-page__certificates {
  grid-area: 5/2/-1/-1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.developer-page__certificates-frame {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.developer-page__certificates-frame li {
  list-style-type: none;
  background-color: #A7C2D2;
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  transform: perspective(500px) rotateY(35deg);
  transition: transform 0.1s;
  box-shadow: -0.3rem 0.3rem 0.3rem rgba(0, 65, 112, 0.55);
  margin-left: -3.5rem;
}
.developer-page__certificates-frame li:hover {
  transform: translateY(-0.3rem) perspective(500px) rotateY(35deg);
}
.developer-page__certificates-frame li:first-child {
  margin-left: 0;
}
@media screen and (max-width: 449px) {
  .developer-page__certificates-frame {
    grid-area: 5/1/-1/-1;
  }
}
.developer-page__certificates-img {
  display: block;
  width: 12rem;
  height: 8rem;
}
.developer-page__certificates-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.5rem;
  color: #000000;
}
.developer-page__certificates-link span {
  margin-bottom: 0.5rem;
}
.developer-page__about-self {
  grid-row: 2/3;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.developer-page__feedback-frame {
  width: 100%;
  position: relative;
  grid-row: 2/-1;
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  background-color: #A7C2D2;
  box-shadow: 0 -1px 5px 0 rgba(0, 65, 112, 0.55), 0 1px 5px 0 rgba(0, 65, 112, 0.55);
}
@media screen and (max-width: 449px) {
  .developer-page__feedback-frame {
    position: fixed;
    height: calc(100vh - 15rem);
    left: -110%;
    bottom: 0;
    z-index: 1;
  }
  .developer-page__feedback-frame-active {
    left: 0;
  }
}
.developer-page__error {
  height: 100%;
  align-content: center;
}
@media screen and (max-width: 449px) {
  .developer-page {
    grid-row-gap: 3rem;
  }
}
.developer-technologies {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.developer-technologies__left-frame, .developer-technologies__right-frame {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.developer-technologies__ide-frame, .developer-technologies__languages-frame, .developer-technologies__databases-frame, .developer-technologies__libraries-frame, .developer-technologies__other-skills-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.developer-technologies__figure-frame {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.developer-feedback__actions-frame {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2.5rem;
  border-bottom: 0.2rem solid rgba(255, 255, 255, 0.25);
}
.developer-feedback__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.developer-feedback__create-link {
  color: #571513;
  cursor: pointer;
}
.developer-feedback__close-link {
  display: none;
  color: #004170;
}
@media screen and (max-width: 449px) {
  .developer-feedback__close-link {
    display: block;
  }
}
.developer-feedback__sorting-content {
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.developer-feedback__sorting-content select {
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  background-color: #A7C2D2;
}
@media screen and (max-width: 449px) {
  .developer-feedback__sorting-content {
    flex-direction: column;
  }
}
.developer-feedback__feedback-list {
  width: 100%;
  min-height: 20rem;
  height: 50.4rem;
  max-height: 50.4rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 1rem 8rem;
  gap: 2rem;
}
.developer-feedback__feedback-list span {
  color: #571513;
  cursor: pointer;
}
@media screen and (max-width: 449px) {
  .developer-feedback__feedback-list {
    height: 100%;
    max-height: 100%;
    padding: 1rem 1rem;
    gap: 1rem;
  }
}
.developer-feedback__feedback-container {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.5rem 0;
  background: linear-gradient(90deg, rgba(0, 65, 112, 0.1) 0%, rgba(0, 65, 112, 0) 100%);
}
@media screen and (max-width: 449px) {
  .developer-feedback__feedback-container {
    gap: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 0;
  }
}
.developer-feedback__feedback-helper {
  color: #571513;
}
.developer-feedback__user-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0 0;
}
.developer-feedback__user-image {
  width: 7rem;
}
.developer-feedback__user-game-winner-image {
  width: 2rem;
  position: absolute;
  top: -5%;
  right: 5%;
  transform: rotate(45deg);
}
.developer-feedback__user-game-winner-image:hover ~ .developer-feedback__user-game-winner-message {
  display: block;
}
.developer-feedback__user-game-winner-message {
  display: none;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: -5%;
  left: 105%;
  padding: 0.2rem;
  color: #A7C2D2;
  background-color: rgb(0, 65, 112);
  z-index: 1;
}
.developer-feedback__user-game-winner-message span {
  color: #A7C2D2;
}
.developer-feedback__user-name {
  width: 10rem;
}
.developer-feedback__user-text-grade {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
@media screen and (max-width: 449px) {
  .developer-feedback__user-text-grade {
    gap: 1.1rem;
  }
}
.developer-feedback__user-grade {
  display: flex;
  gap: 1rem;
}
.developer-feedback__user-grade-actions {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 449px) {
  .developer-feedback__user-grade-actions {
    flex-direction: column;
    gap: 0.7rem;
  }
}
.developer-feedback__user-grade span {
  color: #000000;
  cursor: default;
}
.developer-feedback__user-actions {
  display: flex;
  gap: 5rem;
}
@media screen and (max-width: 449px) {
  .developer-feedback__user-actions {
    gap: 7rem;
  }
}
.developer-feedback__date-time span {
  cursor: default;
}
.developer-feedback__input-text-frame {
  min-height: 14rem;
  max-height: 35rem;
  resize: none;
  padding: 1rem;
}
@media screen and (max-width: 449px) {
  .developer-feedback__input-text-frame {
    min-height: 20rem;
  }
}
.developer-feedback__rating-list {
  display: flex;
  gap: 1rem;
}
.developer-feedback__rating-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.developer-feedback__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.developer-feedback__frame-active {
  animation: feedback-frame-animation-open 0.2s linear;
}
.developer-feedback__frame-inactive {
  animation: feedback-frame-animation-close 0.1s linear;
}

.personal-feedback {
  background: linear-gradient(90deg, rgba(0, 65, 112, 0.25) 0%, rgba(0, 65, 112, 0) 100%);
}

.footer {
  grid-area: 3/2/4/10;
}
@media screen and (max-width: 449px) {
  .footer {
    grid-area: 3/2/4/5;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}
.footer__logo {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-column-gap: 2rem;
  align-items: center;
}
.footer__logo::after, .footer__logo::before {
  background-color: #000000;
  height: 0.1rem;
  content: "";
}
.footer__logo img {
  width: 10.5rem;
  height: 6.2rem;
}
@media screen and (max-width: 449px) {
  .footer__logo img {
    width: 6.8rem;
    height: 4rem;
  }
}
@media screen and (max-width: 449px) {
  .footer__logo {
    grid-column-gap: 1rem;
  }
}
.footer__author {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__author-links {
  display: flex;
  gap: 3rem;
}
@media screen and (max-width: 449px) {
  .footer__author-links {
    flex-direction: column;
    gap: 2rem;
  }
}
@media screen and (max-width: 449px) {
  .footer__author {
    flex-direction: column;
    gap: 2rem;
  }
}

.author-contacts__link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
@media screen and (max-width: 449px) {
  .author-contacts__link {
    justify-content: center;
  }
}
.author-contacts__icon {
  width: 2.1rem;
  height: 1.7rem;
}

.header {
  grid-area: 1/2/2/10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 449px) {
  .header {
    grid-area: 1/2/2/5;
  }
}
.header__greeting {
  color: #571513;
}
.header__content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-gap: 1rem;
  align-items: center;
}
@media screen and (max-width: 449px) {
  .header__content {
    display: flex;
  }
}
.header__icons {
  grid-column: 1/4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__icons-figure {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/Figure.png);
}
.header__icons-logo {
  display: flex;
}
.header__icons-logo img {
  width: 7.6rem;
  height: 4.5rem;
}
@media screen and (max-width: 449px) {
  .header__icons-logo img {
    width: 6.8rem;
    height: 4rem;
  }
}
@media screen and (max-width: 449px) {
  .header__icons {
    width: 100%;
  }
}
.header__buttons {
  grid-column: 11/15;
}
@media screen and (max-width: 449px) {
  .header__buttons {
    display: none;
  }
}

.nav-menu {
  display: flex;
  justify-content: flex-end;
}
.nav-menu__item {
  margin-right: 2rem;
}
.nav-menu__item:last-child {
  margin-right: 0;
}
@media screen and (max-width: 449px) {
  .nav-menu__item {
    padding: 0.5rem;
    background: linear-gradient(90deg, rgba(0, 65, 112, 0.02) 0%, rgba(0, 65, 112, 0.35) 100%);
  }
  .nav-menu__item:last-child {
    background: none;
  }
}

.nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.nav-button__frame {
  display: flex;
  align-items: end;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 449px) {
  .nav-button__frame {
    margin-bottom: 0;
  }
}
.nav-button__icon {
  width: 2.5rem;
  height: 2.2rem;
  margin-right: 0.7rem;
}
@media screen and (max-width: 449px) {
  .nav-button__icon {
    width: 2.3rem;
    height: 2rem;
  }
}
.nav-button__icon-login {
  margin-right: 0;
}
@media screen and (max-width: 449px) {
  .nav-button__text {
    display: none;
  }
}

.mobile-nav {
  display: block;
  animation: nav-open 0.2s;
}
.mobile-nav-inactive {
  display: block;
  animation: nav-close 0.2s;
}

canvas {
  border: 0.1rem solid #571513;
  touch-action: none;
}
@media screen and (max-width: 449px) {
  canvas {
    border: 0.1rem dashed;
  }
}

#canvasDraft {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  z-index: 1;
}

#canvasImage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#canvasLineColorInput {
  border: none;
  opacity: 0;
  z-index: 1;
}

.home-content {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(3, min-content);
  grid-row-gap: 1.5rem;
}
@media screen and (max-width: 449px) {
  .home-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}
.home-content__top-section {
  grid-row: 1/2;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column-gap: 1rem;
  align-items: center;
}
@media screen and (max-width: 449px) {
  .home-content__top-section {
    display: flex;
    transition: all 0.55s;
    overflow: hidden;
    height: 10rem;
  }
  .home-content__top-section-active {
    height: 100%;
  }
}
.home-content__sorting-frame {
  grid-row: 2/3;
  display: flex;
  justify-content: end;
  align-items: center;
}
.home-content__sorting-frame select {
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  background-color: #A7C2D2;
}
@media screen and (max-width: 449px) {
  .home-content__sorting-frame {
    display: none;
  }
}
.home-content__catalog {
  grid-row: 3/4;
  display: grid;
  grid-template-columns: repeat(auto-fill, 30rem);
  justify-content: space-between;
  gap: 2rem;
}
@media screen and (max-width: 449px) {
  .home-content__catalog {
    justify-content: center;
  }
}

.left-frame {
  grid-column: 1/6;
  height: 35rem;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.left-frame__text {
  width: 75%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left-frame span {
  color: #571513;
}
@media screen and (max-width: 449px) {
  .left-frame {
    display: none;
  }
}

.right-frame {
  grid-column: 6/17;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1rem;
  padding: 2rem 0 2rem 0;
  background: url(../img/Background.png) center/100% 100% no-repeat;
}
@media screen and (max-width: 449px) {
  .right-frame {
    width: 100%;
  }
}

.notification {
  position: relative;
  grid-column: 2/-2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
@media screen and (max-width: 449px) {
  .notification__info {
    display: none;
  }
  .notification__info-active {
    display: block;
  }
}
.notification__info-view {
  display: none;
  color: #004170;
}
@media screen and (max-width: 449px) {
  .notification__info-view {
    display: block;
  }
}
.notification__help-icon {
  width: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(0, 0, 0, 0.6);
  cursor: default;
  padding: 0.1rem 0.7rem 0.1rem 0.7rem;
  border: 0.1rem solid rgba(0, 0, 0, 0.45);
}
.notification__help-icon:hover ~ .notification__help-text {
  display: block;
}
@media screen and (max-width: 449px) {
  .notification__help-icon {
    display: none;
  }
}
.notification__help-text {
  display: none;
  width: 40rem;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -150%);
  padding: 0.5rem;
  color: #A7C2D2;
  background-color: rgb(0, 65, 112);
}
@media screen and (max-width: 449px) {
  .notification__welcome {
    display: none;
  }
}
.notification__welcome-mobile {
  display: none;
  color: #004170;
}
@media screen and (max-width: 449px) {
  .notification__welcome-mobile {
    display: block;
  }
}
@media screen and (max-width: 449px) {
  .notification__button {
    display: none;
  }
}
.notification__button-mobile {
  display: none;
}
@media screen and (max-width: 449px) {
  .notification__button-mobile {
    display: block;
  }
}

.game {
  position: relative;
  grid-column: 2/-2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.game__content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1rem;
  align-items: center;
}
@media screen and (max-width: 449px) {
  .game__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
}
.game__content-wrapper {
  position: relative;
  grid-column: 1/12;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 449px) {
  .game__content-wrapper {
    width: 100%;
  }
}
.game__content-action {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.game__question {
  padding: 0 0.5rem 0 1.5rem;
}
.game form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.game__answers-list {
  width: -moz-min-content;
  width: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.game__answer-version {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1rem 1rem 0;
  cursor: default;
}
.game__answer-version:hover {
  background-color: rgba(0, 65, 112, 0.05);
}
.game__answer-version input {
  opacity: 0;
  margin: 0;
}
.game__input-image {
  width: 2rem;
  height: 2rem;
  position: absolute;
  opacity: 0.25;
}
.game__choice-image {
  width: 2rem;
  height: 2rem;
  position: absolute;
}
.game__letters-input-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 449px) {
  .game__letters-input-list {
    gap: 0.5rem;
  }
}
.game__letter-input {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}
.game__letter-input-before {
  position: absolute;
  padding: 0.75rem;
  background-color: #571513;
  opacity: 0;
  z-index: -1;
}
.game__folder, .game__table {
  min-width: 23.4rem;
  min-height: 10.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border: 0.2rem solid #571513;
  gap: 3rem;
}
.game__drag-over {
  box-shadow: inset 0 0 2rem;
}
.game__stamp {
  position: absolute;
  right: 14%;
  bottom: 14%;
  padding: 0.1rem;
  background-color: rgba(87, 21, 19, 0.7);
  border-radius: 100%;
}
.game__stamp_white-ring {
  padding: 0.1rem;
  background-color: #fff;
  border-radius: 100%;
}
.game__stamp_inside {
  padding: 0.3rem;
  background-color: rgba(87, 21, 19, 0.7);
  border-radius: 100%;
}
.game__canvas-color-text {
  position: relative;
  line-height: 1.4em;
}
.game__canvas-color-image {
  position: absolute;
  bottom: -5%;
  margin-left: 1rem;
}
.game__targets-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}
.game__targets-row {
  display: flex;
  gap: 5rem;
}
.game__canvas-target {
  padding: 1.5rem;
  background-color: #571513;
}
.game__buttons {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.game__button-helper {
  position: absolute;
  bottom: -50%;
  color: #571513;
}
@media screen and (max-width: 449px) {
  .game__button-helper {
    bottom: -30%;
  }
}
.game__helper-link {
  color: #004170;
  cursor: pointer;
}
.game__helper-frame {
  position: absolute;
  top: -10%;
  width: 100%;
  transform: scale(0.1);
  transition: all 0.2s;
  z-index: 2;
}
.game__helper-text-wrong {
  color: #571513;
}
.game__crutch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.target {
  position: relative;
  padding: 4rem 2.5rem 4rem 2.5rem;
}
.target__side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: url(../icons/Sheet.svg);
  border: 0.1rem solid rgba(0, 0, 0, 0.25);
  transition: transform 0.5s;
  backface-visibility: hidden;
}
.target__side:active {
  transform: translateY(-0.3rem);
  box-shadow: 0.2rem 0.2rem 0.2rem;
}

.timer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timer__figure {
  width: 4.5rem;
  height: 4.5rem;
  background: url(../img/Figure.png) center/100% 100% no-repeat;
  transition: all 0.25s;
}
@media screen and (max-width: 449px) {
  .timer__figure {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.timer__digit {
  position: absolute;
  color: rgb(255, 255, 255);
  z-index: 1;
}
.timer__right-top-eighth-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 100% 100%, 100% 0, 100% 0);
}
.timer__right-quarter-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 100% 100%, 100% 50%, 100% 50%);
}
.timer__right-bottom-eighth-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 100% 100%, 100% 100%, 100% 100%);
}
.timer__half-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 50% 100%, 50% 100%, 50% 100%);
}
.timer__left-bottom-eighth-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 0 100%, 0 100%, 0 100%);
}
.timer__left-quarter-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 0 50%, 0 50%, 0 50%);
}
.timer__left-top-eighth-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 0, 0 0, 0 0, 0 0);
}
.timer__full-cliping {
  clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 100% 100%, 100% 0, 50% 0);
}

.clarifing {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
@media screen and (max-width: 449px) {
  .clarifing {
    position: static;
    transform: none;
  }
}
.clarifing__buttons {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.clarifing__user-answer {
  margin-left: 0.5rem;
}
.clarifing__text {
  color: #571513;
}

.conclusion {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
@media screen and (max-width: 449px) {
  .conclusion {
    position: static;
    transform: none;
  }
}
.conclusion__drag-canvas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
.conclusion__text-wrapper {
  display: flex;
}
.conclusion__text {
  margin-left: 0.5rem;
}

.resolution {
  position: relative;
  width: 14rem;
  grid-column: 12/13;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 449px) {
  .resolution {
    width: 30%;
  }
}
.resolution__sheet {
  width: 100%;
}
.resolution__word {
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: 69%;
  left: 50%;
  transform: translateX(-50%);
  color: #571513;
  opacity: 0;
}
.resolution__word_first-part {
  left: 29%;
}
.resolution__word_second-part {
  left: 44%;
}
.resolution__word_third-part {
  left: 65%;
}
@media screen and (max-width: 449px) {
  .resolution__word {
    top: 70%;
  }
}
.resolution__pen {
  position: absolute;
  top: 60%;
  left: 30%;
  transition: all 0.15s;
}
@media screen and (max-width: 449px) {
  .resolution__pen {
    width: 14%;
    top: 63%;
  }
}

.sidebar {
  grid-area: 1/1/-1/4;
  display: grid;
  width: 100%;
  grid-template-rows: repeat(10, 1fr);
  grid-row-gap: 2rem;
  transition: all 0.2s;
}
@media screen and (max-width: 449px) {
  .sidebar {
    position: fixed;
    height: calc(100vh - 15rem);
    left: -100%;
    bottom: 0;
    grid-row-gap: 0;
    z-index: 2;
  }
  .sidebar-active {
    left: 0;
  }
}
.sidebar__menu {
  grid-row: 1/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, rgba(0, 65, 112, 0.45) 0%, rgba(0, 65, 112, 0) 100%);
}
.sidebar__menu-list {
  width: 14rem;
}
.sidebar__menu-item {
  position: relative;
  text-align: center;
  cursor: pointer;
  margin-bottom: 2rem;
}
@media screen and (max-width: 449px) {
  .sidebar__menu-item {
    margin-bottom: 3rem;
  }
}
.sidebar__menu-item:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 449px) {
  .sidebar__menu {
    grid-row: 1/6;
  }
}
.sidebar__banner {
  grid-row: 4/8;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  background: linear-gradient(180deg, rgba(0, 65, 112, 0.45) 0%, rgba(0, 65, 112, 0) 100%);
}
.sidebar__banner p {
  width: 14rem;
  text-align: center;
}
@media screen and (max-width: 449px) {
  .sidebar__banner {
    grid-row: 6/11;
  }
}
.sidebar__figure {
  grid-row: 8/-1;
  display: flex;
  align-items: center;
}
.sidebar__figure img {
  width: 100%;
}
@media screen and (max-width: 449px) {
  .sidebar__figure {
    display: none;
  }
}

.user-page-link__inactive {
  cursor: default;
  filter: blur(0.3rem);
}
.user-page-link__help-info {
  display: none;
  position: absolute;
  top: 200%;
  color: #571513;
}
.user-page-link:hover {
  transition: all 3s;
  filter: none;
}
.user-page-link:hover ~ .user-page-link__help-info {
  display: block;
}

.user-page {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 2rem;
}
.user-page__user-info {
  grid-column: 1/6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
@media screen and (max-width: 449px) {
  .user-page__user-info {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
}
.user-page__orders-content {
  grid-column: 6/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 449px) {
  .user-page__orders-content {
    grid-column: 1/-1;
  }
}
.user-page__search-content {
  display: flex;
  flex-direction: column;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 0.8rem;
}
.user-page__search-content input {
  width: 21rem;
}
@media screen and (max-width: 449px) {
  .user-page__search-content input {
    width: 18.5rem;
  }
}
.user-page__search-sorting-frame {
  height: -moz-min-content;
  height: min-content;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-page__sorting-content {
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.user-page__sorting-content select {
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  background-color: #A7C2D2;
}
@media screen and (max-width: 449px) {
  .user-page__sorting-content {
    flex-direction: column;
    justify-content: space-between;
  }
}
.user-page__user-orders {
  position: relative;
  min-height: 10rem;
  max-height: 76rem;
  width: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.25);
}
.user-page__user-orders-text {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.user-page__user-orders span {
  color: #571513;
}
.user-image {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  background-color: rgba(0, 65, 112, 0.05);
}
.user-image__image {
  width: 100%;
}
.user-image__game-winner {
  width: 5rem;
  position: absolute;
  top: -5%;
  right: 3%;
  transform: rotate(45deg);
}
@media screen and (max-width: 449px) {
  .user-image__game-winner {
    width: 4rem;
  }
}
.user-image__game-winner-message {
  display: none;
  width: 18rem;
  position: absolute;
  top: -7%;
  left: 103%;
  padding: 0.5rem;
  color: #A7C2D2;
  background-color: rgb(0, 65, 112);
  z-index: 1;
}
@media screen and (max-width: 449px) {
  .user-image__game-winner-message {
    left: 105%;
  }
}
.user-image__game-winner:hover ~ .user-image__game-winner-message {
  display: block;
}
.user-image__change-image-link, .user-image__save-image-link, .user-image__standart-image-link, .user-image__cancel-image-link {
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.user-image__save-image-link {
  color: #004170;
}
.user-image__cancel-image-link {
  color: #571513;
}
@media screen and (max-width: 449px) {
  .user-image {
    grid-column: 1/5;
  }
}
.user-details {
  padding: 1.5rem 0.5rem;
  background-color: rgba(0, 65, 112, 0.05);
}
.user-details__list {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 2rem;
}
@media screen and (max-width: 449px) {
  .user-details__list {
    gap: 0;
  }
}
.user-details__item {
  position: relative;
}
.user-details__item-header {
  margin-bottom: 1rem;
}
.user-details__geolocation-link {
  color: #004170;
  cursor: pointer;
}
.user-details__geolocation-help-icon {
  width: 2rem;
  position: absolute;
  top: 0;
  right: 12%;
  color: rgba(0, 0, 0, 0.6);
  cursor: default;
  padding: 0.1rem 0.7rem 0.1rem 0.7rem;
  border: 0.1rem solid rgba(0, 0, 0, 0.45);
}
.user-details__geolocation-help-icon:hover ~ .user-details__geolocation-help-text {
  display: block;
}
@media screen and (max-width: 449px) {
  .user-details__geolocation-help-icon {
    top: 55%;
  }
}
.user-details__geolocation-help-text {
  display: none;
  width: 21rem;
  position: absolute;
  top: -440%;
  left: 95%;
  padding: 0.5rem;
  color: #A7C2D2;
  background-color: rgb(0, 65, 112);
}
@media screen and (max-width: 449px) {
  .user-details__geolocation-help-text {
    left: -50%;
  }
}
.user-details__geolocation-house-icon {
  height: 2rem;
  background: url(../icons/House.svg) center/100% 100% no-repeat;
  opacity: 0.6;
  padding: 0;
  border: none;
}
.user-details__geolocation-house-text {
  width: -moz-max-content;
  width: max-content;
  top: 0;
}
@media screen and (max-width: 449px) {
  .user-details__geolocation-house-text {
    left: 0;
    top: 120%;
  }
}
.user-details__login, .user-details__first-name, .user-details__sur-name {
  position: relative;
  width: 75%;
  margin: 2rem auto 0.5rem;
}
.user-details__login input, .user-details__first-name input, .user-details__sur-name input {
  width: 100%;
}
.user-details__login-pattern, .user-details__first-name-pattern, .user-details__sur-name-pattern {
  position: absolute;
  right: 0;
  bottom: 110%;
  background: rgba(0, 65, 112, 0.1);
}
.user-details__login-helper, .user-details__first-name-helper, .user-details__sur-name-helper {
  position: absolute;
  min-width: -moz-max-content;
  min-width: max-content;
  top: 0;
  opacity: 0;
  color: #571513;
  transition: all 0.1s;
  z-index: -1;
}
@media screen and (max-width: 449px) {
  .user-details__login, .user-details__first-name, .user-details__sur-name {
    width: 90%;
    margin: 1.8rem auto 0;
  }
}
@media screen and (max-width: 449px) {
  .user-details {
    grid-column: 5/-1;
  }
}
.user-actions {
  padding: 1.5rem 0 1.5rem 0;
  background-color: rgba(0, 65, 112, 0.05);
}
.user-actions__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (max-width: 449px) {
  .user-actions__list {
    gap: 2rem;
  }
}
.user-actions__item {
  color: rgba(0, 0, 0, 0.45);
}
.user-actions__item:has(.user-actions__update-details-link) {
  color: #571513;
}
.user-actions__item span {
  cursor: pointer;
}
@media screen and (max-width: 449px) {
  .user-actions {
    grid-column: 1/-1;
    padding: 2rem 0 2rem 0;
  }
}

.author-reg-frame {
  width: 44rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 2rem;
  z-index: 3;
  padding: 1rem;
  background-color: #A7C2D2;
}
.author-reg-frame__header-list {
  grid-column: 1/-1;
  display: flex;
}
.author-reg-frame__header-item {
  margin-right: 2rem;
}
.author-reg-frame__header-item:last-child {
  margin-right: 0;
}
.author-reg-frame__actions-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  gap: 1rem;
}
.author-reg-frame__actions-list {
  display: flex;
  justify-content: space-between;
}
.author-reg-frame__actions-line {
  height: 0.7rem;
  background: linear-gradient(90deg, rgba(0, 65, 112, 0.55) 0%, rgba(0, 65, 112, 0.35) 25%, rgba(0, 65, 112, 0.05) 50%, rgba(0, 65, 112, 0.01) 75%, rgba(0, 65, 112, 0) 0%);
  transition: transform 0.1s ease-out;
}
.author-reg-frame__action-item, .author-reg-frame__closing-link {
  cursor: pointer;
}
.author-reg-frame__closing-link {
  position: relative;
  width: 55%;
  height: 55%;
}
.author-reg-frame__closing-link:hover ~ .author-reg-frame__help-text {
  display: block;
}
.author-reg-frame__symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.75;
  color: #571513;
}
.author-reg-frame__help-text {
  display: none;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: -55%;
  right: 0;
}
.author-reg-frame button {
  grid-column: 1/-1;
  margin: 0 auto;
}
@media screen and (max-width: 449px) {
  .author-reg-frame {
    width: 100%;
  }
}

.authorization-form, .registration-form {
  grid-column: 2/12;
  padding: 2.5rem 3.5rem;
  background: url(../img/Background.png) center/100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.authorization-form__helper, .registration-form__helper {
  position: absolute;
  min-width: -moz-max-content;
  min-width: max-content;
  top: 0;
  opacity: 0;
  color: #571513;
  transition: all 0.1s;
  z-index: -1;
}
.authorization-form__login, .authorization-form__password, .authorization-form__name, .authorization-form__password-check, .registration-form__login, .registration-form__password, .registration-form__name, .registration-form__password-check {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.authorization-form__login input, .authorization-form__password input, .authorization-form__name input, .authorization-form__password-check input, .registration-form__login input, .registration-form__password input, .registration-form__name input, .registration-form__password-check input {
  width: 18.5rem;
}
.authorization-form__login-pattern, .authorization-form__password-pattern, .authorization-form__name-pattern, .authorization-form__password-check-pattern, .registration-form__login-pattern, .registration-form__password-pattern, .registration-form__name-pattern, .registration-form__password-check-pattern {
  position: absolute;
  right: 0;
  bottom: 110%;
  background: rgba(0, 65, 112, 0.1);
}
.authorization-form__login-helper, .authorization-form__login-empty-helper, .authorization-form__login-coherence-helper, .authorization-form__password-helper, .authorization-form__password-empty-helper, .authorization-form__password-coherence-helper, .authorization-form__name-helper, .authorization-form__name-empty-helper, .authorization-form__name-coherence-helper, .authorization-form__password-check-helper, .authorization-form__password-check-empty-helper, .authorization-form__password-check-coherence-helper, .registration-form__login-helper, .registration-form__login-empty-helper, .registration-form__login-coherence-helper, .registration-form__password-helper, .registration-form__password-empty-helper, .registration-form__password-coherence-helper, .registration-form__name-helper, .registration-form__name-empty-helper, .registration-form__name-coherence-helper, .registration-form__password-check-helper, .registration-form__password-check-empty-helper, .registration-form__password-check-coherence-helper {
  position: absolute;
  min-width: -moz-max-content;
  min-width: max-content;
  top: 0;
  opacity: 0;
  color: #571513;
  transition: all 0.1s;
  z-index: -1;
}
.authorization-form__reset-input, .registration-form__reset-input {
  display: none;
}
@media screen and (max-width: 449px) {
  .authorization-form, .registration-form {
    grid-column: 1/-1;
  }
}

.button {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  background: linear-gradient(90deg, rgba(0, 65, 112, 0.35) 0%, rgba(0, 65, 112, 0) 100%);
  padding: 0.5rem 1rem 0.5rem 1rem;
  border: none;
  cursor: pointer;
}
.button::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 65, 112, 0) 0%, rgba(0, 65, 112, 0.35) 100%);
  padding: 0.5rem 1rem 0.5rem 1rem;
  border: none;
  content: "";
  transition: all 0.2s;
  opacity: 0;
}
@media screen and (max-width: 449px) {
  .button::after {
    display: none;
  }
}
.button:hover::after {
  opacity: 1;
}
.button:active {
  transform: translate(0.1rem, 0.1rem);
}
@media screen and (max-width: 449px) {
  .button {
    background: linear-gradient(90deg, rgba(0, 65, 112, 0.35) 0%, rgba(0, 65, 112, 0.02) 100%);
  }
  .button:active {
    transform: none;
  }
}
.button-denial {
  background: linear-gradient(90deg, rgba(87, 21, 19, 0.45) 0%, rgba(87, 21, 19, 0) 100%);
}
.button-denial::after {
  background: linear-gradient(90deg, rgba(87, 21, 19, 0) 0%, rgba(87, 21, 19, 0.45) 100%);
}
.button-disabled {
  opacity: 0.7;
  cursor: default;
}
.button-disabled:active {
  transform: none;
}
.button-disabled:hover::after {
  opacity: 0;
}

.feedback-delete-modal {
  width: -moz-max-content;
  width: max-content;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 3;
  padding: 2rem;
  background-color: #A7C2D2;
}
.feedback-delete-modal__question {
  padding: 2.5rem 3.5rem;
  background: url(../img/Background.png) center/100% 100% no-repeat;
}
.feedback-delete-modal__buttons {
  display: flex;
  gap: 3rem;
}
@media screen and (max-width: 449px) {
  .feedback-delete-modal {
    width: 100%;
  }
}

.hamburger {
  display: none;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 449px) {
  .hamburger {
    display: block;
  }
}
.hamburger__line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  height: 0.1rem;
  width: 1.2rem;
  background-color: #000000;
  transition: all 0.2s;
}
.hamburger__line::after, .hamburger__line::before {
  display: block;
  height: 0.1rem;
  width: 1.2rem;
  background-color: #000000;
  content: "";
}
.hamburger__line::after {
  transform: translateY(-0.5rem);
}
.hamburger__line::before {
  transform: translateY(0.4rem);
}
.hamburger__line-active {
  transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger__line-active::after {
  transform: rotate(90deg);
}
.hamburger__line-active::before {
  display: none;
}

.log-out-modal, .error-identification-modal, .future-info-modal {
  width: -moz-max-content;
  width: max-content;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 3;
  padding: 2rem;
  background-color: #A7C2D2;
}
.log-out-modal__question, .log-out-modal .error-identification-modal__message, .log-out-modal .future-info-modal__text, .error-identification-modal__question, .error-identification-modal .error-identification-modal__message, .error-identification-modal .future-info-modal__text, .future-info-modal__question, .future-info-modal .error-identification-modal__message, .future-info-modal .future-info-modal__text {
  padding: 2.5rem 3.5rem;
  background: url(../img/Background.png) center/100% 100% no-repeat;
}
.log-out-modal__buttons, .error-identification-modal__buttons, .future-info-modal__buttons {
  display: flex;
  gap: 3rem;
}
.log-out-modal span, .error-identification-modal span, .future-info-modal span {
  color: #571513;
}
@media screen and (max-width: 449px) {
  .log-out-modal, .error-identification-modal, .future-info-modal {
    width: 100%;
  }
}

.password-change-modal {
  width: -moz-max-content;
  width: max-content;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 3;
  padding: 2rem;
  background-color: #A7C2D2;
}
.password-change-modal__buttons {
  display: flex;
  gap: 5rem;
}
@media screen and (max-width: 449px) {
  .password-change-modal {
    width: 100%;
  }
}
.password-change-form {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding: 2.5rem 3.5rem;
  background: url(../img/Background.png) center/100% 100% no-repeat;
}
.password-change-form input {
  width: 21rem;
}
.password-change-form__password-old, .password-change-form__password-new, .password-change-form__password-check {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.password-change-form__password-old-helper, .password-change-form__password-old-empty-helper, .password-change-form__password-old-coherence-helper, .password-change-form__password-new-helper, .password-change-form__password-new-empty-helper, .password-change-form__password-new-coherence-helper, .password-change-form__password-check-helper, .password-change-form__password-check-empty-helper, .password-change-form__password-check-coherence-helper {
  position: absolute;
  min-width: -moz-max-content;
  min-width: max-content;
  top: 0;
  opacity: 0;
  color: #571513;
  transition: all 0.1s;
  z-index: -1;
}
@media screen and (max-width: 449px) {
  .password-change-form__password-old-helper, .password-change-form__password-old-empty-helper, .password-change-form__password-old-coherence-helper, .password-change-form__password-new-helper, .password-change-form__password-new-empty-helper, .password-change-form__password-new-coherence-helper, .password-change-form__password-check-helper, .password-change-form__password-check-empty-helper, .password-change-form__password-check-coherence-helper {
    top: 55%;
  }
}
@media screen and (max-width: 449px) {
  .password-change-form__password-old, .password-change-form__password-new, .password-change-form__password-check {
    flex-direction: column;
    gap: 1rem;
  }
}
.password-change-form__reset-input {
  display: none;
}
@media screen and (max-width: 449px) {
  .password-change-form {
    gap: 3rem;
  }
}

.sidebar-arrow {
  display: none;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 449px) {
  .sidebar-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.sidebar-arrow-active {
  transform: rotateY(180deg);
}

.user-delete-modal {
  width: -moz-max-content;
  width: max-content;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 3;
  padding: 2rem;
  background-color: #A7C2D2;
}
.user-delete-modal__buttons {
  position: relative;
  display: flex;
  gap: 3rem;
}
.user-delete-modal span {
  color: #571513;
}
@media screen and (max-width: 449px) {
  .user-delete-modal {
    width: 100%;
  }
}

.user-delete-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 3.5rem;
  background: url(../img/Background.png) center/100% 100% no-repeat;
}
.user-delete-form__password {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.user-delete-form__password input {
  width: 18.5rem;
  height: 2.2rem;
  padding: 0.2rem 1rem;
  border: none;
}
.user-delete-form__password-helper {
  position: absolute;
  min-width: -moz-max-content;
  min-width: max-content;
  top: 0;
  opacity: 0;
  color: #571513;
  transition: all 0.1s;
  z-index: -1;
}
.user-delete-form__reset-input {
  display: none;
}

@keyframes nav-open {
  from {
    transform: translateX(21%);
    opacity: 0.1;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes nav-close {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translateX(21%);
    opacity: 0.1;
  }
}
@keyframes letter-input-wrong {
  50% {
    transform: scale(1.9) perspective(500px) rotateY(90deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes letter-input-before-scale {
  50% {
    transform: scale(2.5);
  }
  100% {
    opacity: 0;
  }
}
@keyframes resolution-word-emersion {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes feedback-frame-animation-open {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: none;
  }
}
@keyframes feedback-frame-animation-close {
  0% {
    transform: none;
  }
  100% {
    transform: rotateX(90deg);
  }
}
@keyframes feedback-helper-emersion {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: none;
  }
}
.invisible {
  display: none;
}

.mobile-invisible {
  display: none;
}

.scrolling-ban {
  overflow: hidden;
}

.modal {
  position: relative;
  filter: blur(0.75rem);
  opacity: 0.25;
  z-index: -1;
  cursor: default;
}

.modal-overlay {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #000000;
  opacity: 0.3;
}

.rotate-active {
  transform: perspective(50rem) rotatey(180deg);
}

input.input-wrong {
  border: 0.2rem solid #571513;
}