*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#555;

    font-family:sans-serif;

    height:100vh;

    overflow:hidden;
}

header{

    height:60px;

    background:#2b2b2b;

    color:white;

    display:flex;

    align-items:center;

    padding:0 20px;

    gap:10px;
}

button{

    padding:8px 14px;

    border:none;

    background:#4b4b4b;

    color:white;

    cursor:pointer;

    border-radius:5px;
}

button:hover{

    background:#666;
}

.space{

    flex:1;
}

main{

    height:calc(100vh - 60px);

    overflow:auto;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:30px;
}

canvas{

    background:white;

    box-shadow:0 0 20px rgba(0,0,0,.45);

    margin-bottom:30px;
}

.pageButton{

    position:fixed;

    top:60px;

    bottom:0;

    width:80px;

    border:none;

    background:rgba(0,0,0,0.08);

    color:white;

    font-size:40px;

    opacity:0.4;

    transition:.2s;

    z-index:10;

    display:flex;

    align-items:center;

    justify-content:center;

}


.pageButton:hover{

    background:rgba(0,0,0,0.35);

    opacity:1;

}


.pageButton.left{

    left:0;

}


.pageButton.right{

    right:0;

}

@media(max-width:600px){

.pageButton{
    width:50px;
}

}