/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input {
    /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select {
    /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }
@font-face {
    src: url(ed17840f58cc8c61635a.woff2) format("woff2"),
      url(87c06fd2ac7128c9a81d.woff) format("woff");
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
  }
  
  @font-face {
    src: url(bd097ceff83f90802a12.woff2) format("woff2"),
      url(0d6f7c99e635f1fec4c9.woff) format("woff");
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
  }
  
  @font-face {
    src: url(01f03178adde434fc9fa.woff2) format("woff2"),
      url(44e343ff76a98508d309.woff) format("woff");
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
  }
.page {
    background:  #000000;
    font-family: 'Inter', Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
.page__container {
    margin: 0 auto;
    max-width: 1280px;
    box-sizing: border-box;
  }
.header {
  max-width: 880px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(84, 84, 84, 0.7);
}

@media screen and (max-width: 767px) {
  .header {
    max-width: 320px;
  }
}
.header__logo {
    margin: auto 0;
    margin-top: 45px;
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .header__logo {
      width: 103px;
      height: 24px;
      margin-left: 27px;
      margin-top: 28px;
      margin-bottom: 30px;
    }
  }
.profile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 42px;
  max-width: 880px;
}

@media screen and (max-width: 767px) {
  .profile {
    display: block;
    padding: 0 19px;
    margin-top: 42px;
  }
}
.profile__content {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 767px) {
.profile__content {
    display: block;
    width: 100%;
    margin: 0 auto;
    }
}
.profile__avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: auto;
}
.profile__image {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    .profile__image {
        display: block;
        margin: 0 auto;
    }
}
.profile__avatar-edit-button {
    background-color: transparent;
    position: absolute;
    border: none;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    left: 0;
    top: 0;
    padding: 0;
    -o-object-fit: cover;
    object-fit: cover;
    transition: .2s;
}

