input[value="t" i] ~ #searchbox #results #result0:before,
input[value="ti" i] ~ #results #result0:before,
input[value="tim" i] ~ #results #result0:before,
input[value="tim " i] ~ #results #result0:before,
input[value="tim c" i] ~ #results #result0:before,
input[value="tim ca" i] ~ #results #result0:before,
input[value="tim car" i] ~ #results #result0:before,
input[value="tim carr" i] ~ #results #result0:before,
input[value="tim carry" i] ~ #results #result0:before{
 content: "Tim Carry";
 display: block;
 display: inline-block;
    width: 150px;               /* desired width */
    height: 150px;              /* desired height */
    background-image: url("tim.png");
    background-size: cover;    /* scales image */
    background-repeat: no-repeat;
    margin-top:40px ;
    color:#722323;
}
input[value="e" i] ~ #results #result0:before,
input[value="er" i] ~ #results #result0:before,
input[value="ere" i] ~ #results #result0:before,
input[value="eren" i] ~ #results #result0:before,
input[value="eren " i] ~ #results #result0:before,
input[value="eren j" i] ~ #results #result0:before,
input[value="eren ja" i] ~ #results #result0:before,
input[value="eren jae" i] ~ #results #result0:before,
input[value="eren jaeg" i] ~ #results #result0:before,
input[value="eren jaege" i] ~ #results #result0:before,
input[value="eren jaeger" i] ~ #results #result0:before {
 content: "Eren Jaeger";
   display: inline-block;
    width: 150px;               /* desired width */
    height: 150px;              /* desired height */
    background-image: url("eren.png");
    background-size: cover;    /* scales image */
    background-repeat: no-repeat;
    margin-top:40px ;
    color:#722323;

 display:block;
}
input[value="e" i ]~ #results #result2:before,
input[value="et" i ]~ #results #result2:before,
input[value="eth" i ]~ #results #result2:before,
input[value="ethan" i ]~ #results #result2:before,
input[value="ethan " i ]~ #results #result2:before,
input[value="ethan w" i ]~ #results #result2:before,
input[value="ethan wi" i ]~ #results #result2:before,
input[value="ethan win" i ]~ #results #result2:before,
input[value="ethan wint" i ]~ #results #result2:before,
input[value="ethan winte" i ]~ #results #result2:before,
input[value="ethan winter" i ]~ #results #result2:before,
input[value="ethan winters" i ]~ #results #result2:before{
 content: "Ethan Winters";
   display: inline-block;
    width: 150px;               /* desired width */
    height: 150px;              /* desired height */
    background-image: url("ethan.png");
    background-size: cover;    /* scales image */
    background-repeat: no-repeat;
    margin-top:40px ;
    color:#722323;
 display:block;
}
input[value="t" i] ~ #results #result3:before,
input[value="tr" i] ~ #results #result3:before,
input[value="tre" i] ~ #results #result3:before,
input[value="trev" i] ~ #results #result3:before,
input[value="trevo" i] ~ #results #result3:before,
input[value="trevor" i] ~ #results #result3:before,
input[value="trevor " i] ~ #results #result3:before,
input[value="trevor s" i] ~ #results #result3:before,
input[value="trevor sa" i] ~ #results #result3:before,
input[value="trevor san" i] ~ #results #result3:before,
input[value="trevor sant" i] ~ #results #result3:before,
input[value="trevor santa" i] ~ #results #result3:before {
 content: "Trevor Santa";
 display:block;
 display: inline-block;
    width: 150px;               /* desired width */
    height: 150px;              /* desired height */
    background-image: url("Trevor.png");
    background-size: cover;    /* scales image */
    background-repeat: no-repeat;
    margin-top:40px;
    color:#2c0d0d;
}
input[value="m" i] ~ #results #result4:before,
input[value="mi" i] ~ #results #result4:before,
input[value="mic" i] ~ #results #result4:before,
input[value="mich" i] ~ #results #result4:before,
input[value="micha" i] ~ #results #result4:before,
input[value="michae" i] ~ #results #result4:before,
input[value="michael" i] ~ #results #result4:before,
input[value="michael " i] ~ #results #result4:before,
input[value="michael f" i] ~ #results #result4:before,
input[value="michael fa" i] ~ #results #result4:before,
input[value="michael far" i] ~ #results #result4:before,
input[value="michael fara" i] ~ #results #result4:before,
input[value="michael farad" i] ~ #results #result4:before,
input[value="michael farada" i] ~ #results #result4:before,
input[value="michael faraday" i] ~ #results #result4:before {
    content: "Michael Faraday";
    display:block;
    display: inline-block;
    width: 150px;               /* desired width */
    height: 150px;              /* desired height */
    background-image: url("Michael.png");
    background-size: cover;    /* scales image */
    background-repeat: no-repeat;
    margin-top:40px ;
    color:#722323;
}
input[value="m" i] ~ #results #result5:before,
input[value="mi" i] ~ #results #result5:before,
input[value="mid" i] ~ #results #result5:before,
input[value="mido" i] ~ #results #result5:before,
input[value="midor" i] ~ #results #result5:before,
input[value="midori" i] ~ #results #result5:before,
input[value="midoriy" i] ~ #results #result5:before,
input[value="midoriya" i] ~ #results #result5:before,
input[value="midoriya " i] ~ #results #result5:before,
input[value="midoriya i" i] ~ #results #result5:before,
input[value="midoriya iz" i] ~ #results #result5:before,
input[value="midoriya izu" i] ~ #results #result5:before {
    content: "Midoriya Izu ";
    display: inline-block;
    width: 150px;               /* desired width */
    height: 150px;              /* desired height */
    background-image: url("midoriya.png");
    background-size: cover;    /* scales image */
    background-repeat: no-repeat;
    margin-top:40px ;
    color:#722323;
}
*{
    margin: 0;
    padding: 0;
}
#searchbox{
    display: flex;
    justify-content: center;
    margin-top: 20px;    
    height: 5vh;
}
body{
    background-color:#FDFFB8;
}
.image-block1{
    display: flex;
    flex-direction: row;
    justify-content: center; /* horizontal centering */
    align-items: center;     /* vertical centering */
    gap: 20px;               /* space between images */
    height: 400px;
    margin-top: 200px;
}
.image-item{
    text-align: center;
}