:root {
    --navbar-height: 62px;
    --transition-duration: 382ms;
}

html, body {
    font-family: "Larsseit", sans-serif !important;
    font-size: 20px;
    min-height: 100%;
    line-height: 1;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

html {
    height: 100%;
}

body {
    color: var(--beep-green);
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: bold;
}

h1, .h1 {
    font-size: 50px;
}

h2, .h2 {
    font-size: 44px;
}

h4, .h4 {
    font-size: 1.2rem;
}

h5, .h5 {
    font-size: 1rem;
}

@media (max-width: 768px) {
    h1, .h1 {
        font-size: 38px;
    }

    h2, .h2 {
        font-size: 25px;
    }
}

main {
    display: flex !important;
    flex-direction: column;
    flex: 1 0 auto;
}

body > footer {
  background-color: var(--beep-green);
  flex: 0 0 auto;
  font-size: 20px;
  margin-top: auto;
}

p, li {
    line-height: 1.5;
}

table {
    color: var(--beep-green);
}

caption {
    caption-side: top !important;
    padding: 0 !important;
}

a {
    color: var(--beep-orange);
}

a:hover {
    color: var(--beep-orange);
}

a:not([href]):not([tabindex]).href-sim {
    color: var(--beep-orange);
    cursor: pointer;
}
a:not([href]):not([tabindex]).href-sim:hover {
    text-decoration: underline;
}

a.no-underline:hover {
    text-decoration: none;
}

.beep-inline-logo {
    vertical-align: baseline;
}

[v-cloak] {
    display: none;
}

.banner-background {
    background-attachment: fixed;
    background-color: var(--beep-white);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    flex-grow: 1;
    min-height: calc(100vh - 2*var(--navbar-height)) !important;
    position: relative;
}

@media (max-width: 768px) {
    .banner-background {
        min-height: calc(99vh - var(--navbar-height)) !important;
        background-attachment: scroll;
    }
}

.cursor-default {
    cursor: default;
}
.cursor-help {
    cursor: help;
}
.cursor-pointer {
    cursor: pointer;
}

.maintenance-mode {
    background: repeating-linear-gradient(
        -45deg,
        #ffc107,
        #ffc107 10px,
        #000000 10px,
        #000000 20px
    );
    margin: 0.5rem;
    padding: 0.62rem;
}

.invisible-to-clicks {
    pointer-events: none;
}

.fixed-fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
}

.text-bold {
    font-weight: bold;
}

.text-small {
    font-size: 80% !important;
}

.font-2x {
    font-size: 200% !important;
}

.font-5x {
    font-size: 500% !important;
}

.text-azure {
    color: var(--beep-azure) !important;
}

.text-blue {
    color: var(--beep-blue) !important;
}

.text-green {
    color: var(--beep-green) !important;
}

.text-lightgreen {
    color: var(--beep-lightgreen) !important;
}

.text-orange {
    color: var(--beep-orange) !important;
}

.text-lightorange {
    color: var(--beep-lightorange) !important;
}

.text-lightturquoise {
    color: var(--beep-lightturquoise) !important;
}

.text-purple {
    color: var(--beep-purple) !important;
}

.text-red {
    color: var(--beep-red) !important;
}

.text-turquoise {
    color: var(--beep-turquoise) !important;
}

.text-info {
    color: var(--beep-turquoise) !important;
}

.text-white {
    color: var(--beep-white) !important;
}

.bg-green {
    background-color: var(--beep-green) !important;
}

.bg-lightgray {
    background-color: var(--beep-lightgray) !important;
}

.bg-orange {
    background-color: var(--beep-orange) !important;
}

.bg-purple {
    background-color: var(--beep-purple) !important;
}