/* Page layer for the Doshii OAuth pages — loaded after the
   normalize.css/skeleton.css copies in this folder, mirroring how the
   cdn/resources pages are built. */

.section {
    text-align: center;
}

/* Hero — blue band with the white Paimnt mark */
.hero {
    background-color: #0049E6;
    color: #d2d2d2;
    padding: 3rem 0;
    margin-bottom: 4rem;
}

.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-image {
    position: relative;
}

.logo {
    display: block;
    width: min(420px, 80vw);
    height: auto;
}

.product-title {
    font-weight: 900;
    font-variant: small-caps;
    font-size: min(5vw, 40px);
    color: #fff;
    position: absolute;
    bottom: -20px;
    right: min(13%, 85px);
    margin: 0;
}

/* skeleton.css buttons are styled for the dark hero (transparent with a
   white border) — recolour them for the white content area. */
button {
    color: #0049E6;
    border-color: #0049E6;
}
button:hover,
button:focus {
    color: #fff;
    background-color: #0049E6;
}
button.button-primary {
    color: #fff;
    background-color: #0049E6;
    border-color: #0049E6;
}
button.button-primary:hover,
button.button-primary:focus {
    color: #0049E6;
    background-color: #fff;
    border-color: #0049E6;
}

/* Authorize form */
.auth-card {
    max-width: 420px;
    margin: 0 auto;
}
.auth-card label {
    text-align: left;
}
.auth-card input {
    width: 100%;
}
.field {
    margin-bottom: 1.5rem;
}
.message {
    color: #B33A3A;
    font-weight: 600;
}

.copyright {
    font-weight: 200;
    margin: 4rem 0 2rem;
    text-align: center;
}