/**
 * @depends /js/ui-ux.js
 * 
 * @author Devin Grinstead <devin.grinstead@dgwebllc.com>
 */

:root {
    /* defaults */
    font-size: 16px;
    --flex-direction: row;
}
@media (max-width: 320px) {
    :root {
        --grid-columns: 1;
        --flex-direction: column;
        --text-align: center;
        font-size: 12px;
    }
}
@media (min-width: 320px)  {
    /* smartphones, iPhone, portrait 480x320 phones */
    :root {
        --grid-columns: 1;
        --flex-direction: column;
        font-size: 14px;
    }
}
@media (min-width: 481px)  {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    :root {
        --flex-direction: row;
        --grid-columns: 2;
        font-size: 14px;
    }
}
@media (min-width: 641px)  {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    :root {
        --flex-direction: row;
        --grid-columns: 2;
        
        font-size: 14px;
    }
}
@media (min-width: 961px)  {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    :root {
        --flex-direction: row;
        --grid-columns: 3;
        font-size: 14px;
    }
}
@media (min-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */
    :root {
        --flex-direction: row;
        --grid-columns: 3;
        font-size: 14px;
    }
}
@media (min-width: 1281px) {
    /* hi-res laptops and desktops */
    :root {
        --flex-direction: row;
        --grid-columns: 4;
        font-size: 16px;
    }
}
@media (min-width: 1440px) {
    /* large desktops and hi-res screens */
    :root {
        --flex-direction: row;
        --grid-columns: 5;
        font-size: 18px;
    }
}
@media (min-width: 1920px) {
    /* desktop monitors */
    :root {
        --flex-direction: row;
        --grid-columns: 6;
        font-size: 24px;
    }
}


@-webkit-keyframes enlarge {
    0% { transform: scale(1.0);}
    100% { transform: scale(1.15);}
}
@keyframes enlarge {
    0% { transform: scale(1.0);}
    100% { transform: scale(1.15);}
}
@-webkit-keyframes return {
    0% { transform: scale(1.15);}
    100% { transform: scale(1.0);}
}
@keyframes return {
    0% { transform: scale(1.15);}
    100% { transform: scale(1.0);}
}
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
*, *::before, *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    position: relative;
}
a {
    text-decoration: none;
    font: inherit;
    color: inherit;
}
html, body {
    padding: 0;
    margin: 0;
}
.content {
    display: flex;
    align-items: center;
    margin: 1em 2em;
    padding: 0.625em;
    border-radius: 1.875em;
    border-width: 0.3125em;
    border-style: solid;
    flex-direction: var(--flex-direction, row);
}
.content.column {
    flex-direction: column;
}
.content.card {
    font-size: 1em;
}
.content > * {
    width: fit-content;
    height: fit-content;
}
.content .title {
    font-weight: 900;
    font-size: 2.25em;
}
.content .subtitle {
    font-weight: 500;
    font-size: 1.25em;
}
.content .message {
    width: 100%;
}
.sp1 {
    grid-column: span 1;
}
.sp2 {
    grid-column: span 2;
}
.sp3 {
    grid-column: span 3;
}
[class*="separator"] {
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-color: var(--s-color, var(--purple-highlight, black));
    border-style: solid;
    pointer-events: none;
    border-radius: 0.125em;
}
.separator-vertical {
    display: inline-block;
    height: var(--s-height, 60%);
    top: var(--s-offset, 20%);
    border-right-width: 0.3125em;
}
.separator-horizontal {
    width: var(--s-width, 60%);
    left: var(--s-offset, 20%);
    border-bottom-width: 0.3125em;
    display: block;
}

/* icons */
img.icon {
    height: 5em;
    width: 5em;
    border-radius: 50%;
    border-width: 0.1875em;
    border-style: inherit;
    padding: 0.25em;
    transition: transform 1s ease;
}
img.icon:hover {
    transform: scale(1.25, 1.25);
}

input, textarea, button {
    font-size: inherit;
    border-radius: 1em;
    padding: 0.5em;
}

/* buttons */
label:has(input[type="button"]),
label:has(input[type="submit"]),
button,
.button {
    display: inline-block;
    cursor: pointer;
    margin: 0.3125em;
    border-width: 0.15em;
    border-style: solid;
    font-size: inherit;
    border-radius: 1em;
    padding: 0.5em;
}
input[type="button"],
input[type="submit"] {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.5em;
    border: none;
    background: inherit;
    font-size: inherit;
    color: inherit;
    cursor: inherit;
}
label:has(input[type="button"])::before,
label:has(input[type="submit"])::before,
button::before,
.button::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: inherit;
    border: inherit;
    border-radius: inherit;
    border-width: inherit;
    transform: scale(1);
    transition: transform 1s, opacity 1s;
    cursor: pointer;
}
label:has(input[type="button"]):hover::before,
label:has(input[type="submit"]):hover::before,
button:hover::before,
.button:hover::before {
    opacity: 1;
    transform: scale(1.15);
    transition: transform 1s, opacity 1s;
}
label:has(input[type="button"]) > a,
label:has(input[type="submit"]) > a,
button > a,
.button > a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1em;
    font-size: 1.15em;
}