.header_content{ height: 100px; background-color: #282e30; display: flex; flex-direction: row; justify-content: space-between; } header{ -webkit-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2); -moz-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2); box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2); } .hd{ display: flex; flex-direction: row; padding: 10px; } .Name_site{ background-color: #282e30; color: rgb(255, 255, 255); width: 400px; height: 150px; text-align: end; font-size: 24px; justify-content: start; top: 0; left: 0; box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2); transition: transform .3s; } .Name{ padding-top: 70px; padding-right: 10px; } .Name_site:hover { background-color: #70c6d1; transform: scale(1.4) } .Name1{ padding-top: 70px; padding-right: 10px; text-decoration: underline; } .login1{ display: flex; justify-content: end; padding-left: 10px; top: 0; right: 0; } .login2:hover{ background-color: #70c6d1; color: #fff; } .login2{ background-color: #8EDAE4; width: 100px; height: 50px; text-align: center; border-radius: 15px; } .Account {width: 1000px; height: 500px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: #A8DADC; border-radius: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; } .pred{ justify-content: center; align-items: center; } .pred_up{ width: 1000px; margin: 0 auto; /* Center the block horizontally */ border-radius: 10px; /* Add rounded corners */ -webkit-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2); -moz-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2); box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2);/* Add a shadow */ padding: 20px; /* Add padding to the block */ text-align: center; /* Center the text within the block */ height: 100%; background-color: #fff; overflow: auto; } .knopka{ box-shadow: 4px 12px 8px rgba(0, 0, 0, 0.2); width: 200px; height: 50px; background-color: #A8DADC; text-align: center; border-radius: 20px; margin-top: 20px; margin-right: 10px;} .knopka_text{ color: #fff; } .Login{ width: 500px; background-color: #fff; text-align: center; border-radius: 30px; } .Account input[type="submit"] { width: 500px; height: 40px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 20px; } .Account input[type="submit"]:hover { background-color: #444; font-size: 20px; } body { background: linear-gradient(#ffffff,#ffffff,#bfeff5 ,#bfeff5 , #7dabb1); max-width: auto; background-repeat: no-repeat; margin: 0; padding: 0; font-family: verdana, sans-serif; background-size: cover; } footer { background-color: #282e30; color: #fff; padding: 20px; text-align: center; box-shadow: -1px -22px 24px 0px rgba(21, 46, 66, 0.2); } .footer-content { display: flex; justify-content: center; } .footer-info, .footer-social { width: 50%; } .copyright { margin-top: 20px; } .knopka1{ margin-left: 25px; color: #ffffff; border:0px; border-radius: 25px; background: #282e30; width: 300px; height: 50px; -webkit-box-shadow: 0px 12px 17px 0px rgba(0, 0, 0, 0.32); -moz-box-shadow: 0px 12px 17px 0px rgba(0, 0, 0, 0.32); box-shadow: 0px 12px 17px 0px rgba(0, 0, 0, 0.32); display: flex; align-self: center; align-items: center; justify-content: center; } .knopka1:hover{ background: #6f848b; } .Account input[type="text"] { width: 400px; height: 40px; margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; font-size: 20px; border-radius: 5px; } a{ text-decoration: none; color: black; } button{ width: 500px; height: 40px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 20px; } button:hover { background-color: #444; font-size: 20px; } .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #8EDAE4; padding: 20px; text-align: center; border-radius: 30px; display: flex; align-items: center; flex-direction: column; } input[type ="submit"] { width: 500px; height: 40px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 20px; } input[type ="submit"]:hover { background-color: #444; font-size: 20px; }