/* Variables */
:root {
    /*Pastel Palette*/
    --lavender-pink: #FFB8D1;
    --orchid-pink: #E4B4C2;
    --thistle: #E7CEE3;
    --ghost-white: #E0E1E9;
    --light-cyan: #DDFDFE;

    /**/
    --coyote: #7A6C5D;
    --charcoal: #2A3D45;
    --dun: #DDC9B4;
    --khaki: #BCAC9B;
    --old-rose: #C17C74;

    --bg-color: var(--old-rose);
    --container-color: var(--old-rose);
}

/* Fonts */
@font-face {
    font-family: blackout2am;
    src: url("../media/fonts/Blackout\ 2\ AM.ttf");
}

@font-face {
    font-family: neueblack;
    src: url("../media/fonts/TheNeue-Black.ttf");
}

@font-face {
    font-family: junction-regular;
    src: url("../media/fonts/Junction-regular.otf");
}

@font-face {
    font-family: fanwood;
    src: url("../media/fonts/Fanwood.otf");
}


/* Existing Elements */
body {
    margin: 0;
    background: var(--bg-color);
}

/* Framework Classes */
.container {
    background: var(--container-color);
}

/* Custom Classes */
.dimension_sign {
    margin-inline: auto;
    margin-top: 3%;
    width: fit-content;
    text-align: center;
    font-family: blackout2am;
    rotate: 2deg;
    --text-color: var(--ghost-white);
    background: linear-gradient(var(--bg-color) 10%, var(--text-color) 10%, var(--text-color) 90%, var(--bg-color) 90%);
}

.traveler_license {
    /* Sizing Variables */
    --aspect-ratio: calc(85.6/54);
    --edge-round-strength: 5%;
    --license-width: 400px;
    --license-height: calc(var(--license-width) / var(--aspect-ratio));
    --lw: calc(var(--license-width) / 100);
    --lh: calc(var(--license-height) / 100);

    background-color: rgb(255, 233, 239);
    border-radius:  var(--edge-round-strength) / calc(var(--edge-round-strength) * var(--aspect-ratio));
    overflow: hidden;
    margin: auto;
    width: var(--license-width);
    height: var(--license-height);

    .header {
        height: calc(12*var(--lh));
        background-color: palevioletred;
        display: flex;
        align-items: center;

        .title {
            font-family: neueblack;
            font-size: calc(4*var(--lw));
            padding-left: calc(7*var(--lw));
            color:rebeccapurple
        }
    }

    .body {
        width: 100%;
        height: calc(88*var(--lh));
        display: flex;

        .picture {
            width: calc(30*var(--lw));
            margin-top: calc(8*var(--lh));
            margin-bottom: calc(20*var(--lh));
            margin-inline: calc(7*var(--lw));

            text-align: center;
            vertical-align: middle;
            display: flex;

            overflow: scroll;

            p {
                margin: auto;
            }

            background-color: azure;
        }

        .info {
            width: calc(45*var(--lw));
            margin-top: calc(8*var(--lh));
            margin-bottom: calc(20*var(--lh));
            /* background-color: #FFFFFF60; */

            .label {
                color: plum;
                font-size: calc(2*var(--lw));
                font-family: junction-regular;
            }

            .text {
                color: black;
                font-size: calc(3*var(--lw));
                font-family: fanwood;
                margin-bottom: calc(2*var(--lh));
                height: calc(8*var(--lh));
            }

            .num {
                color: black;
                font-size: calc(3.5*var(--lw));
                font-family: fanwood;
                margin-bottom: calc(2*var(--lh));
                height: calc(8*var(--lh));
            }
        }
    }
}

/* Larger than mobile */
@media (min-width: 400px) {
    .traveler_license {
        --license-width: 150px;
    }}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .traveler_license {
        --license-width: 200px;
    }}

/* Larger than tablet */
@media (min-width: 750px) {
    .traveler_license {
        --license-width: 300px;
    }}

/* Larger than desktop */
@media (min-width: 1000px) {
    .traveler_license {
        --license-width: 400px;
    }}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    .traveler_license {
        --license-width: 500px;
    }
}