body {
  margin: 7%;
  font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

@media screen and (min-width: 1440px) and (max-width: 3120px) {
  .Container {
    max-width: 350px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    margin: 50px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }

  span {
    font-size: 14px;
  }

  p {
    font-size: 16px;
  }

  .Container > span,
  p {
    color: #737373;
  }

  .Button {
    background-color: #6366f1;
    color: white;
    padding: 10px 110px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  .Button:hover {
    background-color: #4f46e5;
  }
  .Button:focus {
    outline: 2px solid #6366f1;
  }
  .Button:visited {
    background-color: #6366f1;
  }
  .social-icons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  a i {
    color: #6366f1;
    font-size: 20px;
    margin: 10px;
    transition: color 0.3s;
    outline: none;
  }
  a:hover i {
    transform: scale(1.1);
  }
  a:focus i {
    outline: 2px solid #6366f1;
  }
  a:visited i {
    color: #6366f1;
  }
}


@media screen and (min-width: 768px) and (max-width: 1440px) {
  .Container {
    max-width: 350px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    margin: 50px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }

  span {
    font-size: 14px;
  }

  p {
    font-size: 16px;
  }

  .Container > span,
  p {
    color: #737373;
  }

  .Button {
    background-color: #6366f1;
    color: white;
    padding: 10px 110px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  .Button:hover {
    background-color: #4f46e5;
  }
  .Button:focus {
    outline: 2px solid #6366f1;
  }
  .Button:visited {
    background-color: #6366f1;
  }
  .social-icons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  a i {
    color: #6366f1;
    font-size: 20px;
    margin: 10px;
    transition: color 0.3s;
    outline: none;
  }
  a:hover i {
    transform: scale(1.1);
  }
  a:focus i {
    outline: 2px solid #6366f1;
  }
  a:visited i {
    color: #6366f1;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .Container {
    max-width: 350px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    margin: 50px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }

  span {
    font-size: 14px;
  }

  p {
    font-size: 16px;
  }

  .Container > span,
  p {
    color: #737373;
  }

  .Button {
    background-color: #6366f1;
    color: white;
    padding: 10px 110px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  .Button:hover {
    background-color: #4f46e5;
  }
  .Button:focus {
    outline: 2px solid #6366f1;
  }
  .Button:visited {
    background-color: #6366f1;
  }
  .social-icons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  a i {
    color: #6366f1;
    font-size: 20px;
    margin: 10px;
    transition: color 0.3s;
    outline: none;
  }
  a:hover i {
    transform: scale(1.1);
  }
  a:focus i {
    outline: 2px solid #6366f1;
  }
  a:visited i {
    color: #6366f1;
  }
}

@media screen and (min-width: 375px) and (max-width: 812px) {
  .Container {
    max-width: 350px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    margin: 50px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }

  span {
    font-size: 14px;
  }

  p {
    font-size: 16px;
  }

  .Container > span,
  p {
    color: #737373;
  }

  .Button {
    background-color: #6366f1;
    color: white;
    padding: 10px 110px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  .Button:hover {
    background-color: #4f46e5;
  }
  .Button:focus {
    outline: 2px solid #6366f1;
  }
  .Button:visited {
    background-color: #6366f1;
  }
  .social-icons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  a i {
    color: #6366f1;
    font-size: 20px;
    margin: 10px;
    transition: color 0.3s;
    outline: none;
  }
  a:hover i {
    transform: scale(1.1);
  }
  a:focus i {
    outline: 2px solid #6366f1;
  }
  a:visited i {
    color: #6366f1;
  }
}

.credits {
  color: #777;
  position: fixed;
  bottom: 24px;
  left: 24px;
  font-size: 11px;
  text-align: center;
}

.credits a {
  color: #000;
  font-weight: bold;
}