/* CSS goes here: */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
  font-family: sans-serif;
  /* font-family: -apple-system; */
/* font-family: "Helvetica Neue", Helvetica; */
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400; or 400 */
}



:root{
  --background: #F8F8F8;
  --component-bg: #FCFCFC;
  --box-shadow: #e6e6e6;
  --text-strongest: #171717;
  --text-primary: #8F8F8F;
  --text-secondary: #aaaaaa;
  --xl-text: 24px;
  --large-text: 16px;
  --medium-text: 12px;
  --small-text: 8px;
}

.svg1 path {
  fill: var(--text-primary);
}

body{
background-color: var(--background);
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--background);
  padding: 35px;
}

.svgclass{
 display: flex;
 height: 90%;
}

.component{
  display: flex;
  flex-direction: row;
  gap: 14px;
  background-color: var(--component-bg);
  padding: 8px 4px 4px 14px;
  border: 1px solid #EDEDED;
  border-radius: 12px;
  color: var(--text-primary);
  box-shadow: 0px 2px 4px var(--box-shadow);
  width: 500px;
  height: 80px;
}

input{
    height: auto;
    border: 0;
    outline: none;
    background-color: var(--component-bg);
    font-size: 32px;
    letter-spacing: -0.015em;
    color: var(--text-strongest);
    caret-color: #25ec2c;
}

::placeholder {
  color: var(--text-primary);
  opacity: 1; /* Firefox */
}

.component input {
  transition: opacity 1.5s ease-in-out, blur 1.5s ease-in-out;
}

.component input.fade-out {
  opacity: 0;
  filter: blur(6px);
  /* transform: translateY(-5px); */
}