/* ------------------- */
/* Properties          */ 
/* ------------------- */


:root {

  /* colors */
  --clr-white:     0 0% 100%;
  --clr-off-white:  0 0% 99%;
  --clr-success: 121 40% 54%;
  --clr-error:     2 64% 58%;
  --clr-primary: 208 56% 46%;

  --clr-redbtn: 360 56% 46%;
  --clr-greenbtn: 110 56% 46%;
  --clr-orangebtn: 24 56% 46%;
  --clr-yellowbtn: 63 56% 46%;
  --clr-lightbluebtn: 167 56% 46%;
  --clr-purplebtn: 167 56% 46%;
  --clr-pinkbtn: 307 56% 46%;

  --clr-txt-main: 0 0% 20%;
  --clr-border-primary: 0 0% 87%;

  /* font-sizes */
  --fs-900: 9rem;
  --fs-800: 6.25rem;
  --fs-750: 6rem;
  --fs-700: 3.5rem;
  --fs-650: 2.4375rem;
  --fs-600: 2rem;
  --fs-500: 1.75rem;
  --fs-450: 1.5rem;
  --fs-400: 1.25rem;
  --fs-300: 1rem;
  --fs-200: 0.875rem;

  /* font-families */
  --ff-sans-normal: "Roboto", sans-serif;

  /* spacing */
  --flow-space: 0.25rem;

  --border-default: 1px solid hsl( var(--clr-border-primary) );
  --border-radius: var(--border-rad, 4px);
}

/* ------------------- */


/* ------------------- */
/* Browser Reset       */
/* ------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
    border: 0;
    box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 400;
}

h1,
h2,
h3 {
    font-weight: 500;
}

h1 {
    font-size: var(--fs-500);
}


.main-title {
    font-size: 2.4375rem;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
}

html,
body {
    color: hsl( var(--clr-txt-main) );
    font-family: var(--ff-sans-normal);
    line-height: 1.5;
}

/* All <a> elements that don't have a class get default styles */
a:not([class]) {
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
}

