html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
} 

body {
  background-color: #77a6ac;
  color: #fff;
  font-family: "Lato", sans-serif;
  overflow: hidden;
}

#namlehoai{
  /* height: 178px;
  width: 100px; */
  width: 35%;
  position: absolute;
  margin-left: 50px;
  margin-top: -50px;
}

/* .mesg{
  margin-top: 370px;
  margin-left: 600px;

} */

.present {
  height: 240px;
  left: 0;
  margin: 0 auto;
  perspective: 600px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
}

.name {
  font-size: 1em;
  font-weight: 100;
  position: absolute;
  top: 50%;
  font-family: Montserrat;
  line-height: 2;
  width: 400px;
}

.name b {
  display: inline-block;
  width: 60px;
}

.instruction {
  bottom: -100px;
  left: 0;
  opacity: 1;
  position: absolute;
  text-align: center;
  transition: opacity 0.5s;
  width: 100%;
}

.rotate-container {
  -webkit-animation: present-rotate 30s infinite linear;
          animation: present-rotate 30s infinite linear;
  height: 100%;
  transform: rotateY(170deg);
  transform-style: preserve-3d;
}

@-webkit-keyframes present-rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes present-rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.bottom,
.front,
.left,
.back,
.right {
  background-color: #3a5588;
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.bottom {
  transform: translateY(50%) rotateX(90deg);
}

.front,
.left,
.back,
.right {
  transition: transform 0.5s;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

.front:after,
.left:after,
.back:after,
.right:after,
.lid-top:after,
.lid-front:after,
.lid-left:after,
.lid-back:after,
.lid-right:after {
  background-color: #0e1627;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  content: "";
  height: 100%;
  left: calc(50% - 10px);
  position: absolute;
  transform: translateZ(0.1px);
  width: 20px;
}

.lid-top:before {
  background-color: #3a5588;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: calc(50% - 10px);
  transform: translateZ(0.1px);
  width: 100%;
}

.left {
  transform: translateX(-50%) rotateY(-90deg);
}

.back {
  transform: translateZ(-120px) rotateY(180deg) rotateX(0);
}

.right {
  transform: translateX(50%) rotateY(90deg);
}

.front {
  transform: translateZ(120px);
}

.lid {
  -webkit-animation: lid-animation 3.5s 1s infinite;
          animation: lid-animation 3.5s 1s infinite;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

@-webkit-keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}

@keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}
.lid-top,
.lid-left,
.lid-back,
.lid-right,
.lid-front {
  background-color: #3a5588;
  border: 1px solid rgba(0, 0, 0, 0.2);
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 250px;
}

.lid-top {
  height: 250px;
  top: -5px;
  transform: translateY(-50%) rotateX(90deg);
  transform-style: preserve-3d;
}

.lid-left,
.lid-back,
.lid-right,
.lid-front {
  height: 40px;
  top: -5px;
  transform-style: preserve-3d;
}

.lid-left {
  transform: translateX(-50%) rotateY(-90deg);
}

.lid-back {
  transform: translateZ(-125px) rotateY(180deg);
}

.lid-right {
  transform: translateX(50%) rotateY(90deg);
}

.lid-front {
  transform: translateZ(125px);
}

.present:hover .lid {
  -webkit-animation: none;
          animation: none;
  transform: translate3d(0, -40px, -10px) rotateX(10deg);
}

.present.open .name {
  transform: translate3d(0, -50%, 10px) rotateY(1080deg) rotateX(10deg);
}
.present.open .instruction {
  opacity: 0;
}
.present.open .left {
  transform: translateX(-50%) rotateY(-90deg) rotateX(-90deg);
}
.present.open .back {
  transform: translateZ(-120px) rotateY(180deg) rotateX(-90deg);
}
.present.open .right {
  transform: translateX(50%) rotateY(90deg) rotateX(-90deg);
}
.present.open .front {
  transform: translateZ(120px) rotateX(-90deg);
}
.present.open .lid {
  -webkit-animation: none;
          animation: none;
  transform: translate3d(0, -120px, -120px) rotateX(50deg);
}