/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* make form elements inherit some styles*/
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*Variables*/

:root {


  --Green: hsl(75, 94%, 57%);

  --White: hsl(0, 0%, 100%);

  --Grey700: hsl(0, 0%, 20%);
  --Grey800: hsl(0, 0%, 12%);
  --Grey900: hsl(0, 0%, 8%);

}

/*Font*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {

  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Main Code */



body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--Grey900);

}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--Grey800);
  padding: 2.3em 0;
  border-radius: 2.5%;
  width: clamp(250px, 30%, 410px);

}

.container__user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--White);
}


.user__Img {
  max-width: 25%;
  border-radius: 50%;
  margin: 1.2rem 0 1.5rem 0;
}
h1 {
  font-size: clamp(1.3rem, 2.3vw , 1.4rem);

  font-weight: bold;
}

.user__Address {
  color: var(--Green);
  font-weight: bold;
  font-size: 1rem;
}

.user__Traces {
  padding: 1.3em;
  font-weight: 300;
  font-stretch: 2.2em;
}

.container__links{
  display: flex;
  flex-direction: column;
  width: 80%;
  gap:0.9em;
}

a {
  background-color: var(--Grey700);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  padding: 0.7em 3em;
  transition: background-color 0.3s, color 0.3s;
}

a:hover {
  background-color: var(--Green);
  color: black;
}