body { font-family: sans-serif; font-size: 160%; background-color: black; /* Set the background color of the body */ margin: 0; color: white; display: flex; justify-content: center; align-items: center; min-height: 100vh; /* Ensure body takes at least the full height of the viewport */ } div.main { border: 2px solid white; width: 95%; /* Set a percentage width for responsiveness */ max-width: 1200px; /* Set a maximum width for larger screens */ padding: 20px 30px; background-color: black; color: white; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; } @media (min-width: 1024px) { /* Adjust the width for screens wider than 1024px */ div.main { width: 100%; } } #time, #andrea, #nicky, #andreas, #nickys { color: red; } p.time { margin: auto; text-align: center; } b.red { color: red; } p.footer { color: gray; font-size: 60%; text-align: center; } a:link { text-decoration: none; color: dodgerblue; } a:visited { text-decoration: none; color: tomato; } a:hover { text-decoration: none; color: white; font-family: impact; font-size: 105%; } a:active { text-decoration: none; } img { border-radius: 4px; height: 20px; } img:hover { transform: scaleX(-1); } #box { position: relative; } #contact-link { position: absolute; bottom: 0; right: 0; margin: 10px; color: white; text-decoration: none; background-color: black; padding: 5px 10px; border-radius: 5px; } .user-info { position: fixed; top: 10px; right: 10px; background-color: #f0f0f0; padding: 5px; border-radius: 5px; font-size: 12px; color: #000000; } .user-info a { color: #0000FF; text-decoration: none; } .user-info a:hover { text-decoration: underline; }