*{box-sizing:border-box;margin:0}#root{width:100vw;height:100vh}body{margin:0;background-color:#10104d}label.info{position:absolute;top:20px;right:20px;background-color:#555;padding:5px;border-radius:5px;color:#fff;section {position: absolute; top: -100px; opacity: 0; right: 0; width: 400px; padding: 20px; background-color: #555; border-radius: 10px;} input {display: none;} input:checked + section {top: 110%; opacity: 1;}}.home-page{display:grid;place-items:center;height:100vh;background-image:url(/images/startscreen.jpg);background-size:cover;background-position:center;a {text-decoration: none; text-transform: uppercase; display: block; border-radius: 20px; padding: 20px; box-shadow: 3px 3px 4px rgba(0,0,0,.7); opacity: .8; color: white; transition: .3s;} a:hover {background-color: #333; box-shadow: 0; opacity: 1;}}.dialog{position:absolute;bottom:0;left:0;width:100%;height:100px;padding:20px;max-height:20vh;background-color:#323232cc;color:#fff;font-size:2rem}