* { margin: 0; padding: 0; } .bgimg { /* Full-screen */ height: 100vh; /* Use viewport height for full-screen height */ /* Center the background image */ background-position: center; /* Scale and zoom in the image */ background-size: cover; /* Add position: relative to enable absolutely positioned elements inside the image (place text) */ position: relative; /* Add a white text color to all elements inside the .bgimg container */ color: white; /* Add a font */ font-family: "Courier New", Courier, monospace; /* Set the font-size to 25 pixels */ font-size: 25px; } .bgimg video { width: 100%; height: 100%; /* Make the video fill the entire .bgimg container */ object-fit: cover; /* Make the video cover the container without stretching */ display: block; /* Remove any extra spacing */ position: absolute; /* Position the video absolutely within the .bgimg container */ } /* Position text in the top-left corner */ .topleft { position: absolute; top: 16px; left: 16px; } /* Position text in the bottom-left corner */ .bottomleft { position: absolute; bottom: 16px; left: 16px; } /* Position text in the middle */ .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #demo{ font-size:30px; padding: 10px; } @media screen AND (max-width:600px) { .middle h1{ font-size: 20px; } #demo{ font-size: 20px; } } /* Style the
element */ hr { margin: auto; width: 40%; } /* right side */ .social-icons { text-align: center; filter: brightness(0) invert(1); } .social-icons .social-icons-list { display: inline-block; list-style-type: none; padding: 0; text-align: center; } .social-icons-list .social-icon { box-sizing: border-box; display: inline-block; height: 24px; margin: 0 6px; width: 24px; } .social-icon a svg path { transition: fill 0.15s ease; } .topright { position: absolute; top: 16px; right: 15px; } .topright a{ text-decoration: none; color: #0e0e10; } /* left side */ .left{ right: 0; bottom: 10px; position: absolute; }