body {
  background: #a1caf6;
  color: #000000;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */

  overscroll-behavior: contain; /* This was to stop the overscroll bouncing but it doesn't work */

  height: 100vh;
}

.container{
  flex-wrap: wrap; /* allows wrapping to next row */
  width: 400px;
  display: flex;

  justify-content: center; /* put the buttons at the center - horizontally */
  gap: 0.5rem;
}

.box {
  position: relative;
  height: 650px;
  width: 400px;
  overflow: hidden;
  border: 0px solid black;
}

.box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}

.container button{
  text-decoration: none;
  border: none;
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
  transition: 0.6s;
}

.container button:hover{
  background-color: #a1caf6;
  
}

/******* to remove the scrollbars *********/

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: none;
}