/* dark modes and light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: rgb(255, 249, 242);
    }

    h1,
    h2,
    h3,
    p,
    #btn1{
        color: #1e1e1e;
    }
}


@media only screen and (max-width: 600px) {
    .cards {
        width: 85%;
        height: 30rem;
        flex-direction: column;
        height: 30rem;
    }

    .cimg {
        height: 50%;
        margin-top: 19px;
    }

    .about p {
        font-size: 2.7vh;
    }

    .cimg,
    .title,
    .title p {
        width: 90%;
        margin-top: 10px;
    }

    .descrip h3 {
        font-size: 3vh !important;
    }

    .descrip p,
    footer p {
        font-size: 1.7vh;
    }

    .buttons {
        justify-content: space-between;
    }

    .buttons #btn1 {
        margin: 0px 0px 10px 0px;
        font-size: 2.2vh;
    }

    .social {
        width: 70%;
    }

    .fab {
        height: 20px;
        width: 20px;
    }
    .message{
        font-size: 1.3vh;
        top: 10px;
        right: 5px;
    }
}