html,body{
    height: 100%;
    margin: 0;

    
}
body{
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-image: linear-gradient(75deg,white,  lightgray 5%,white 15%, lightgray 55% , lightgray 90%,white);
    background-size: 100%;
    background-attachment: fixed;
}
button{
width: 40px;
height: 40px;

position:fixed;
top:2px;
left:2px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='slateblue'><title lang='en'>left arrow</title><path d='M25.172 54.828l-20-20c-1.562-1.562-1.562-4.095 0-5.657l20-20c1.562-1.562 4.095-1.562 5.657 0s1.562 4.095 0 5.657l-13.172 13.172h38.343c2.209 0 4 1.791 4 4s-1.791 4-4 4h-38.343l13.172 13.172c0.781 0.781 1.172 1.805 1.172 2.828s-0.39 2.047-1.172 2.828c-1.562 1.562-4.095 1.562-5.657 0z'/></svg>"); 
background-size: cover;
border:none;
background-color: rgba(255,255,255,.5);
}


h1{
    font-weight: normal;
}
img{
    max-width: 100%;
    box-shadow: 0 0 0 4px white, 8px 8px 10px gray;
}