body { /* display: flex; */ margin: 0%; width: 100vw; height: 100vh; background-color: rgb(71, 71, 71); color: white; } footer { text-align: center; position: absolute; bottom: 0; width: 100%; background-color: rgb(0, 0, 0); } .pp { height: 7vw; width: 7vw; max-height: 7vh; max-width: 7vh; /* max-width: ; */ border-radius: 50%; border: 5px solid rgb(255, 255, 255); } .loginHere{ font-size: 5vh; font-family: 'Rubik Iso'; text-align: center; margin-top: 10vh; } ::placeholder { font-size: 3vh; text-align: center; align-items: center; margin:auto; } .submit{ height: 5vh; border-radius: 100vh; } .submit:hover { background-color: blueviolet; } input{ height: 5vh; border-radius: 100vh; } .pp:hover { border: 5px solid rgb(100, 0, 0); } .userTxt:hover { color:blueviolet;; } .userTxt { margin-right: 5%; } .username { /* justify-content: center; */ margin-right: 1vw; display: flex; align-items: center; font-size: 2vw; max-width: 33%; color: aqua; justify-content: right; text-decoration: none; } .loginForm { align-items: center; height: 50vh; display: flex; flex-direction: column; justify-content: space-around; } .menu { margin-left: 2vw; color: aqua; /* font-size: 4vh; */ font-size: 2vw; text-decoration: none; } .pong{ font-family:'Rubik Iso'; } .box { width: 33%; } .center { align-self: center; } .headerName { display:flex; max-width: 33%; height: 100%; /* font-size: 50px; */ color:blueviolet; /* font-size: 10vw; */ font-size: min(10vw, 10vh); justify-content: center; } .header { display: flex; margin: 0; height: 10vw; max-height: 10vh; align-items: center; background-color: rgb(0, 0, 0); } h1 { color:blueviolet }