@import url(https://fonts.googleapis.com/css?family=Six+Caps);

html * {
  box-sizing: border-box;
  margin:0;
}

@media (min-width: 850px) {
  body {
    justify-content: center;
    margin:0;
  }
}

@media (min-width: 1200px) {
  .border-animation {
    font-size: 6em;
    line-height: 1em;    
  }
}

h2 {
  text-align:center;
  padding:10px;
  font-size:24px;
  color:maroon;
  padding-top:40px;
  text-shadow: 2px 2px lightblue;
}
h3 {
  font-size:18px;
  color:maroon;
  padding-top:40px;
  text-shadow: 2px 2px lightblue;
}

.centerdiv {
  display:flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;  
}

iframe {
  width: 99%;
  height: 500px;
}

.foother {
  width: 99%;
  height: 7%;
  font-size:12px;
  color:gray;
  position :absolute;

  top:90%;
  border:1px solid lightblue;
  display:flex;
  align-items: center;
  justify-content: center;
}

frameset {
  overflow:hidden; 
  display:block;
  align-items: center;
  justify-content: center;
  margin: 0;
  border:none;
}
frame {
  display:inline-block;
  align-items: center;
  justify-content: center;
}

#contents{
  font-family: 'Times New Roman', Times, serif;
  font-size: 36px;
  color:rgb(76, 0, 78);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 4px 4px 8px rgb(10, 10, 10);
  animation-duration: 3s;
  animation-name:   animouvreY;
  animation-iteration-count:  1;  
  vertical-align:bottom; 
}


.error {
  font-family: 'Times New Roman', Times, serif;
  font-size: 12px;
  color:red;
  animation: shake 1s ease-in-out forwards;  
}

@keyframes slidefromtop {
    from {
      margin-top: -100%;
    }
  
    to {
      margin-top: 0;
    }
  }

  @keyframes slidefromleft {
    from {
      margin-left: -250%;
      /*transform:rotate(180deg);*/
    }
  
    to {
      margin-left: 0;
      
    }
  }

  .mybounce {
    animation-duration: 0.2s;
    animation-name:   shakeanimate;
    animation-iteration-count: 1;
    margin:0;
    padding:0; 
    display:flex;
    align-items: center;
    flex-direction:column;
    flex-wrap: wrap;
  }
  @keyframes shakeanimate {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    20% {transform: rotateY(90deg);}
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
 } 

 .mytilt {
  animation-duration: 0.2s;
  animation-name: horizontal-shaking;
  animation-iteration-count:  3;   
  margin:0;
  padding:0;  
  display:flex;
  align-items: center;
  flex-direction:column;
  flex-wrap: wrap;
}
 @keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
  
 }

.ouvertureY {
  position:relative;
  width:100%;
  animation-duration: 2s;
  animation-name:   animouvreY;
  animation-iteration-count:  1; 
  display:inline-table;  
}


@keyframes animouvreY{
  0% { transform: rotateY(90deg); }
  50% { transform: rotateY(0deg); }
  100% { transform: rotateY(0deg); }
}

.ouvertureX {
  position:relative;
  width:100%;
  animation-duration: 2s;
  animation-name:   animouvreX;
  animation-iteration-count:  1; 
  display:inline-table;  
}

@keyframes animouvreX{
  0% { transform: rotateX(90deg); }
  50% { transform: rotateX(0deg); }
  100% { transform: rotateX(0deg); }
}