#box {
 width: 135px;
 height: 110px;
 margin: 30px auto; 
 background-color: #855d54;
 /*transform: rotate(45deg);
 transform: scale(2);
 transform: skewY(20deg);
 transform: translate(-50px,-50px);   
 transform: rotate(45deg) scale(2) skewY(20deg) translate(-50px,-50px);
 transition-property: all, background-color;
 transition-delay: .1s;
 transition-duration: 1s;
 transition-timing-function: ease-in-out;
 */
  transition: all 1s ease-in-out .1s;
} 

section{
 width: 400px;
 height: 60px;
 margin: auto;
}

#box:hover {
 cursor: pointer; 
 /*transition: all 1s linear;
 transform: rotate(360deg); */
 width: 200px;
 height: 60px;
 padding-right: calc(50% - 100px);
 border-radius: 15%;
 background-color: grey;
}

/* !!!Movie clapper effect!!! */

.container {
  /*border: 5px solid;*/
  width: 400px;
  height: 375px; /*sum of titlebox and textbox*/
  position: fixed;
  bottom: 60px;
  left: 10px;
}

.titlebox {
  width:400px;
  height:65px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.5);
  /*border: 5px solid blue;*/
  transform: rotate(-8deg);
  transform-origin: bottom left;
  text-align: left;
  transition: all 0.7s ease-in;
}

.title {
  font-size: 40px;
  opacity: 1 !important;
  vertical-align: middle;
  margin-left: 10px;
  line-height: 65px /* Need to be same as titlebox height */
}

.textbox {
  width: 400px;
  height: 300px;
  /*background-color: cyan;
  border: 5px solid blue;*/
}

.description {
  font-size: 18px;
  font-weight: normal;
  margin:0px 5px 0px 5px;
  transition: opacity 0.35s;
  transition-delay: 0.35s;
}

.quote{
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.35s;
  position: absolute;
  top: 75px; /* depend on titlebox height */
  left: 5px;
}

.container:hover .titlebox {
  transform: skewY(0deg)
}

.container:hover .description {
  opacity: 0;
  transition-delay: 0s !important;
}

.container:hover .quote {
  opacity: 1;
  transition-delay: 0.35s;
}


/*
.typewriter p2{
    color: white; 
    font-size: 20px; 
    /*padding: 10px;*/
    font-family: 'Manuale', Medium; 
    font-weight: regular;
    /*margin-height: 15px;
    margin-bottom: 15px;*/
    position: fixed;
    left: 20px;
    bottom: 100px;
    margin: 0px;
    width: 500px;
    border: 3px solid #73AD21;
 
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  /*white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0.01em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end 3.5s;
    
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% } /*need to change this*/
}

/* !!!The typewriter cursor effect!!! */

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}
*/