html,
body {
	height: 100%;
}

.container {
	height: 100%;
  min-height: 100%;
	display: flex;
	flex-direction: column;
}

.box {
	display: flex;
	flex-direction: column;
  justify-content: flex-start;
}

.box-1 {
	align-items: center;
  	justify-content: center;
	border-bottom : 2px solid #828282;
}

.box-2 {
	flex: 1 0 0;
  background-image: url(../images/background.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: fixed;
  background-size: contain;
	
}

.box-3 {
	
	
  padding: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-top : 2px solid #828282;
	
  }




.box-3 a{
  display: block;
  background: #ccc;
  font-size: 1.5rem;
  text-decoration: none;
  padding: 1rem;
  width: 250px;
  text-align:center;
}

.box-3 a:hover{
  background: #ddd;
}

.box-3 a:first-child {
  border-radius: 10px 0 0 10px;
}

.box-3 a:last-child {
  border-radius: 0 10px 10px 0;
}


.box-4 {
  padding: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
	
  }




.box-4 a{
  font-size: 0.8rem;
  text-decoration: none;
  text-align:center;
}

.box-4 a:hover{

}

  @media screen and (max-width: 595px), (max-device-width: 595px) {
	  
	  .box-3 a{
  
  font-size: 1.0rem;
  
}
.box-3 a:first-child {
  border-radius: 10px 10px 0 0;
}

.box-3 a:last-child {
  border-radius: 0 0 10px 10px;
}
 }