h2{
    font-family: 'Bebas Neue', cursive;
    white-space: nowrap;
    position: relative;
    
}


/* ============BIRDS Origami============================================================================================ */

.backgroundbox{

    background-color: linear-gradient(180deg, rgba(0,0,255,1), rgba(0, 0, 255, 0.6) 70%);
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 5s;
    cursor: crosshair;
}
.title{
    width:100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    color:rgba(0,0,255,.3);
    font-size: 20vh;
    font-family: 'Kosugi', sans-serif;
    transition: all 5s;
}
@media screen and (max-width: 670px){
    .title{
        font-size: 10vw;
    }
}

.box3d{
    position: absolute;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}
.killbox{
    width: 15%;
    
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    overflow: hidden;
}
.killedbird{
    padding: 0.5rem;
    margin: 0.1rem;
    font-family: 'Kosugi', sans-serif;
    display: flex;
    justify-content: center;
    background: white
}


   
.birdbodyA1,
.birdbodyA2{
    position: absolute;
    transform: rotateX(-45deg) translateZ(0px);
    transform-style: preserve-3d;
}

.birdbodyB1,
.birdbodyB2{
    position: absolute;
    transform: rotateX(45deg);
    transform-style: preserve-3d;
}
.birdbodyA{
    
    transform: translateZ(16px) ;
    transform-style: preserve-3d;
}
.birdbodyB{
    transform-origin: 0px 25px;
    transform: translateZ(-16px);
    transform-style: preserve-3d;
}

.birdbody{
    position: absolute;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}
.birdwingA1,
.birdwingA2,
.birdwingB1,
.birdwingB2{
    position: absolute;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
}
.birdwingA{
    position: absolute;
    transform-origin: 0px 110px;
    transform: translateY(-102px) translateZ(35px) rotateX(-120deg);
    transform-style: preserve-3d;
    animation: animate2 0.2s linear infinite;
}
.birdwingB{
    position: absolute;
    transform-origin: 0px 110px;
    transform: translateY(-102px) translateZ(-35px) rotateX(120deg);
    transform-style: preserve-3d;
    animation: animate1 0.2s linear infinite;
}

.kubobird1{
    position: absolute;
    top: 50%;
    left: calc(50% - 50px);
    transform: rotateY(10deg) translateX(-500px);
    transform-style: preserve-3d;
    
}

@keyframes animate1{
    0%{ transform: translateY(-102px) translateZ(-35px) rotateX(80deg); }
    50%{ transform: translateY(-102px) translateZ(-35px) rotateX(120deg); }
    100%{ transform: translateY(-102px) translateZ(-35px) rotateX(80deg); }
}
@keyframes animate2{
    0%{ transform: translateY(-102px) translateZ(35px) rotateX(-80deg); }
    50%{ transform: translateY(-102px) translateZ(35px) rotateX(-120deg); }
    100%{ transform: translateY(-102px) translateZ(35px) rotateX(-80deg); }
}
@keyframes animate3{
    0%{ transform: rotateY(-40deg)  rotateZ(-15deg) translateX(-500px) }
    100%{ transform: rotateY(40deg) translateX(4000px); top: -100px }
}

.birdsheader{
    height: 100px;
}