body {
  background-color: #f7ebe8;
}

#letter {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.vote-container {
  margin-top: 200px;
  width: 700px;
  background-color: #9d9999;
  display: flex;
  justify-content: center;
}

.vote-container form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

h1 {
  color: #2d2d2d;
}

form div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

input {
  margin-left: 20px;
  background: none;
  border: none;
  border-bottom: 1px solid #ffffff;
}

input:focus {
  outline: none;
}

form {
  display: block;
}

button {
  background-color: #d9d9d9;
  border: none;
  color: #ff7474;
  font-size: 20px;
  width: 250px;
  padding: 5px;
}

#cancel {
  color: #fff;
  margin-right: 20px;
  background-color: #ff7474;
}

.someclass {
  position: absolute;
  top: 1000px;
  width: 800px;
  height: 300px;
  background: #FF7474;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
} 

.flap {
  position: absolute;
  top: 1000px;
  left: 50%;
  transform: translateX(-50%) rotateX(0deg);
  width: 0;
  height: 0;
  border-left: 400px solid transparent;
  border-right: 400px solid transparent;
  border-bottom: 200px solid #117474;
  transform-origin: top center;
  z-index: -1;
}

.someclass2 {
  position: absolute;
  top: 1000px;
  width: 800px;
  height: 300px;
  background: #FF7474;
  border: 1px solid #000;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new{ 
/*   top: 200px; */
  animation: up 4s ease-in-out forwards;
}

.new_t{
animation: triangle 4s ease-in-out 0s forwards, turn_animation 4s ease-in-out 5s forwards;}

.App{
  animation: main_animation 6s ease-in-out 6s forwards, last_animation 4s ease-in-out 12s forwards;
  position: absolute;
}

.new_class{
  width: 700px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes last_animation {
  0% {
    top: 0px;
  }
  100% { 
    top: 400px;
  }
}


@keyframes main_animation {
  50% {
  transform: rotate3d(1,1,1,180deg) scale(0.2);  
  }
  100% {
  transform: rotate3d(1,1,1,360deg) rotateY(30deg) scale(0.2);
  }
}

@keyframes turn_animation {
  0% {
  z-index: 30;
    transform: translateX(-50%) rotateX(0deg);
  }
  100% {
  z-index: 30;
    transform: translateX(-50%) translateY(200%) rotateX(180deg);    
  }
}

@keyframes up {
  0% { 
    top: 1000px;
  }
  100% { 
    top: 200px;
  }
}

@keyframes triangle {
  0% { 
    top: 800px;
  }
  100% { 
    top: 0;
  }
}


#box{
  display: flex;
  justify-content: center;
  align-items: center;
}

 .colored-box {
      width: 620px;             
      height: 450px;            
      background: #9D9999; 
      border-radius: 8px;       
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), -4px -4px 10px rgba(0, 0, 0, 0.2);
      position: relative;
      transform: rotateX(20deg);
   display: flex;
   justify-content: end;
  border: 1px solid #000;
    }


#top{
  width: 600px;             
  height: 150px;            
  background: #E54B4B; 
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

#hole{
  width: 200px;             
  height: 50px;            
  background: #9D9999; 
  z-index: 40;
  border: 1px solid #000;
}

#container{
  display: flex;
  flex-direction: column;
  align-items: center;
}