@media screen and (min-width: 601px) { :root { --font-size : 18px; } } @media screen and (max-width: 600px) { :root { --font-size : 15px; } } *, *::before, *::after { box-sizing: border-box; } * { color: #F5F5F5; text-decoration: none; font-size: var(--font-size, 1vw); transition: 0.3s; } /* For debugging purposes * { outline: 1px solid #2600ff; } */ h1 { font-size: calc(var(--font-size, 1vw) * 2.15); } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } html { background-image: url("../images/background.png"); background-repeat:no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; /*background: linear-gradient(45deg, #b9b9c9, #d2379b);*/ } body { display: flex; flex-direction: row; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 75vw; height: 75vh; } hr { height: 1px; width: 100%; background-color: #A1674A; border: none; } /*nav { display: flex; flex-direction: column; align-self: start; justify-content: center; align-items: center; gap: 3vh; height: fit-content; margin-top: 10vh; margin-bottom: 2vh; } nav a { margin-right: 2.5vw; margin-left: 2.5vw; } .nav_delimiter { margin-bottom: 5vh; }*/ form { display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin-bottom: 10vh; } .bordered { border-radius: 10px; } footer { display: flex; justify-content: end; align-items: center; position: absolute; bottom: 0; width: 100vw; height: 10vh; } footer a { margin-right: 2vh; } .footer-logo { height: 100%; margin-right: 10px; margin-bottom: 10px; }