html, body {
	background-color: black;
	height: 100vh;
	margin: 0;
}


.column1 {
  float: left;
  width: 50%;
  height: 100vh;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0.4)), url("lounas-tausta.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  
.column2 {
  float: left;
  width: 50%;
  height: 100vh;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url("burger-tausta.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  
  .column2:hover {
  background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)), url("burger-tausta.jpg");
    background-repeat: no-repeat;
  background-size: cover;
  }
  
  .column1:hover {
  background: linear-gradient(rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8)), url("lounas-tausta.jpg");
    background-repeat: no-repeat;
  background-size: cover;
  }
  
  
@media screen and (max-width: 1024px) {
  .column1, .column2 {
    width: 100%;
	height: 50vh;
  }
}
  
img {
		width: 40vh;
}