:root{
  --clr-accent-500: hsl(192, 93%, 44%);
  --clr-accent-400: hsl(192, 93%, 54%);
  --clr-accent-200: hsl(192, 93%, 64%);
  --clr-accent-100: hsl(192, 93%, 84%);

  --clr-primary-300: hsl(317, 98%, 72%);
  --clr-primary-450: hsl(317, 98%, 62%);
  --clr-primary-400: #FD4ECC;
  --clr-primary-500: hsl(317, 98%, 42%);

  --clr-neutral-900:hsl(220, 23%, 8%);
  --clr-neutral-800:hsl(220, 23%, 18%);
  --clr-neutral-400:hsl(220, 23%, 33%);
  --clr-neutral-300:hsl(0, 0%, 70%);
  --clr-neutral-200: hsl(0, 0%, 90%);
  --clr-neutral-100: hsl(0, 0%, 100%);

  --ff-primary:"Montserrat", sans-serif;

  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;
  --fw-italic: italic;

  --fs-300: 0.8rem;
  --fs-400: 0.875rem;
  --fs-500: 0.95rem;
  --fs-550: 1rem;
  --fs-600: 1.1rem;
  --fs-650: 1.4rem;
  --fs-700: 1.8rem;
  --fs-800:2.5rem;
  --fs-900: 3.5rem;

  --fs-body: var(--fs-400);
  --fs-primary-heading: var(--fs-800);
  --fs-secondary-heading: var(--fs-700);
  --fs-nav: var(--fs-550);
  --fs-button: var(--fs-300);

  --size-100:0.25rem;
  --size-200:0.5rem;
  --size-300:0.75rem;
  --size-400:1rem;
  --size-500:1.5rem;
  --size-600:2rem;
  --size-700:3rem;
  --size-800:4rem;
  --size-900:5rem;
  --size-1000:12rem;
}


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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* 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 body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: "Roboto", sans-serif;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
  font-family: "Montserrat";
}

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

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

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


.wrapper{
   --max-width:1100px;
  --padding:2rem;

  margin-inline: auto;
  width: min(var(--max-width), 100% - (var(--padding) *2));
}

.auto-grid{
  --auto-grid-min-size: 14rem;
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--auto-grid-min-size, 25%), 1fr)
    );
    grid-gap: 1rem;
}



/* Kártyák */
.card {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  background-color: #fff;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.card-content{
  padding:0.7rem 1rem;

}
.customname-container{
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block: 1rem;
}
.name-item{
  width: max-content;
  border-radius: 10rem;
  padding: 0.2rem 0.4rem;
  background-color: hsl(146, 50%, 36%);

  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
}
.meta{
  display: grid;
  gap: 0.5rem;
}


/* Search mező */
#search {
  position: sticky;
  top:1rem;
  z-index: 9;
  display: block;
  width: 100%;
  margin-block: 1rem;
  padding: 1rem;
  font-size: 1em;
  border-radius: 10rem;
  border: 1px solid #ccc;
  
  &:hover, &:focus-visible{
    border: 1px solid red;
  }
}


.fw-bold{
  font-weight: var(--fw-bold);
}
.fw-semi-bold{
  font-weight: var(--fw-semi-bold);
}
.fw-regular{
  font-weight: var(--fw-regular);
}
.fw-italic{
  font-style: var(--fw-italic);
}

.fs-primary-heading{
  font-size: var(--fs-primary-heading);
  line-height: 1.1;

  span{
    /*color: var(--clr-accent-500);*/
    display: block;
    width: max-content;
    background: linear-gradient(45deg, var(--clr-accent-500), var(--clr-primary-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.fs-secondary-heading{
  font-size: var(--fs-secondary-heading);
}
.fs-300{
  font-size: var(--fs-300);
}
.fs-400{
  font-size: var(--fs-400);
}
.fs-500{
  font-size: var(--fs-500);
}
.fs-600{
  font-size: var(--fs-600);
}

.padding-block-1000{
  padding-block: var(--size-1000);
}
.padding-block-900{
  padding-block: var(--size-900);
}
.padding-block-700{
  padding-block: var(--size-700);
}
.padding-block-400{
  padding-top: var(--size-700);
  padding-bottom: var(--size-400);
}
.padding-top-200{
  padding-top: var(--size-200);
}
.padding-bottom-400{
  padding-bottom: var(--size-400);
}