body {
  text-align: center;
  background-color: rgb(255, 245, 238);
  /* background: linear-gradient(to bottom, white, rgb(100, 211, 255)); */
  /* background-repeat: no-repeat; */
  font-family: "Gowun Dodum", serif;
  font-style: normal;
  /* height: 1000px; */
}

.ribbon {
  margin: auto;
}

.rectangle {
  margin-top: 100px;
  display: inline-block;
  width: 40px;
  height: 30px;
  background-color: aqua;
}

.left-triangle {
   color: aqua;
  width: 30px;
  height: 10px; 
  display: inline;
  width: 0;
  height: 0;
  border-bottom: 60px solid rgb(255, 117, 24);
  border-left: 30px solid transparent;
  border-right: 100px solid transparent;
  border-radius: 20% 20% 0 0;
}

.right-triangle {
  display: inline;
  width: 0;
  height: 0;
  border-bottom: 60px solid rgb(255, 24, 24);
  border-left: 100px solid transparent;
  border-right: 30px solid transparent;
  border-radius: 20% 20% 0 0;
}

.box {
  margin: auto;
  font-weight: 300;
  width: 300px;
  height: 200px;
  font-size: 30px;
  background: rgb(255, 172, 28);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}

.box a {
  margin-left: 20px;
  position: absolute;
  top: 90px;
  left: 130px;
  transform: translate(-50%, -50%);

}

.letter {
  display: block;
  width: 100%;
  margin: 50px auto;
  text-align: center;
}

.letter summary:hover {
  color: coral;
  cursor: pointer;
}

.letter details {
  display: inline-block;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
  left: -170px;
  text-align: left;
  word-break: keep-all;
}

.time {
  display: block;
  width: 100%;
  margin: 50px auto;
  text-align: center;
}

.time summary:hover {
  color: coral;
  cursor: pointer;
}

.time details {
  display: inline-block;
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  word-break: keep-all;
}


.camera {
  display: block;
  width: 100%;
  margin: 50px auto;
  text-align: center;
}

.camera summary:hover {
  color: coral;
  cursor: pointer;
}


.camera details {
  display: inline-block;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  right: -170px;
  text-align: left;
  word-break: keep-all;

}

.like {
  display: block;
  width: 100%;
  margin: 50px auto;
  text-align: center;
}

.like summary:hover {
  color: coral;
  cursor: pointer;
}

.like details {
  display: inline-block;
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  word-break: keep-all;
}


.diary {
  display: block;
  width: 100%;
  margin: 50px auto;
  text-align: center;
}

.diary summary:hover {
  color: coral;
  cursor: pointer;
}

.diary details {
  display: inline-block;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
  left: -170px;
  text-align: left;
  word-break: keep-all;
}

.art {
  display: block;
  width: 100%;
  margin: 50px auto;
  text-align: center;
}

.art summary:hover {
  color: coral;
  cursor: pointer;
}

.art details {
  display: inline-block;
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
  word-break: keep-all;
}

.trip {
  display: block;
  width: 100%;
  margin: 50px auto;
  text-align: center;
}

.trip summary:hover {
  color: coral;
  cursor: pointer;
}

.trip details {
  display: inline-block;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
  right: -170px;
  text-align: left;
  word-break: keep-all;

}