/* the general styles to be used in multiple pages */
/* example: texts, colors, sizes, borders, backgrounds */

/* ========= COLOR PALETTES ========= */
:root {
    --body-color: rgb(243, 219, 176);
    --element-color: rgb(253, 240, 219);
    --element-variant: rgb(240, 199, 169);
    --accent-color: rgb(199, 107, 41);
    --accent-variant: rgb(246, 225, 72);
    --text-color: rgb(82, 25, 13);
    --text-variant: rgb(246, 238, 174);
    --link-unvisited: rgb(255, 86, 86);
    --link-hover: rgb(185, 76, 25);
    --link-active: rgb(79, 0, 0);
    --link-visited: rgb(191, 59, 167);
    --cafe-outside: url("/img/test-bg.jpg");
    --cafe-door: url("/img/test-door.png");
    --cafe-inside: url("/img/test-inside-cafe.png");
    --cafe-bg: url("/img/test-cafe-bg.png");
    --cafe-fg: url("/img/test-cafe-fg.png");
    --barista-idle: url("/img/test-idle.png");
    --barista-bg: url("/img/test-zoom-bg.png");
    --barista-fg: url("/img/test-zoom-fg.png");
}
.night-time {
    --body-color: rgb(10, 6, 73);
    --element-color: rgb(30, 32, 78);
    --element-variant: rgb(62, 69, 70);
    --accent-color: rgb(199, 107, 41);
    --accent-variant: rgb(246, 225, 72);
    --text-color: rgb(82, 25, 13);
    --text-variant: rgb(246, 238, 174);
    --link-unvisited: rgb(255, 86, 86);
    --link-hover: rgb(185, 76, 25);
    --link-active: rgb(79, 0, 0);
    --link-visited: rgb(191, 59, 167);
    --cafe-outside: url("/img/test-bg.jpg");
    --cafe-door: url("/img/test-door.png");
    --cafe-inside: url("/img/test-inside-cafe.png");
    --cafe-bg: url("/img/test-cafe-bg.png");
    --cafe-fg: url("/img/test-cafe-fg.png");
    --barista-idle: url("/img/test-idle.png");
    --barista-bg: url("/img/test-zoom-bg.png");
    --barista-fg: url("/img/test-zoom-fg.png");
}

/* ========= TEXTS & HEADERS ========= */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Coolvetica, Helvetica, sans-serif;
    color: var(--text-color);
}
a, p, span {
    font-size: 1em;
    font-family: 'Creato Display Light', Arial, sans-serif;
    color: var(--text-color);
}

form #submit {
    font-size: 1.2em;
    font-family: 'Creato Display Bold', Arial, sans-serif;
}

h1 { font-size: 3em;}
h2 { font-size: 2.5em;}
h3 { font-size: 2.1em;}
h4 { font-size: 1.8em;}
h5 { font-size: 1.5em;}
h6 { font-size: 1.2em;}
a:link {
    font-family: 'Creato Display Bold', Arial, sans-serif;
    color: var(--link-unvisited);
}
a:link:active {
    color: var(--link-active);
}
a:link:hover {
    color: var(--link-hover);
}
a:visited {
    color: var(--link-visited);
}
a:visited:active {
color: var(--link-active);
}
a:visited:hover {
color: var(--link-hover);
}

/* ======== GENERAL CLASSES ========== */
body {
    background-color: var(--body-color);
    padding: 0;
    margin: 0;
}

div {
    background-color: var(--element-color);
}
button {
    background-color: var(--element-color);
    border: 1px solid var(--accent-color);
    border-radius: 1em;
    cursor: pointer;
    transition: background-color 0.1s, border 0.1s, color 0.1s;
}
button:hover {
    background-color: var(--element-variant);
}
button:active {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--text-variant);
}

form input,
form textarea {
    background-color: var(--element-color);
    border: 2px solid var(--accent-color);
    border-radius: 3px;
}
form #submit {
    cursor: pointer;
    transition: 0.1s;
}
form #submit:hover {
    background-color: var(--element-variant);
}
form #submit:active {
    background-color: var(--accent-color);
    color: var(--text-variant);
}

/* ======== USER-DEFINED CLASSES =========== */
#card-container {
    width: 100%;
    height: 100vh;
    background-color: rgba(254, 255, 212, 0.496);
}

.col-10 {width: 100%;}
.col-9 {width: 90%;}
.col-8 {width: 80%;}
.col-7 {width: 70%;}
.col-6 {width: 60%;}
.col-5 {width: 50%;}
.col-4 {width: 40%;}
.col-3 {width: 30%;}
.col-2 {width: 20%;}
.col-1 {width: 10%;}

.row-10 {height: 100%;}
.row-9 {height: 90%;}
.row-8 {height: 80%;}
.row-7 {height: 70%;}
.row-6 {height: 60%;}
.row-5 {height: 50%;}
.row-4 {height: 40%;}
.row-3 {height: 30%;}
.row-2 {height: 20%;}
.row-1 {height: 10%;}

/* ====== DEFAULT CARD STYLE ======= */
.card {
    border: 2px solid var(--accent-color);
    align-content: start;
    text-align: end;
    position:fixed;
    cursor: grab;
    z-index: 10;
    border-radius: 0.8em 0.8em 0em 0em;
}
.card:active {
    cursor: grabbing;
}
.card-body {
    background-color: bisque;
    height: calc(100% - 1.2em - 24px);
    width: 100%-20px;
    text-align: start;
    cursor: default;
    z-index: 11;
    padding: 10px;
}
.card-body:first-child {margin-top: -10px;}
.card-close {
    width: 1.2em;
    height: 1.2em;
    margin-top: 4px;
    margin-right: 5px;
    z-index: 11;
    padding: 0px;
}

/* ========= MISCELLANEOUS ========== */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}