*{padding:0;margin:0;box-sizing:border-box}body{background-image:url(download.jpg);background-size:cover;background-repeat:no-repeat}.navbar{width:100%;backdrop-filter:blur(5px)}.logo{color:#fff;font-size:40px;font-weight:900;font-family:monospace}.contaner{width:80%;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:20px 30px}.navagatione ul{display:flex;column-gap:10px}.navagatione ul li{list-style-type:none}.navagatione ul li a{text-decoration:none;color:#fff;padding:10px 15px;background-color:#000;border-radius:10px;font-size:18px;transition:.5s}.navagatione ul li a:hover{color:#000;background-color:#fff}@font-face{font-family:'RobotoMonoo';src:url('RobotoMono-Regular.ttf') format('truetype')}@font-face{font-family:'OpenSans';src:url('OpenSans_Condensed-Regular.ttf') format('truetype')}.navagatione ul li a{font-family:'RobotoMonoo',sans-serif}.title-pra{width:50%;padding:30px}.title-pra h1{font-family:'RobotoMonoo',sans-serif;font-size:70px;color:#fff}.title-pra p{font-family:'RobotoMonoo',sans-serif;font-size:50px;font-weight:500;color:#fff}.background{height:86.5vh;display:flex;justify-items:center}.login{width:auto;margin:auto;border:3px #fff solid;border-radius:20px;backdrop-filter:blur(5px);height:auto;align-content:space-evenly;justify-content:center}.login .contaner{margin:auto;width:100%;display:flex;flex-direction:column}.login .contaner .title-login{text-align:center;font-size:25px;font-weight:900;width:100%;margin-bottom:20px}.information-login .info{padding:10px}.information-login input{padding:10px;border-radius:15px}.forgit_password a{font-size:18px;padding:10px;text-decoration:none;color:#000;transition:1s}.forgit_password a:hover{color:#fff;text-decoration:underline #fff solid;cursor:pointer}.info input[type="email"]{background:#fff0;border:2px solid #fff;padding:10px;border-radius:8px;font-size:16px;color:#fff;outline:none}.info input[type="password"]{background:#fff0;border:2px #fff solid;border-radius:8px;font-size:16px;color:#fff;outline:none}.info input[type="submit"]{width:100%;background:linear-gradient(#6d6d6d,#443939,#3f2c2c);border:none;border-radius:8px;font-size:16px;color:#fff;outline:none;cursor:pointer;transition:1s}.info input[type="submit"]:hover{color:#000;background:linear-gradient(#fff,#3a3535)}.info{margin-top:10px;margin-bottom:10px}input::placeholder{color:#fff;font-size:18px}footer .end{width:100%;font-size:20px;color:#fff;text-align:center;font-weight:500;background-color:rgb(0 0 0 / .801);padding:15px 20px}@media (min-width:320px) and (max-width:480px){.navbar .contaner ul li a{padding:7px;font-size:16px}.navbar .contaner{width:100%;justify-content:space-between;padding:10px}.title-pra{width:100%;padding:20px}.title-pra h1{font-size:25px}.title-pra p{font-size:25px}.background{display:flex;flex-direction:column;justify-content:space-around;height:auto}.login{width:auto;height:auto;margin-bottom:20px;margin-top:20px}}@media (min-width:481px) and (max-width:650px){.navbar .contaner ul li a{padding:7px;font-size:16px}.navbar .contaner{width:100%;justify-content:space-between;padding:10px}.title-pra{width:100%;padding:20px}.title-pra h1{font-size:25px}.title-pra p{font-size:25px}.background{display:flex;flex-direction:column;justify-content:space-around;height:auto}.login{width:auto;height:auto;margin-bottom:20px;margin-top:20px}}@media (min-width:651px) and (max-width:720px){.navbar .contaner ul li a{padding:7px;font-size:16px}.navbar .contaner{width:100%;justify-content:space-between;padding:10px}.title-pra{width:100%;padding:20px}.title-pra h1{font-size:25px}.title-pra p{font-size:25px}.background{height:auto}.login{width:auto;height:auto;margin-bottom:20px;margin-top:20px;margin-right:10px}}@media (min-width:721px) and (max-width:900px){.navbar .contaner ul li a{padding:10px;font-size:17px}.navbar .contaner{width:100%;justify-content:space-between;padding:10px}.title-pra{width:100%;padding:20px}.title-pra h1{font-size:40px}.title-pra p{font-size:35px}.background{height:100vh;align-items:center}.login{width:50%;height:auto;margin-bottom:20px;margin-top:20px;margin-right:10px}}@media (min-width:901px) and (max-width:1000px){.navbar .contaner ul li a{padding:10px;font-size:20px}.navbar .contaner{width:80%;justify-content:space-between;padding:10px}.title-pra{width:100%;padding:20px}.title-pra h1{font-size:50px}.title-pra p{font-size:40px}.background{height:auto}.login{width:auto;height:auto;margin-bottom:20px;margin-top:20px;margin-right:10px}}@media (min-width:1001px) and (max-width:1200px){.login{width:auto;height:auto}}