header{ background-color: #4A148C; color: white; padding: 20px; text-align: center; } #srodek { background-image: url(tło.jpeg); padding: 30px; } main{ display: flex; flex-direction: row; } main>div{ margin-left: 10%; } form { background-color: #EDE7F6; width: 320px; padding: 30px; border-radius: 10px; margin: auto; } form>input { display: block; flex-direction: column; width: 90%; padding: 8px; margin: 10px; } form>button { background-color: #4A148C; color: white; border-radius: 8px; padding: 12px 20px; margin-top: 30px; } footer { background-color: #4A148C; color: white; flex-direction: row; height: auto; display: flex; } footer>div{ margin-top: 20px; width: 50%; } video{ margin-left: 10px; } @media (max-width: 768px) {
  main {
    flex-direction: column;
    align-items: center;
  }

  form {
    width: 90%;
    margin-bottom: 20px;
  }

  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  footer > div {
    width: 90%;
    margin: 10px 0;
  }

  video {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  form > input, form > button {
    width: 100%;
  }
}