@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;300&display=swap');
*{
  transition:0.2s;
}
:root{
  --padding:10%;
}
html,body{
  width:100%;
  height:100%;
  margin:0px;
  font-family: 'Lexend', sans-serif;
  transition:all 0.2s;
  background:#121212;
}
body{
  display:flex;
  flex-direction:column;
}
main{
  flex:1;
}
header{
  font-size: 1.3rem;
  padding:1em var(--padding);
  gap:10px;
  display:flex;
  flex-direction:row;
  background:#151010;
  align-items:center;
  background: #121212;
  color: #fff;
  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
  
  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
header span{
  margin:0px;
  color:#DDDDDD;
  flex:1;
  color: #90caf9;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-image: linear-gradient(45deg, orange, purple);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
header form{
  height: fit-content;
  width: fit-content;
  margin:0px;
}
header input{
  padding:5px;
  border-radius:3px;
  border:none;
  background: #222;
  border:1px solid #444;
  color:#DDD;
}
#loading{
  color:#DDD;
  padding:20px;
}
#sectionPage{
  padding:20px var(--padding);
  flex:1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  place-items: center left;
  grid-gap: 10px;
}
.card{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  border:1px solid #333;
  border-radius:5px;
  background:#171717;
  color:#DDD;
  box-shadow:0px 0px 10px #000;
  overflow:hidden;
  text-decoration:none;
}
.card img{
  aspect-ratio:3/5;
}
.card img:hover{
/*   scale:1.1; */
  filter:sepia(5);
}
.card fr{
  border-radius:5px;
  overflow:hidden;
}
.card article{
  flex: 1;
  color:#BBBBBB;
  font-size:0.9em;
  display:flex;
  gap:7px;
  flex-direction:column;
  padding:5px 7px;
}
.card article span{
  flex: 1;
}
.card div{
  display:flex;
}
.card d{
  color:#777;
  flex:1;
  font-size:0.7em;
}
.card c{
  color:#777;
  font-size:0.7em;
}
@media (max-width:550px){
  :root{
    --padding:5%;
  }
}
footer{
  padding:30px var(--padding) !important;
  background:#090909;
  color:#999;
}
footer strong{
  color:yellowgreen;
}