/*atf-above the fold*/
section.atf{
    height: 80vh;
    width:100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/img/bg-atf1.jpeg');
    position: relative;
}
h1{
    margin: 0;
    color: var(--accent);
}
section.atf div{
    position: relative;
    top:40%;
    transform: translate( 5% ,-50%);
    background-color: color-mix(in srgb, var(--primary) 60%, transparent);
    padding: 12px;
    width: fit-content;
}
section.atf div p{
    color:var(--text);/*kinda bad but also better than white*/
}
@media(max-width:800px){
    section.atf{
        height: 70vw;
    }
    section.atf div{
        left: 50%;
        transform: translate(-50%, -45%);
        max-width: 400px;
    }
    section.atf *{
        text-align: center;
    }
}