a:hover {
    text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
    display: block;
    max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    border: 0;
    font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
                animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* ------------------- */
/* Utility             */
/* ------------------- */

/* general */

.flex {
    display: flex;
    gap: var(--gap, 1rem);
}

.flex.wrap {
    flex-wrap: wrap;
}

.flex.between {
    justify-content: space-between;
}

.grid {
    display: grid;
    gap:  var(--gap, 1rem);
}

.flow > * + * {
    margin-top: var(--flow-space, 1rem);
}

/* "flex" utility class works better for this */
.flow-inline > * { display: inline-block; }
.flow-inline > * + * {
    margin-left: var(--flow-space, 1rem);
}

.center-content {
    display: grid;
    place-content: center;
}

.rain-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.round-corners {
    border-radius:var(--border-radius);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.panel {
    border: var(--border-default);
    padding: 1rem;
}

.border-bottom {
    position: relative;
}

.border-bottom::after {
    background-color: hsl( var(--clr-border-primary) );
    bottom: 0;
    content: ' ';
    display: block;
    height: 1px;
    position: absolute;
    width: 100%;
}

.border-top {
    position: relative;
}
.border-top::before {
    background-color: hsl( var(--clr-border-primary) );
    content: ' ';
    display: block;
    height: 1px;
    position: absolute;
    top: 0;
    width: 100%;
}

.hidden {
    display: none;
}

/* colors */

.bg-grey     { background-color: hsl( var(--clr-med-light) ); }
.bg-dark     { background-color: hsl( var(--clr-dark) ); }
.bg-med-dark { background-color: hsl( var(--clr-med-dark) ); }
.bg-light    { background-color: hsl( var(--clr-light) ); }
.bg-white    { background-color: hsl( var(--clr-white) ); }
.bg-tmp-sidebar { background-color: hsl( var(--clr-tmp-sidebar) ); }

.text-dark   { color: hsl( var(--clr-dark) ); }
.text-light  { color: hsl( var(--clr-light) ); }
.text-white  { color: hsl( var(--clr-white) ); }
.text-grey   { color: hsl( var(--clr-txt-grey) ); }

/* typography */

.ff-sans-normal { font-family: var(--ff-sans-normal); }

.letter-spacing-1 { letter-spacing: 4.75px; }
.letter-spacing-2 { letter-spacing: 2.7px; }
.letter-spacing-3 { letter-spacing: 2.35px; }

.uppercase   { text-transform: uppercase; }
.text-center { text-align: center; }
.bold        { font-weight: 500; }
.italic      { font-style: italic; }

.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-750 { font-size: var(--fs-750); }
.fs-700 { font-size: var(--fs-700); }
.fs-650 { font-size: var(--fs-650); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-450 { font-size: var(--fs-450); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }

.text-blue { color: hsl( var(--clr-primary) ); }


/* ---------------------------------- */
/* Specifics Per Major Layout Element */
/* ---------------------------------- */

/* cart */
.cart-page span {
    white-space: nowrap;
}

.cart-layout > * > * {
    padding: 2rem;
}
.cart-layout > *:first-child {
    width: 60vw;
}
.cart-layout > *:last-child {
    background-color: hsl( var(--clr-off-white) );
    position: relative;
    width: 40vw;
}
.cart-layout > *:last-child::after {
    background-color: hsl( var(--clr-border-primary) );
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
}

.cart-item span:nth-child(2) {
    margin-left: auto;
}

.cart-item span:last-of-type {
    /*margin-left: 50px;*/
    min-width: 30%;
    text-align: right;
}

.alert-success {
    color: hsl( var(--clr-success) );
}

.alert-error {
    color: hsl( var(--clr-error) );
}

.alert > i {
    display: block;
}


/* buttons */

.btn-rect {
    background-color: hsl( var(--clr-primary) );
    border-radius: var(--border-radius);
    color: hsl( var(--clr-white) );
    cursor: pointer;
    font-size: var(--fs-500);
    min-width: 250px;
    padding: 0.75rem 0;
    text-align: center;
}

.btn-circle {
    aspect-ratio: 1;
    background-color: hsl( var(--clr-primary) );
    border-radius: 50%;
    color: hsl( var(--clr-white) );
    cursor: pointer;
    white-space: nowrap;
    width: 180px;
}

.btn-square {
    background-color: hsl( var(--clr-primary) );
    border-radius: var(--border-radius);
    color: hsl( var(--clr-white) );
    cursor: pointer;
    font-size: var(--fs-500);
    width: 180px;
    height: 180px;
    padding: 0.75rem 0;
    text-align: center;
    position: relative;
}

.btn-toptext{
    position:absolute;
    font-size: var(--fs-650);
    top:0px;
    text-align: center;
    width:180px;
}
.btn-bottomtext{
    position:absolute;
    font-size: var(--fs-400);
    bottom:0px;
    text-align: center;
    width:180px;
}


.btn-red{
    background-color: hsl(var(--clr-redbtn));
}
.btn-green{
    background-color: hsl(var(--clr-greenbtn));
}
.btn-orange{
    background-color: hsl(var(--clr-orangebtn));
}
.btn-yellow{
    background-color: hsl(var(--clr-yellowbtn));
}
.btn-lightblue{
    background-color: hsl(var(--clr-lightbluebtn));
}
.btn-purple{
    background-color: hsl(var(--clr-purplebtn));
}
.btn-pink{
    background-color: hsl(var(--clr-pinkbtn));
}


.btn-touchscreen {
    background-color: transparent;
    border: var(--border-default);
    border-radius:var(--border-radius);
    display: flex;
    flex-direction: column;
    font-weight: 500;
    justify-content: center;
    min-height: 7em;
    padding: 0.625em;
    transition: background-color 0.3s, color 0.3s;
    width: 8.75em;
}

.btn-touchscreen:hover,
.btn-touchscreen:active,
.btn-touchscreen:focus,
.btn-touchscreen:focus-within {
    background-color: hsl( var(--clr-dark) );
    color: hsl( var(--clr-txt-light) );
    text-decoration: none;
}

.btn-touchscreen,
.btn-touchscreen * {
    color: inherit;
}

.btn-touchscreen > i,
.btn-touchscreen > span {
    text-align: center;
}

.btn-touchscreen i {
    font-size: 2.3em;
}

.btn-touchscreen > span {
    font-size: 1em;
    line-height: 1.2;
    margin-top: 0.625em;
}

/* form elements

example proper form grouping:

<div class="form-group">
    <label class="control-label">Test</label>
    <input class="form-control" type="text" name="test" placeholder="test">
</div>

 */

.form-group {
    margin-bottom: 1rem;
    position: relative;
}

.form-group .small {
    position: absolute;
}

.control-label {
    display: block;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.form-control {
    margin-bottom: 0;
}

.email-input {
    border: var(--border-default);
    border-radius: var(--border-radius);
    min-height: 60px;
    min-width: 600px;
    padding-left: 10px;
}


/* Spacing */
.pada-0       { padding: 0; }
.pada-xxs     { padding: 5px; }
.pada-xs      { padding: 10px; }
.pada-sm      { padding: 15px; }
.pada-m       { padding: 20px; }
.pada-xl      { padding: 30px; }
.pada-xxl     { padding: 40px; }
.pada-50-xl   { padding: 50px; }
.pada-xxxl    { padding: 60px; }
.pada-70-xl   { padding: 70px; }
.pada-100-xl  { padding: 100px; }
.pada-max     { padding: 150px; }

.padt-0       { padding-top: 0; }
.padt-xxs     { padding-top: 5px; }
.padt-xs      { padding-top: 10px; }
.padt-sm      { padding-top: 15px; }
.padt-m       { padding-top: 20px; }
.padt-xl      { padding-top: 30px; }
.padt-xxl     { padding-top: 40px; }
.padt-50-xl   { padding-top: 50px; }
.padt-xxxl    { padding-top: 60px; }
.padt-70-xl   { padding-top: 70px; }
.padt-100-xl  { padding-top: 100px; }
.padt-max     { padding-top: 150px; }

.padr-0       { padding-right: 0; }
.padr-xxs     { padding-right: 5px; }
.padr-xs      { padding-right: 10px; }
.padr-sm      { padding-right: 15px; }
.padr-m       { padding-right: 20px; }
.padr-xl      { padding-right: 30px; }
.padr-xxl     { padding-right: 40px; }
.padr-50-xl   { padding-right: 50px; }
.padr-xxxl    { padding-right: 60px; }
.padr-70-xl   { padding-right: 70px; }
.padr-100-xl  { padding-right: 100px; }
.padr-max     { padding-right: 150px; }

.padb-0       { padding-bottom: 0; }
.padb-xxs     { padding-bottom: 5px; }
.padb-xs      { padding-bottom: 10px; }
.padb-sm      { padding-bottom: 15px; }
.padb-m       { padding-bottom: 20px; }
.padb-xl      { padding-bottom: 30px; }
.padb-xxl     { padding-bottom: 40px; }
.padb-50-xl   { padding-bottom: 50px; }
.padb-xxxl    { padding-bottom: 60px; }
.padb-70-xl   { padding-bottom: 70px; }
.padb-100-xl  { padding-bottom: 100px; }
.padb-max     { padding-bottom: 150px; }

.padl-0       { padding-left: 0; }
.padl-xxs     { padding-left: 5px; }
.padl-xs      { padding-left: 10px; }
.padl-sm      { padding-left: 15px; }
.padl-m       { padding-left: 20px; }
.padl-xl      { padding-left: 30px; }
.padl-xxl     { padding-left: 40px; }
.padl-50-xl   { padding-left: 50px; }
.padl-xxxl    { padding-left: 60px; }
.padl-70-xl   { padding-left: 70px; }
.padl-100-xl  { padding-left: 100px; }
.padl-max     { padding-left: 150px; }

.padx-0       { padding-left: 0;      padding-right: 0; }
.padx-xxs     { padding-left: 5px;    padding-right: 5px; }
.padx-xs      { padding-left: 10px;   padding-right: 10px; }
.padx-sm      { padding-left: 15px;   padding-right: 15px; }
.padx-m       { padding-left: 20px;   padding-right: 20px; }
.padx-xl      { padding-left: 30px;   padding-right: 30px; }
.padx-xxl     { padding-left: 40px;   padding-right: 40px; }
.padx-50-xl   { padding-left: 50px;   padding-right: 50px; }
.padx-xxxl    { padding-left: 60px;   padding-right: 60px; }
.padx-70-xl   { padding-left: 70px;   padding-right: 70px; }
.padx-100-xl  { padding-left: 100px;  padding-right: 100px; }
.padx-max     { padding-left: 150px;  padding-right: 150px; }

.pady-0       { padding-bottom: 0;      padding-top: 0; }
.pady-xxs     { padding-bottom: 5px;    padding-top: 5px; }
.pady-xs      { padding-bottom: 10px;   padding-top: 10px; }
.pady-sm      { padding-bottom: 15px;   padding-top: 15px; }
.pady-m       { padding-bottom: 20px;   padding-top: 20px; }
.pady-xl      { padding-bottom: 30px;   padding-top: 30px; }
.pady-xxl     { padding-bottom: 40px;   padding-top: 40px; }
.pady-50-xl   { padding-bottom: 50px;   padding-top: 50px; }
.pady-xxxl    { padding-bottom: 60px;   padding-top: 60px; }
.pady-70-xl   { padding-bottom: 70px;   padding-top: 70px; }
.pady-100-xl  { padding-bottom: 100px;  padding-top: 100px; }
.pady-max     { padding-bottom: 150px;  padding-top: 150px; }

.mara-auto    { margin: auto; }
.mara-0       { margin: 0; }
.mara-xxs     { margin: 5px; }
.mara-xs      { margin: 10px; }
.mara-sm      { margin: 15px; }
.mara-m       { margin: 20px; }
.mara-xl      { margin: 30px; }
.mara-xxl     { margin: 40px; }
.mara-50-xl   { margin: 50px; }
.mara-xxxl    { margin: 60px; }
.mara-70-xl   { margin: 70px; }
.mara-100-xl  { margin: 100px; }
.mara-max     { margin: 150px; }

.mart-auto    { margin-top: auto; }
.mart-0       { margin-top: 0; }
.mart-xxs     { margin-top: 5px; }
.mart-xs      { margin-top: 10px; }
.mart-sm      { margin-top: 15px; }
.mart-m       { margin-top: 20px; }
.mart-xl      { margin-top: 30px; }
.mart-xxl     { margin-top: 40px; }
.mart-50-xl   { margin-top: 50px; }
.mart-xxxl    { margin-top: 60px; }
.mart-70-xl   { margin-top: 70px; }
.mart-80-xl   { margin-top: 80px; }
.mart-100-xl  { margin-top: 100px; }
.mart-max     { margin-top: 150px; }

.marr-auto    { margin-right: auto; }
.marr-0       { margin-right: 0; }
.marr-xxs     { margin-right: 5px; }
.marr-xs      { margin-right: 10px; }
.marr-sm      { margin-right: 15px; }
.marr-m       { margin-right: 20px; }
.marr-xl      { margin-right: 30px; }
.marr-xxl     { margin-right: 40px; }
.marr-50-xl   { margin-right: 50px; }
.marr-xxxl    { margin-right: 60px; }
.marr-70-xl   { margin-right: 70px; }
.marr-100-xl  { margin-right: 100px; }
.marr-max     { margin-right: 150px; }

.marb-auto    { margin-bottom: auto; }
.marb-0       { margin-bottom: 0; }
.marb-xxs     { margin-bottom: 5px; }
.marb-xs      { margin-bottom: 10px; }
.marb-sm      { margin-bottom: 15px; }
.marb-m       { margin-bottom: 20px; }
.marb-xl      { margin-bottom: 30px; }
.marb-xxl     { margin-bottom: 40px; }
.marb-50-xl   { margin-bottom: 50px; }
.marb-xxxl    { margin-bottom: 60px; }
.marb-70-xl   { margin-bottom: 70px; }
.marb-100-xl  { margin-bottom: 100px; }
.marb-max     { margin-bottom: 150px; }

.marl-auto    { margin-left: auto; }
.marl-0       { margin-left: 0; }
.marl-xxs     { margin-left: 5px; }
.marl-xs      { margin-left: 10px; }
.marl-sm      { margin-left: 15px; }
.marl-m       { margin-left: 20px; }
.marl-xl      { margin-left: 30px; }
.marl-xxl     { margin-left: 40px; }
.marl-50-xl   { margin-left: 50px; }
.marl-xxxl    { margin-left: 60px; }
.marl-70-xl   { margin-left: 70px; }
.marl-100-xl  { margin-left: 100px; }
.marl-max     { margin-left: 150px; }

.marx-auto    { margin-left: auto;   margin-right: auto; }
.marx-0       { margin-left: 0;      margin-right: 0; }
.marx-xxs     { margin-left: 5px;    margin-right: 5px; }
.marx-xs      { margin-left: 10px;   margin-right: 10px; }
.marx-sm      { margin-left: 15px;   margin-right: 15px; }
.marx-m       { margin-left: 20px;   margin-right: 20px; }
.marx-xl      { margin-left: 30px;   margin-right: 30px; }
.marx-xxl     { margin-left: 40px;   margin-right: 40px; }
.marx-50-xl   { margin-left: 50px;   margin-right: 50px; }
.marx-xxxl    { margin-left: 60px;   margin-right: 60px; }
.marx-70-xl   { margin-left: 70px;   margin-right: 70px; }
.marx-100-xl  { margin-left: 100px;  margin-right: 100px; }
.marx-max     { margin-left: 150px;  margin-right: 150px; }

.mary-auto    { margin-bottom: auto;   margin-top: auto; }
.mary-0       { margin-bottom: 0;      margin-top: 0; }
.mary-xxs     { margin-bottom: 5px;    margin-top: 5px; }
.mary-xs      { margin-bottom: 10px;   margin-top: 10px; }
.mary-sm      { margin-bottom: 15px;   margin-top: 15px; }
.mary-m       { margin-bottom: 20px;   margin-top: 20px; }
.mary-xl      { margin-bottom: 30px;   margin-top: 30px; }
.mary-xxl     { margin-bottom: 40px;   margin-top: 40px; }
.mary-50-xl   { margin-bottom: 50px;   margin-top: 50px; }
.mary-xxxl    { margin-bottom: 60px;   margin-top: 60px; }
.mary-70-xl   { margin-bottom: 70px;   margin-top: 70px; }
.mary-100-xl  { margin-bottom: 100px;  margin-top: 100px; }
.mary-max     { margin-bottom: 150px;  margin-top: 150px; }


.keyboard-on-bottom{
    z-index:1001;
    position:fixed;
    width:95vw;
    height:30vh;
    top:39vh;
    left:2.5vw;
    border:1px solid #eee;
    border-radius:10px;
    padding:5px;
}


.keyboard-on-bottom-numpad{
    z-index:1001;
    position:fixed;
    width:30vw;
    height:30vh;
    top:39vh;
    right:2.5vw;
    border:1px solid #eee;
    border-radius:10px;
    padding:5px;
}


.keyboard-huge-numpad{
    background:#eee;
    z-index:1001;
    position:fixed;
    width:96vw;
    height:96vh;
    top:2vh;
    right:2vw;
    border:1px solid #eee;
    border-radius:10px;
    padding:5px;
}

.hugebutton{
    font-weight:bold;
    font-size:4em;
    height:100px;
}
.hugegreenbutton{
    font-weight:bold;
    font-size:4.2em;
    height:100px;
    color:#161;
}