@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");

:root {
  --body-background: #0e0e0e;
  --color-logo: #ff5b50;
  --card-color: #252525;
  --text-color: #fff;
  --subtitle-color: #5a5757;
  --black-text: #000;
  --color-input: #0d0d0d;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}

@media (min-width: 481px) {
  .macro-one {
    position: relative;
    background-image: url(./assets/background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3.5625rem 0.8rem 0;
  }

  .menu-header {
    width: 21.3125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-header a,
  .info1 p {
    font-family: "Montserrat", sans-serif;
    font-size: 1.125rem;
    font-weight: normal;
    color: var(--text-color);
  }

  #button-metaMask {
    width: 14.375rem;
    height: 3.125rem;
    background-image: url(./assets/logo_MetaMask.svg);
    background-position: 0.5rem, left;
    background-repeat: no-repeat;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--black-text);
    cursor: pointer;
  }

  .introduction {
    width: 77rem;
    margin: 5.9375rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .info1 {
    width: 24.5rem;
  }

  .info1 p {
    margin-bottom: 3.4375rem;
  }

  .avatars {
    height: 5.4375rem;
    display: flex;
    align-items: baseline;
  }

  .number-by-avatars {
    position: relative;
    bottom: 1.5rem;
  }
  .number-by-avatars p {
    margin-bottom: 0;
  }

  .info2 {
    width: 37rem;
  }
  .info2 p {
    font-family: "Montserrat", sans-serif;
    font-size: 3.125rem;
    font-weight: 700;
    color: var(--text-color);
  }

  .info2 span {
    font-family: "Montserrat", sans-serif;
    font-size: 3.125rem;
    font-weight: 700;
    color: var(--color-logo);
  }

  .gallery {
    width: 77rem;
    margin: 0 auto;
  }

  .gallery-part-one {
    margin-bottom: 3.75rem;
  }

  .macro-two {
    background-color: var(--body-background);
    height: 41.25rem;
  }

  .statistics-container {
    display: flex;
  }

  .statistics {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 8.3125rem 4.1875rem 8.3125rem 0.8rem;
    height: 24.125rem;
  }

  .statistics-one p:nth-child(1),
  .statistics-two p:nth-child(1),
  .statistics-three p:nth-child(1) {
    font-family: "Montserrat", sans-serif;
    font-size: 3.125rem;
    font-weight: 500;
    color: var(--text-color);
  }

  .statistics-one p:nth-child(2),
  .statistics-two p:nth-child(2),
  .statistics-three p:nth-child(2) {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--subtitle-color);
  }
  .statistics-info {
    display: flex;
    flex-direction: column;
    border-left: solid 0.125rem var(--subtitle-color);
  }

  .container-statistics-infos {
    display: flex;
    width: 57.5rem;
    height: 13.375rem;
    margin: 4.4375rem 4.25rem;
  }

  .statistics-info1,
  .statistics-info2 {
    display: flex;
    flex-direction: column;
    width: 27.1875rem;
    height: 7.125rem;
    font-family: "Montserrat", sans-serif;
    font-size: 1.125rem;
    font-weight: normal;
    color: var(--text-color);
  }

  .statistics-info1-highlight,
  .statistics-info2-highlight {
    font-family: "Montserrat", sans-serif;
    font-size: 1.125rem;
    font-weight: normal;
    color: var(--color-logo);
  }

  .statistics-info1 a,
  .statistics-info2 a {
    margin-top: 3.9375rem;
    font-family: "Montserrat", sans-serif;
    font-size: 1.125rem;
    font-weight: normal;
    color: var(--text-color);
    text-decoration: underline;
  }

  .statistics-banner {
    width: 45.65rem;
  }

  .statistics-banner img {
    object-fit: cover;
  }

  .macro-three {
    background-color: var(--body-background);
  }

  .mostly-title {
    padding: 9.375rem 0.8rem 0;
  }

  .mostly-title span {
    font-family: "Montserrat", sans-serif;
    font-size: 3.125rem;
    font-weight: 700;
    color: var(--color-logo);
  }

  .mostly-title p {
    font-family: "Montserrat", sans-serif;
    font-size: 3.125rem;
    font-weight: 700;
    color: var(--text-color);
  }

  .mostly {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 31.875rem;
    margin: 9.375rem 0.8rem 0;
  }

  .mostly-one,
  .mostly-two,
  .mostly-three,
  .mostly-four {
    margin-bottom: 3.125rem;
  }

  .mostly-one-title,
  .mostly-one-subtitle,
  .mostly-two-title,
  .mostly-two-subtitle,
  .mostly-three-title,
  .mostly-three-subtitle,
  .mostly-four-title,
  .mostly-four-subtitle {
    display: flex;
    justify-content: space-between;
  }

  .mostly-one-title,
  .mostly-two-title,
  .mostly-three-title,
  .mostly-four-title {
    font-family: "Montserrat", sans-serif;
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 2.75rem;
  }

  .mostly-one-subtitle p:nth-child(1),
  .mostly-two-subtitle p:nth-child(1),
  .mostly-three-subtitle p:nth-child(1),
  .mostly-four-subtitle p:nth-child(1) {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--subtitle-color);
    margin-bottom: 1.625rem;
  }

  .mostly-one-subtitle p:nth-child(2),
  .mostly-two-subtitle p:nth-child(2),
  .mostly-three-subtitle p:nth-child(2),
  .mostly-four-subtitle p:nth-child(2) {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--color-logo);
  }

  .macro-four {
    background-color: var(--body-background);
    padding: 0 .8rem;
  }

  .the-most-artist-title {
    text-align: center;
    padding: 6.3125rem 7.5rem;
  }

  .the-most-artist-title p {
    font-family: "Montserrat", sans-serif;
    font-size: 3.125rem;
    font-weight: 700;
    color: var(--text-color);
  }

  .the-most-artist-title span {
    font-family: "Montserrat", sans-serif;
    font-size: 3.125rem;
    font-weight: 700;
    color: var(--color-logo);
  }

  .the-most-artist-gallery {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 6.9375rem;
    column-gap: 6.9375rem;
  }

  .artist-one,
  .artist-two,
  .artist-three,
  .artist-four,
  .artist-five,
  .artist-six {
    width: 20.875rem;
    height: 9.375rem;
    background-color: var(--card-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .artist-one:hover,
  .artist-two:hover,
  .artist-three:hover,
  .artist-four:hover,
  .artist-five:hover,
  .artist-six:hover {
    background-color: var(--color-logo);
    cursor: pointer;
  }

  .artist-one-info,
  .artist-two-info,
  .artist-three-info,
  .artist-four-info,
  .artist-five-info,
  .artist-six-info {
    text-align: left;
  }

  .artist-one-info p:nth-child(1),
  .artist-two-info p:nth-child(1),
  .artist-three-info p:nth-child(1),
  .artist-four-info p:nth-child(1),
  .artist-five-info p:nth-child(1),
  .artist-six-info p:nth-child(1) {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--text-color);
    margin-bottom: 0.625rem;
  }

  .artist-one-info p:nth-child(2),
  .artist-two-info p:nth-child(2),
  .artist-three-info p:nth-child(2),
  .artist-four-info p:nth-child(2),
  .artist-five-info p:nth-child(2),
  .artist-six-info p:nth-child(2) {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--color-logo);
  }

  .link-more-artists {
    margin-top: 3.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 9.4375rem;;
  }

  .link-more-artists p{
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--text-color);
  }

  .link-more-artists a{
    margin-left: 0.8125rem;
  }

  .macro-five {
    background-color: var(--card-color);
    
  }

  .footer-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5.5rem .8rem 3.75rem ;
    border-bottom: solid 0.125rem var(--subtitle-color);
  }

  .footer-1 a {
    width: 5rem;
    height: 5rem;
    background-color: var(--color-logo);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer-2 {
    display: flex;
    border-bottom: solid 0.125rem var(--subtitle-color);
  }

  .news {
    padding: 0 .8rem;
    border-right: solid 0.125rem var(--subtitle-color);
  }
  .news p{
    width: 21.875rem;
    font-family: "Montserrat", sans-serif;
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 4.1875rem 0 1.5625rem;
  }

  .news span {
    font-family: "Montserrat", sans-serif;
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--color-logo);
  }

    .form-email {
        margin-bottom: 5.125rem;
    }

    .form-email form input {
        width: 17.5rem;
        height: 4.125rem;
        background-color: var(--color-input);
        font-family: "Montserrat", sans-serif;
        font-size: 1.25rem;
        color: var(--subtitle-color);
        border: none;
        padding: 1.25rem;
    }

    .form-email form button {
        width: 7.625rem;
        height: 4.125rem;
        margin-left: -.2rem;
        font-family: "Montserrat", sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--black-text);
        cursor: pointer;
    }

    .links {
        width: 52rem;
        display: flex;
        justify-content: space-around;
        padding: 4.625rem 7.625rem;
    }

    .links-one, .links-two, .links-three {
        display: flex;
        flex-direction: column;
    }

    .links-one a:nth-child(1), .links-two a:nth-child(1), .links-three a:nth-child(1){
        font-family: "Montserrat", sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .links-one a, .links-two a, .links-three a {
        font-family: "Montserrat", sans-serif;
        font-size: 1.25rem;
        font-weight: normal;
        color: var(--subtitle-color);
        margin: .9375rem 0;
    }

    .footer-3 {
        padding: 4.3125rem .8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-3 p {
        font-family: "Montserrat", sans-serif;
        font-size: 1.25rem;
        font-weight: normal;
        color: var(--subtitle-color);
    }

    .social-midia {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 16.875rem;
    }
}