@media screen and (min-width: 601px) { :root { --font-size : 18px; } } @media screen and (max-width: 600px) { :root { --font-size : 15px; } } * { color: #F5F5F5; text-decoration: none; font-size: var(--font-size, 1vw); transition: 0.3s; } h1 { font-size: calc(var(--font-size, 1vw) * 2.15); } 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; height: 98vh; } .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; } input { color: #424242; font-size: 2.5vh; width: 20vw; height: 4.5vh; padding: 1vh; margin: 1.5vh; text-align: center; } .bordered { border-radius: 10px; } footer { display: flex; justify-content: end; align-items: center; position: absolute; bottom: 0.25vh; margin-bottom: 0.25vh; width: 100vw; height: fit-content; } footer a { margin-right: 2vh; }