body{

    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    margin:0;
    background: #222;
    background-image: url('https://source.unsplash.com/1600x900/?landscape');

    font-family: 'Roboto Slab', serif;
    font-size:120%;
    
   

}
.card{
    background: #000000d0;
    color:white;
    padding:2em;
    border-radius: 30px;
    width:100%;
    max-width: 420px;
    margin:1em;

}
.search{
    display:flex;
    align-items:center;
    justify-content: center;

}
button{
    margin:0.5em;
    border-radius: 50%;
    border:none;
    height:44px;
    width:44px;
    outline:none;
    background: #7c7c7c2b;
    color:white;
    cursor: pointer;
    transition: 0.2s ease-in-out;



}
button:hover{
    background:#7c7c7c6b;

}
input.search-bar
{
    border:none;
    outline:none;
    padding:0.4em 1em;
    border-radius:24px;
    background:#7c7c7c2b;
    color:white;
    font-family:inherit;
    font-size:105%;
    width:calc(100%-80px);




}
h1.temp{
    margin:0;

}