/* LAYOUT */

#mailinglist{
    font-family: NeueHelveticaPro65Medium, sans-serif;
}

#mailinglist .flexbox{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
    position: relative;
    padding-bottom: 60px;
    margin: 0 64px;
}

.middle-stuff{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 32px;
    flex: 1;
    max-width: 720px;
}

/* FEATURE BOXES */

.angel-container{
    display: flex;
    flex-direction: row;
    justify-content: end;
    width: 100%;
    position: relative;
}

.angel-container:nth-of-type(2n){
    justify-content: start;
}

.angel-container:nth-of-type(2n+1){
    text-align: end;
}

.angelbox{
    border: 4px solid black;
    padding: 16px;
    max-width: 400px;
    box-shadow: 0 3px black;
    z-index: 9;
    background: white;
}

.angelbox h3{
    text-transform: uppercase;
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 8px;
}

.angelbox p{
    margin: 0;
}

/* KICKSTARTER BUTTON */

.angel-ksb{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ksbp{
    margin: 0 0 8px;
    text-align: center;
}

.ksbutton-angel{
    position: relative;
}

/* TAILS */

.tail{
    position: absolute;
    z-index: -10;
}

.tail1{
    bottom: -200px;
    right: 10px;
}

.tail2{
    bottom: -140px;
    left: 240px;
}

.tail3{
    right: 5px;
    bottom: -110px;
}

.tail4{
    top: -110px;
    left: -256px;
}

/* ANGELS */

.angel{
    width: 340px;
}

.angel-1{
    position: relative;
    scale: 0.595;
}

.angel-1 img{
    position: absolute;
}

@keyframes headtilt {
    from{
        rotate: -8deg;
    }
    to{
        rotate: 8deg;
    }
}

.ahead{
    top: -340px;
    left: -23px;
    animation: headtilt alternate infinite 2s ease-in-out;
    transform-origin: center 70%;
}

@keyframes pitchtilt{
    from{
        transform: translateY(-8px) rotate(-40deg);
    }
    to{
        transform: translateY(4px) translateX(4px) rotate(-20deg);
    }
}

.apitch{
    left: -40px;
    top: -120px;
    animation: pitchtilt 1.5s alternate infinite ease-in-out;
    transform-origin: center 60%;
}

@keyframes angelfloat{
    from{
        transform: translateY(-90px);
    }
    to{
        transform: translateY(-80px);
    }
}

.angel-2{
    animation: angelfloat infinite alternate 1s ease-in-out;
}

/* RESPONSIVE */

@media (max-width: 1234px) {
    #mailinglist .flexbox{
        gap: 0;
        margin: 0 16px;
    }

    .middle-stuff p{
        padding-left: 8px;
    }

    .angelbox{
        max-width: 240px;
    }

    .angelbox h3{
        font-size: 24px;
    }

    .tail{
        transform-origin: top;
        transform: scale(0.8);
    }

    .tail1{
        right: -32px;
    }

    .tail2{
        left: 120px;
    }

    .tail3{
        bottom: -150px;
    }

    .tail4{
        top: -88px;
        left: -230px;
    }

    .angel-1{
        display: none;
    }

    .angel-2{
        display: none;
    }
}