* { margin: 0; padding: 0; } body { background: #404258; } button,input,textarea { background: #6B728E; resize: none; } form { background: #474E68; } h1 { text-align: center; font-size: 72px; margin-top: 10px; } h1,h3,p,a,input,textarea,button,label { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-decoration: none; color: #ffffff; border: none; } .form-auth-wrap { width: 50%; margin: 10% auto; padding: 10px; font-size: 18px; } button { font-size: 18px; width: 150px; height: 35px; margin-top: 50px; } .form-auth-wrap input { margin-top: 20px; width: 50%; } .form-wrap-post { padding: 10px; width: 800px; margin: 50px auto; background: #474E68; } .form-wrap-post a { text-decoration: underline; } .form-wrap-post textarea { width: 100%; height: 150px; } .wrap-posts { margin: 50px auto; padding: 10px; width: 800px; background: #474E68; } .wrap-post-info { display: flex; align-items: center; column-gap: 20px; } .avatar { width: 50px; height: 50px; } .wrap-post-info p { opacity: 0.7; } .wrap-post-info a { text-decoration: underline; } .wrap-post-content p { margin-top: 15px; } .info-user-wrap { margin: 50px auto 100px; padding: 10px; width: 800px; background: #474E68; } @media screen and (max-width: 600px) { .form-auth-wrap { width: 100%; margin-top: 50px; box-sizing: border-box; } .form-auth-wrap input{ margin: 5px 0px 20px 0; width: 80%; padding: 10px; font-size: 18px; } .form-auth-wrap label{ text-align: center; } h1 { font-size: 48px; } .form-wrap-post { width:auto; margin: 50px 0; } .form-wrap-post form { width: 100%; } .form-wrap-post textarea { box-sizing: border-box; padding: 10px; font-size: 18px; width: 100%; height: 200px; } .wrap-posts { box-sizing: border-box; width: 100%; } .info-user-wrap { width: 100%; box-sizing: border-box; } }