body {
    background-color: rgb(31, 31, 31);
}

* {

    font-family: Arial, Helvetica, sans-serif;
    color: rgb(99, 99, 99);
}

@media only screen and (orientation: portrait) {
    h1 {
        text-align: center;
    }

    .noclick {
        user-select: none;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
    }

    html {
        max-height: 100%;
        max-width: 100%;

    }

    .card {

        position: relative;
        left: 5vw;

        height: 70vh;
        width: 85vw;
        border-radius: 1rem;
        background-color: rgb(47, 47, 47);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: all 1s ease;

    }

    .front,
    .back {
        padding: 8px;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }

    .flipCard {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        background: transparent;
        /* only way to fix ios? */
    }

    .front {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        text-align: left;

    }

    .front h2 {
        text-align: center;
    }



    .front ul {
        margin: 0em;
        padding-inline-start: 25px;
        margin-inline-end: 0em;

    }


    .back {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        position: absolute;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: flex;
        justify-content: center;
        flex-direction: column;
        top: 25vh;
        width: 95%;
        align-items: center;

        border-radius: 1rem;
        background-color: rgb(47, 47, 47);
    }

    .cardbutton {
        display: flex;
        position: absolute;
        top: 82vh;
        width: 95vw;
        justify-content: center;
    }

    #myButton {
        background-color: rgb(47, 47, 47);
        height: 55px;
        width: 200px;
        border-radius: 1rem;
        border: none;
    }


    .source {
        position: absolute;
        text-align: center;
        top: 125%;
        width: 95%;
        padding: inherit;
        background-color: inherit;
        border-radius: inherit;

    }

    .source p {
        font-style: normal;
        font-weight: bold;

    }

    .source a {
        font-style: italic;
        font-weight: normal;
    }
}