body, html {
    height: 100%;
    margin: 0;
    background-color: black;
}

.bgimg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.8)), url('crane_hook.jpg');
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: rgb(36, 36, 36);
    font-family: "Arial";
    font-size: 25px;
    filter: grayscale();
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    text-decoration: underline;
}

.topleft {
position: absolute;
top: 0;
left: 16px;
}

.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}

.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
opacity: 1;
}

hr {
margin: auto;
width: 40%;
}