* {
  word-break: keep-all;
}

html, body {
  height:100%;
  overflow: hidden;
}

.celling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
 }

.celling img {
   width: auto;
   height: 50vh;
}

.textbox{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
}

.d2 .textbox {
  background-color: #1a191f;
  color: #acacae;
}

.d3 .textbox {
  background-color: #534133;
  color: #ccccca;
}

.d4 .textbox {
  background-color: #301913;
  color: #ddc092;
}

.d5 .textbox {
  background-color: #141a19;
  color: #beb9ad;
}

.left-button, .right-button {
  position: fixed;
  bottom: 20px;
}

.left-button {
  left: 0; 
}

.right-button {
  right: 0;
}

.d2 .left-button a,
.d2 .right-button a {
  color: #acacae;
  padding: 10px;
  text-decoration: none;
}

.d3 .left-button a,
.d3 .right-button a {
  color: #ccccca;
  padding: 10px;
  text-decoration: none;
}

.d4 .left-button a,
.d4 .right-button a {
  color: #ddc092;
  padding: 10px;
  text-decoration: none;
}

.d5 .left-button a,
.d5 .right-button a {
  color: #beb9ad;
  padding: 10px;
  text-decoration: none;
}

.text {
 width: 48%;
 text-align: left;
 display: flex;
 flex-direction: column;
}

.text h2 {
  font-size: 16px;
}

.text p {
  font-size: 16px;
  line-height: 1.5;
}

@media screen and (max-width: 1000px) {

  .text h2 {
    font-size: 14px;
  }

  .text p {
    font-size: 12px;
    line-height: 1.5;
  }

  .left-button a,
  .right-button a {
    font-size: 12px;
  }
  
  .textbox{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .text {
   width: 40%;
   text-align: left;
   display: flex;
   flex-direction: column;
   padding-right: 20px;
  }
}