@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo&display=swap');


* {
    /* font-size: 1.2vw !important; */
    /* font-family: 'Big Shoulders Display', cursive; */
    font-family: 'Aleo', serif !important;

}

.container-fluid {
    max-width: auto !important;
}

:root {
    --co: #ffa500;
    --cdg: #a9a9a9;
    --cs: #d1d1d1;
    --cb: black;
    --cw: white;
}

.pg-skill{
    color: var(--co) !important;
}

.modal-dialog {

    /* max-width: 80% !important;
    margin: 4rem auto !important; */

    max-width: 70% !important;
    margin: 1rem auto !important;

}

.modal{
    overflow: hidden !important;
}

.d-flex button {
    width: 100% !important;
    height: 46vh !important;

}

/* @media screen and (max-width:900px) {
    .modal {
        height: auto !important;
        margin: 20% auto !important;
    }
} */

@media screen and (max-width:800px) {
    .buttons-1 {
        flex-wrap: wrap !important;
    }

    .d-flex button {
        width: 50% !important;
        height: 30vh !important;

    }

    .modal-dialog {
        max-width: 100% !important;
        margin: 1rem auto !important;
    }

}

@media screen and (max-width:500px) {
    /* .modal {
        height: auto !important;
        margin: 40% auto !important;
    } */

    .modal-dialog {
        max-width: 100% !important;
        margin: 4rem auto !important;
    }

    .d-flex button {
        width: 100% !important;
        height: 40vh !important;

    }

}