@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  letter-spacing: -3px;
  src: url(../Bricolage.woff2) format('woff2'), local(arial), local(helvetica), local(sans-serif);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  letter-spacing: -2px;
  src: url(../Inter.woff2) format('woff2'), local(arial), local(helvetica), local(sans-serif);
}
:root {
  view-transition-name: default;

  --text-color: hsl(200, 44%, 12%);
  --highlight: hsl(182, 49%, 28%);
  --CTA-color: hsl(229, 79%, 17%);
  --CTA-light-color: hsl(0, 0%, 100%);
  --faded-CTA-color: hsla(0, 0%, 100%, 0.095);
  --box-shadow: -.5px 3px 8px hsla(0, 0%, 47%, 0.2);
  --hover-box-shadow: -.5px 7px 15px hsla(0, 0%, 47%, 0.2);

  --purple-gradient-text: linear-gradient(to right, #c36af6, hsl(263, 98%, 62%));

  --rounded: 10px;
  --line-color: hsl(219, 100%, 63%, 80%);
  --blob-color: linear-gradient(to right, hsla(197, 92%, 76%, 0.5) ,hsla(263, 95%, 75%, 0.5));
	--blob-size: 240px;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(default),
  ::view-transition-new(default) {
    animation: fade 0.8s ease-in-out both;
  }
}

@keyframes fade {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

html {
  scroll-behavior: smooth;
}

body{
background: #f7e8ff;
background: linear-gradient(90deg,rgba(247, 232, 255, 0.25) 0%, rgba(239, 212, 255, 0.21) 50%, rgba(232, 191, 255, 0.21) 100%);  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
  font-size: 24px;
  font-family: 'Inter', sans-serif;
}

em {
  font-family: 'Bricolage', sans-serif;
  background: var(--purple-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

h1 {
  margin: 1rem 0 1.5rem 0;
  line-height: 1.2;
  font-size: clamp(3.3rem, 7vw, 6rem);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 3.5rem); 
}

h3 {
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}

p {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.button {
  width: auto;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--rounded);
  background: var(--purple-gradient-text);
  color: var(--CTA-light-color);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}

.secondary {
  position: relative;
  background: white;
  color: var(--CTA-color);
  border: 1px solid var(--CTA-color);
}

#blob {
	animation: rotate360 20s infinite;
	background: var(--blob-color);
	filter: blur(calc(var(--blob-size)/2.15));	
	width: var(--blob-size);
	height: var(--blob-size);
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 50%;
  pointer-events: none;

}

#blob-blur {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -2;
	backdrop-filter: blur;
  pointer-events: none;
}

@keyframes rotate360 {
	from { rotate: 0deg; }
	50% { scale: 1 1.15; }
	to { rotate: 360deg; }
}

ul, ol {
  padding: 0;
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}
@media (max-width: 1024px) {
  body {
    background: hsl(0, 0%, 96%);
  }

  #blob, #blob-blur {
    display: none !important; 
    width: 0; 
    height: 0; 
    overflow: hidden; 
  }
}

@media (min-width: 1100px) {
  h1 {
    max-width: 20ch;
  }

}