.profile__avatar-edit-button:hover {
    background-color: rgba(0, 0, 0, .8);
    background-image: url(8667ac4a523e8fc42e59.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 26px;
    cursor: pointer;
}
.profile__edit-button {
    background-image: url(8667ac4a523e8fc42e59.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-color: #000000;
    margin-left: 18px;
    margin-top: 37px;
}

.profile__edit-button:hover {
    opacity: 0.6;
  }

@media screen and (max-width: 767px) {
    .profile__edit-button {
        width: 18px;
        height: 18px;
        margin-top: 30px;
        margin-left: 10px;
        background-size: 8px 8px;
    }
}
.profile__info {
    margin: 0;
    margin-top: 22px;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .profile__info {
        margin-left: 30px;
    }
}
.profile__title {
    margin: 0 auto;
    font-style: normal;
    font-weight: 500;
    font-size: 42px;
    line-height: 48px;
    list-style-type: none;
    margin-bottom: 16px;

    color: #FFFFFF;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 336px;
}

@media screen and (max-width: 767px) {
    .profile__title {
        font-size: 27px;
        line-height: 33px;
        text-align: center;
        margin-bottom: 14px;
    }
}
.profile__subtitle {
    margin: 0 auto;
    margin-bottom: 25px;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    list-style-type: none;
    

    color: #FFFFFF;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 336px;
}

@media screen and (max-width: 767px) {
    .profile__subtitle {
        font-size: 14px;
        line-height: 17px;
        text-align: center;
        margin: 0;
    }
}
.profile__card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    margin-left: 30px;
}

@media screen and (max-width: 767px) {
    .profile__card {
        width: 100%;
        justify-content: center;
        margin: auto;
    }
}
.profile__add-button {
    background-image: url(bed8c136e13907f5eefb.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-sizing: border-box;
    width: 150px;
    height: 50px;
    background-color: #000000;
    margin: auto 0;
    border-radius: 2%;
}

.profile__add-button:hover {
    opacity: 0.6;
  }

@media screen and (max-width: 767px) {
    .profile__add-button {
        width: 282px;
        margin: 36px auto;
        display: block;
        background-size: 16px 16px;
    }
}

.elements {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, calc(33.3333333% - 15px));
  justify-content: center;
  row-gap: 17px;
  column-gap: 20px;
  margin-top: 51px;
  max-width: 880px;
}

@media screen and (max-width: 909px) {
  .elements {
      grid-template-columns: repeat(2, 282px);
  }
}

@media screen and (max-width: 767px) {
  .elements {
    grid-template-columns: 282px;
    margin: 0;
  }
}
.card {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.card__button-like {
    border: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url(1ad06e85f169668a1f36.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 22px;
    height: 19px;
    margin-right: 20px;
}

.card__button-like:hover {
    opacity: 0.6;
  }
.card__button-like_active {
    background-image: url(e787eeb70bb65b7b453a.svg);
}
.card__image {
    width: 100%;
    height: 282px;
    margin: 0;
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
}
.card__info {
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 210px;
    color: #000000;

    padding-left: 21px;
    margin-top: 25px;
    margin-bottom: 30px;
}
.card__item {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    border-radius: 0 0 10px 10px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.card__trash-button {
    position: absolute;
    border: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url(a274c87c0f6b553b47ad.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 19px;
    height: 19px;
    margin: 18px 15px 0 0;
    align-self: flex-end;
}

.card__trash-button:hover {
    opacity: 0.6;
  }
.card__like-box {
    display: flex;
    flex-direction: column;
}
.card__like-count {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #000000;
    width: 22px;
    margin: 0;
    margin-top: 3px;
}
.footer {
    margin: 65px 200px 60px;
    height: 18px;
}

@media screen and (max-width: 767px) {
    .footer {
        max-width: 320px;
        margin: 48px 19px 36px;
    }
}
.footer__copyright {
  align-self: flex-start;
  color: rgba(84, 84, 84, 1);
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 22px;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .footer__copyright {
    margin-top: 16px;
    font-size: 14px;
    line-height: 17px;
  }
}
.popup {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s, linear 0.5s;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.popup__close {
    background-repeat:no-repeat;
    background-image: url(973e77374abfb705de40.svg);
    background-position: center;
    max-width: 100%;
    max-height: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    right: -33px;
    top: -33px;
    padding: 0;
    width: 32px;
    height: 32px;
}

.popup__close:hover {
    opacity: 0.6;
}

@media screen and (max-width: 490px) {
    .popup__close {
        top: -36px;
        width: 20px;
        height: 20px;
        right: 0;
    }
}
/*
.popup__form {
    display: flex;
    flex-direction: column;
} */
.popup__title {
  padding-left: 36px;
  padding-bottom: 54px;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 29px;
  margin: 0;
}

@media screen and (max-width: 490px) {
  .popup__title {
    font-size: 18px;
    line-height: 22px;
    margin-left: 22px;
    margin-bottom: 60px;
    padding: 0;
  }
}
.popup__text {
  width: 358px;
  margin: auto;
  margin-left: 36px;
  border: 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  height: 27px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
}

.popup__text:focus {
  outline-color: rgba(0, 0, 0, 1);
}

@media screen and (max-width: 490px) {
  .popup__text {
    width: 238px;
    margin-left: 22px;
  }
}
.popup__submit {
  width: 358px;
  height: 50px;
  color: #FFFFFF;
  background-color: black;
  background-repeat: no-repeat;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  margin-top: 17px;
}

.popup__submit:hover {
  opacity: 0.8;
}

@media screen and (max-width: 490px) {
  .popup__submit {
    width: 238px;
    font-size: 14px;
    line-height: 17px;
  }
}
.popup__position {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
    position: relative;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
}
.popup__container {
  padding-top: 34px;
  padding-bottom: 37px;
  background-color: white;
  width: 430px;
  border-radius: 10px;
  margin: auto;
  cursor: default;
}

@media screen and (max-width: 490px) {
  .popup__container {
    width: 282px;
    padding: 25px 0;
  }
}
.popup_opened {
    visibility: visible;
    opacity: 1;
}
.popup_image {
    background-color: rgba(0, 0, 0, 0.9);
}
.popup__viewer_image {
    margin: 0 auto;
    max-width: 75vw;
    max-height: 75vh;
}
.popup__viewer_title {
    margin: 0;
    margin-top: 10px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    color: white;
}
.popup__block {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
    position: relative;
}
.popup__close_image {
    right: -40px;
    top: -40px;
}

@media screen and (max-width: 490px) {
    .popup__close_image {
        top: -36px;
        width: 20px;
        height: 20px;
        right: 0;
    }
}
.popup__card {
    margin: 0 auto;
    cursor: default;
    background-color: transparent;
}
.popup__submit_invalid {
    background: white;
    border: 1px solid #E5E5E5;
    color: #E5E5E5;
}
.popup__form-field {
  display: flex;
  flex-direction: column;
}
.popup__text_invalid {
    border-bottom: 1px solid #FF0000;
  }
.error {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    color: #FF0000;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 5px;
    text-align: left;
    width: 358px;
    visibility: hidden;
}

@media screen and (max-width: 490px) {
    .error {
      width: 238px;
    }
  }
.error_active {
    visibility: visible;
}
/* PAGE */

/* HEADER */

/* PROFILE */

/* ELEMENTS */

/* CARDS */

/* FOOTER */

/* POPUP */

/* ERROR's */