body {
    background-color: #FAFAFA;
    height: 100vh;
    width: 100vw;
    margin: 0;
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
}

#container {
    height: 100vh;
    width: 100vw;
}

.valign-wrapper {
    display: flex;
    align-items: center;
}

.clearfix {
    clear: both;
}

.center, .center-align {
    text-align: center;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#card {
    max-height: 80vh;
    width: 60vw;
    background-color: white;
    margin-top: auto;
    margin-bottom: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}

#card img {
    max-width: 100px;
    max-height: 100px;
}

#card p {
    color: black;
}

@media screen and (orientation: landscape) and (max-width: 991px) {
    #card {
        max-height: 80vh !important;
        width: 80vw !important;
    }
}

@media screen and (orientation: portrait) and (max-width: 991px) {
    #card {
        max-height: 80vh !important;
        width: 60vw !important;
    }
}

@media (min-width: 993px) {
    #card {
        max-height: 80vh !important;
        width: 60vw !important;
    }
}

@media only screen and (min-width: 360px) {
    p {
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 390px) {
    p {
        font-size: 1.224rem;
    }
}

@media only screen and (min-width: 420px) {
    p {
        font-size: 1.248rem;
    }
}

@media only screen and (min-width: 450px) {
    p {
        font-size: 1.272rem;
    }
}

@media only screen and (min-width: 480px) {
    p {
        font-size: 1.296rem;
    }
}

@media only screen and (min-width: 510px) {
    p {
        font-size: 1.32rem;
    }
}

@media only screen and (min-width: 540px) {
    p {
        font-size: 1.344rem;
    }
}

@media only screen and (min-width: 570px) {
    p {
        font-size: 1.368rem;
    }
}

@media only screen and (min-width: 600px) {
    p {
        font-size: 1.392rem;
    }
}

@media only screen and (min-width: 630px) {
    p {
        font-size: 1.416rem;
    }
}

@media only screen and (min-width: 660px) {
    p {
        font-size: 1.44rem;
    }
}

@media only screen and (min-width: 690px) {
    p {
        font-size: 1.464rem;
    }
}

@media only screen and (min-width: 720px) {
    p {
        font-size: 1.488rem;
    }
}

@media only screen and (min-width: 750px) {
    p {
        font-size: 1.512rem;
    }
}

@media only screen and (min-width: 780px) {
    p {
        font-size: 1.536rem;
    }
}

@media only screen and (min-width: 810px) {
    p {
        font-size: 1.56rem;
    }
}

@media only screen and (min-width: 840px) {
    p {
        font-size: 1.584rem;
    }
}

@media only screen and (min-width: 870px) {
    p {
        font-size: 1.608rem;
    }
}

@media only screen and (min-width: 900px) {
    p {
        font-size: 1.632rem;
    }
}

@media only screen and (min-width: 930px) {
    p {
        font-size: 1.656rem;
    }
}

@media only screen and (min-width: 960px) {
    p {
        font-size: 1.68rem;
    }
}

@media only screen and (max-width: 360px) {
    p {
        font-size: 1.2rem;
    }
}