:root {
    --spacing-company: 5rem;
    --font-weight: 400;
    --typography-spacing-vertical: 1.0rem;
    --font-family: 'Poppins', sans-serif;
}

:root:not([data-theme=dark]), [data-theme=light] {
    --primary: #3c6371;
    --primary-hover: #2a494f;
    --contrast: #2a494f;
    --contrast-hover: #3c6371;
    --contrast-inverse: #353535;
    --neutral-light: #dadce0;
    --neutral-dark: #353535;
}

:root:not([data-theme=light]), [data-theme=dark] {
    --primary: #3c6371;
    --primary-hover: #2a494f;
    --contrast: #2a494f;
    --contrast-hover: #3c6371;
    --contrast-inverse: #353535;
    --neutral-light: #dadce0;
    --neutral-dark: #353535;
	--background-color:#353535;
}

[x-cloak] { display: none !important; }

#logo {
    color: var(--neutral-light);
    background-color: var(--primary);
    box-shadow: -2px -2px 0px 0px var(--neutral-light);
    padding: 0 4px 0 4px;
    font-family: 'Oswald';
    font-size: larger;
}

/* Typography */
h1 {
    --typography-spacing-vertical: 1rem;
}

h2,
h3,
h4,
hgroup > :last-child {
    --typography-spacing-vertical: 8px;
}

.uppercase {
    text-transform: uppercase;
}

main.container {
    padding-top: 1rem;
}

.tip-input {
    margin-top: 1rem;
    text-align: center;
}

.tip-input input {
    width: 30%;
    text-align: center;
    font-size: large;
    width: 100%;
    outline: 0;
    border-width: 0 0 2px;
    font-size: 27px;
    font-weight: 700;
    color: var(--primary);
}

.txt-center {
    text-align: center;
}

.tip-options a {
    font-weight: 700;
    background-color: inherit;
    border-color: var(--neutral-dark);
    color: var(--neutral-dark);
    padding: 12px;
    border-radius: 30px;
    width: 49%;
    margin-bottom: 8px;
}

.tip-options a.contrast, .tip-options a:hover, .tip-options a:focus, .tip-options a:active  {
    background-color: var(--neutral-dark);
    border-color: var(--neutral-dark);
    color: white;
}

.pay-tip {
    margin-top: var(--spacing);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 15px;
    min-height: 64px;
}

.logo-header {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.logo-header span {
    color: var(--neutral-light);
    background-color: var(--primary);
    box-shadow: -4px -4px 0px 0px var(--neutral-light);
    padding: 0 8px 0 8px;
    font-family: 'Oswald';
    font-size: xxx-large;
	font-weight: 400;
}

.mbway-loading p {
    font-size: large;
}

.pay-tip.apple {
    background-color: var(--neutral-dark);
}

.pay-tip img {
    width: 70px;
    margin-right: 1rem;
}

#mbway-modal button {
    background-color: var(--primary);
}

.tip-article {
    padding-top: 1rem;
}

.tip-article h4 {
    margin-bottom: 1rem;
}

.hero {
    background-color: #394046;
    /* background-image: url("https://noma.dk/wp-content/uploads/2021/03/Noma-crew.jpg"); */
    background-position: center;
    background-size: cover;
}

.hero nav {
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0.8029805672268908) 0%, rgba(0,0,0,0) 100%);
}

.hero h2 {
    color: whitesmoke;
    --typography-spacing-vertical: 0;
    padding-top: 1rem;
}

.hero header {
    padding: var(--spacing-company) 0;
}

p.team-description {
    font-size: medium;
}

.feedback-group a {
    padding: 0.5rem;
    margin: 0.2rem;
}

.ty-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ty-header p {
    font-size: xx-large;
}

.profile-picture img {
    border-radius: 50%;
    width: 180px;
    margin-bottom: -80px;
}

.profile-spacing {
    margin-top: 80px;
}

.alert {
    margin-bottom: var(--spacing);
    padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
    border-radius: var(--border-radius);
    color: var(--color);
    background-color: var(--background-color);
    border: 1px solid var(--background-color);
    background-image: var(--icon);
    background-position: center left var(--form-element-spacing-vertical);
    background-size: calc(var(--font-size) * 1.5) auto;
    padding-left: calc(var(--form-element-spacing-vertical) * 2 + calc(var(--font-size) * 1.5));
}
.alert-danger {
    --background-color: #ffebee;
    --icon: var(--icon-invalid);
    --color: #b71c1c;
}
.alert-warning {
    --background-color: #fff8e1;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(179, 78, 0, .999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --color: #994300;
}
.alert-success {
    --background-color: #e8f5e9;
    --icon: var(--icon-valid);
    --color: #1b5e20;
}