@font-face {
    font-family: pulp;
    src: url('font/pulp.ttf');
}


#doodlePack {

    font-family: pulp;
    margin-top: 2em;
    width: 90%;

    .bigText {
        font-size: 2.5em;
        background-color: #ffffff;
        color: #3fca41;
    }

    .bigTextInverted {
        font-size: 2.5em;
        color: #ffffff;
        background-color: #3fca41;
        text-align: center;
    }

    .doublePic {
        position: relative;
        display: grid;
        max-width: 100%;
        grid-template-columns: 1fr 1fr;

        .pic {

            position: relative;

            img {
                /*border: solid 2px #ffffff;*/
                max-width: 100%;
            }

            .p1 {
                position: absolute;
                left: 0.3em;
                top: 0.3em;
                margin: 0em;
                padding: 0.2em;
            }

            .p2 {
                position: absolute;
                right: 0.3em;
                top: 0.3em;
                margin: 0em;
                padding: 0.2em;
            }
        }


        .ou {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            font-size: 4em;
            background-color: #ffffff;
        }

    }

    .bigdubas {
        padding: 0em;
        margin: 0em;
        text-align: center;
    }

    .packSensationColor {
        color: #ef0be4;

    }

    .explication {
        text-align: center;
        margin-top: 1em;
        font-size: 1.1em;
    }

}

@media (max-width: 640px) {  

    #doodlePack {

        margin-top: 0em;
        width: 100%;

        .bigText {
            font-size: 1.2em
        }

    
        .bigTextInverted {
            font-size: 1.2em;
            padding: 0.2em 0em;
        }


        .doublePic {
            display: block;
        }

    }

}