body {
background-image: url("https://img.freepik.com/premium-photo/mysterious-pirate-ship-anchored-by-spooky-cave-entrance-with-eerie-green-light-glow-adventure_49921-3364.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
#canvas {
width: 100%;
height: 320px;
position: relative;
z-index: 20;
pointer-events: none;
}
#cont {
position: absolute;
font-size: 3vw;
color: rgb(213 213 213);
z-index: 0;
left: 50%;
transform: translateX(-50%);
top: 5vh; /* moves it 5% viewport height from top */
width: fit-content;
height: fit-content;
font-weight: 500;
font-family: consolas;
}

form {
width: 90%;
max-width: 500px;
background-color: rgba(30, 30, 30, 0.7);
padding: 0.5em;
border: 1px solid #444;
border-radius: 2px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

label {
display: block;
color: #aaa;
font-size: 1.1em;
text-align: left;
}

input,
textarea {
width: 98%;
margin-top: 0.3em;
background-color: rgba(20, 20, 20, 0.8);
border: 1px solid #555;
color: #eee;
border-radius: 6px;
resize: none;
font-size: 0.5em;
font-family: 'Crimson Text', serif;
}

input::placeholder,
textarea::placeholder {
color: #666;
}

button {
padding: 0.3em 1.5em;
background-color: #444;
border: none;
color: #ccc;
font-size: .7em;
border-radius: 2px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #666;
}