body {
  background-image: url(https://cdn.pixabay.com/photo/2017/03/25/20/51/quiz-2174368_960_720.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-color: rgb(1, 5, 23);
}
header {
  height: 20vh;
}
section {
  height: 50vh;
}
footer {
  height: 30vh;
}
div {
  position: relative;
  width: 50%;
  float: right;
}

button {
  text-decoration: none;
  color: rgb(27, 60, 89);
  text-shadow: 5px 5px 5px black 5px 5px 5px rgb(26, 26, 60);
  background-color: yellow;
  border-radius: 50%;
  padding: 20px;
  font-size: xx-large;
  font-family: fantasy;
  font-style: italic;
  letter-spacing: 2px;
}

button:hover {
  box-shadow: 5px 5px 5px 10px rgb(221, 219, 118);
  border-color: rgb(11, 50, 84);
}

h1 {
  color: aliceblue;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 100px;
  font-weight: bolder;
  width: 100%;
  text-align: center;
}

img {
  position: relative;
  top: 90px;
  left: 40%;
  border: 7px solid rgb(27, 60, 89);
  border-radius: 50%;
}

@media screen and (max-width: 1200px) {
  div {
    width: 100%;
    float: none;
  }

  body {
    height: 100vh;
    background-image: none;
  }

  h1 {
    font-size: 50px;
  }

  img {
    display: block;
  }

  button {
    display: block;
    margin: 10% auto;
  }
}
@media screen and (max-width: 768px) {
  header h1 {
    text-align: center;
  }
  section img {
    position: static;
    margin: 10% auto;
  }
  #clik {
    position: static;
    margin: 10% auto;
    display: block;
    position: static;
  }
}