html, body, div { padding:0; margin: 0; overflow: hidden; } body { width:100%; height:100%; background-color: white; } canvas { background-color: white; width:100%; } #game { width: 100; height: 100; margin: 0 auto; } #inviteDiv { z-index: 1000; display: inline-flex; flex-direction: column; position: absolute; pointer-events: none; word-wrap: break-word; width: 100%; } #inviteDiv h1, h2 { text-align: center; font-family: monospace; font-weight: bold; white-space: pre; max-width: 100%; margin: 0; word-wrap: break-word; text-shadow: 3px 3px 1px rgba(75, 75, 75, 1); color: #d152b8; } #inviteDiv h1 { padding-top: 5vh; padding-left: 18vw; font-size: 1vw; } #inviteDiv h2 { font-size: 0.4vw; padding-left: 24vw; } #invitetextDiv { pointer-events: none; position: absolute; padding-top: 25vh; word-wrap: break-word; height: 100%; width: 100%; max-height: 100%; max-width: 100%; } #invitetextDiv p { padding-top: 10vh; font-family: Arial; font-weight: bold; flex-grow: 1; font-size: 1.2vw; color: #d152b8; text-align: left; margin-left: 27vw; margin-right: 27vw; } u { color: blue; } #link { position:absolute; pointer-events:all; z-index:1000; cursor:pointer; } /* #backgroundDiv { width: 100%; height: 100%; z-index: 800; display: flex; justify-content: center; align-items: center; position: absolute; pointer-events: none; } #backgroundDiv h3 { font-family: monospace; white-space: pre; font-size: 1.5vw; color: lightgrey; } */ @media only screen and (max-width: 768px) { #inviteDiv h1 { padding-top: 4vh; padding-left: 11vw; font-size: 1.5vw; } #inviteDiv h2 { font-size: 0.8vw; padding-left: 33vw; } #invitetextDiv { padding-top: 22vh; } #invitetextDiv p { position: absolute; align-self: flex-start; padding-top: 0vh; font-size: 3vw; color: #d152b8; margin-left: 13vw; margin-right: 13vw; } #link{ position:absolute; pointer-events:all; z-index:1000; cursor:pointer; } }