.StartScreen { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)); -webkit-backdrop-filter: saturate(100%) blur(7px); backdrop-filter: saturate(100%) blur(7px); height: 100vh; width: 100vw; z-index: 3000; display: flex; flex-direction: column; justify-content: center; align-items: center; form { position: relative; width: 50%; @media @tablet { width: 70%; } @media @phone { width: 80%; } } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 0; font-size: 35px; border: 3px solid rgba(0, 0, 0, 0.4); background-color: white; height: 90px; border-radius: 45px; padding-right: @spacing * 4; padding-left: @spacing * 4; } input:active, input:focus { outline: none; border: 3px solid black; } form > img { position: absolute; height: 45px; width: 45px; right: 22.5px; top: 22.5px; } } .StartScreen > a > img { height: 92px; width: 92px; position: absolute; top: 2 * @spacing; left: @spacing; } .touch .StartScreen > a > img { height: 75px; width: 75px; } @media @tablet { .StartScreen > a > img { height: 75px; width: 75px; } } @media @phone { .StartScreen > a > img, .touch .StartScreen > a > img { height: 40px; } }