.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100vw;
    text-align: left;
}

.flexitem {
    flex: 1;
    /* margin: 2px; */
    min-width: 20em;
    /* background-color: azure; */
}

.reactdiv {
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
}

@media screen and (min-width: 800px) {
    .flexcontainer {
        max-width: 100vw;
        padding-right: 10vw;
        padding-left: 10vw;
    }

    .flexitem {
        margin: 2em;
    }

    .reactdiv {
        margin-left: 25%;
        width: 50%;
        text-align: left;
    }

}

.popdiv {
    padding: 1em;
    border: black;
    border-style: inset;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0, -50%);
}

@media screen and (min-width: 800px) {
    .popdiv {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}