* { box-sizing:border-box; margin:0; padding:0; } html, body { height:100%; width:100%; } body { align-content:space-around; background-color:#202830; color:#ffffff; display:grid; justify-content:center; } canvas { background-color:#ffffff; width: 1280px; height: 720px; } p{ text-align: center; } h1{ text-align: center; } .hint1 { color: white; background: #202830; padding: 16px; border: 10px #333f4c; border-radius: 100px; text-decoration: none; font-family: monospace; margin-top: 33px; margin-bottom: 20px; } .hint1:hover { background: #333f4c; border: 4px solid #202020; transition: all 0.6s; } .hint2 { color: white; background: #202830; padding: 16px; border: 10px #333f4c; border-radius: 100px; text-decoration: none; font-family: monospace; margin-top: 33px; margin-bottom: 20px; } .hint2:hover { background: #333f4c; border: 4px solid #202020; transition: all 0.6s; }