body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

p,
h1,
h2,
h3,
h4,
h5 {
    text-align: left;
}

header {
    /* background-color: #333; */
    /* background-image: linear-gradient(to bottom,
            #333 0,
            #333 80%,
            #111 100%); */
    border-bottom: 4px solid #000;
    position: relative;
    height: 100vh;
}

.header-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100vh;
    width: 100%;
}

header .title-card {
    /* background-color: #333; */
    color: #fff;
    height: 80vh;
    display: flex;
    align-items: end;
}

header .title-card h1 {
    color: #fff;
    font-size: 10em;
    font-family: "Badeen Display", system-ui;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    text-shadow: 0px 0px 20px #333;
}

header q {
    background: orange;
    transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg);
    position: absolute;
    top: 150px;
    right: 0px;
    width: 530px;
    height: 100px;
    align-content: center;
    text-align: center;
    box-shadow: 0px 0px 21px 1px #c98301;
    border: 1px solid #000000;
    outline: 1px dashed #873c3c;
    outline-offset: -6px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5rem;
    z-index: 1;
}

.bg-body {
    background-image: linear-gradient(to bottom,
            #333 0px,
            #333 60px,
            #fff 575px);
}

header .nav a,
header .contact li {
    padding: 1rem 1.2rem 1rem 0;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    text-shadow: 0px 0px 2px #ffffff84;
    font-weight: bold;
}

header .nav a:hover {
    color: #333;
    text-decoration: underline;
}

header .nav a.active::before {
    content: ' { ';
}

header .nav a.active::after {
    content: ' } ';
}

/* Style the header */
.hero {
    /* background-color: #423cec; */
    background: url("../images/bicycle-braker-bridge.jpg") 100% no-repeat;
    background-size: cover;
    /* border: solid 1px #ddd; */
    /* border-width: 1px 0; */
    box-shadow: inset 0px 0px 19px #333;
    overflow: hidden;
}

.hero.container {
    max-width: 100%;
}

/* header h1 {
    font-size: 8em;
} */

.hero button {
    background-color: transparent;
    border: none;
    color: inherit;
    padding: 0;
    margin: 0;
}

.hero button:hover {
    text-decoration: underline;
}

.flair::before {
    content: '';
    width: 0;
    height: 0;
    border-right: 250px solid transparent;
    border-left: 0 solid transparent;
    border-bottom: 40px solid #0000002d;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
}

.flair::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 1225px solid transparent;
    border-right: 0 solid transparent;
    border-top: 60px solid #0000002d;
    position: absolute;
    bottom: -60px;
    right: 0;
    z-index: -1;
}

.highlight-section {
    position: relative;
}

/* Hero List */
/* .hero ul>li {
    display: none;
} */

button.cta {
    font-size: 4em;
    margin-bottom: 1rem;
    text-transform: uppercase;
    box-shadow: 0px 0px 20px #bdbdbd;
    border-radius: 15px;
    padding: 1rem 2rem;
    transform: rotate(-8deg);
    left: -3rem;
    top: -1rem;
    position: relative;

    @media (max-width: 992px) {
        left: 0;
        top: 0;
        transform: none;
    }
}

/* Create two columns/boxes that floats next to each other */
.header-content>.nav {
    /* only for demonstration, should be removed */
    background-color: rgb(0 0 0 / 75%);
    padding: 0;
    box-shadow: 0 0 5px 0 #000000;
    border-bottom: 1px solid #00000073;
}

.header-content>.nav a {
    color: #aaa;
    text-shadow: none;
}

.header-content .navbar-collapse.collapse a {
    color: #fff;
}

.header-content>.nav a:hover {
    color: #fff;
}

/* Style the list inside the menu */
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
}

nav .navbar-brand,
nav .navbar-toggler,
nav .nav-link {
    --r: #fff;
    color: var(--r);
    border-color: var(--r);
}

main>div {
    padding: 1rem;
}

section {
    padding: 1rem;
}

/* .nav-link {
    margin-right: 2rem;
}

.nav-link::after {
    content: ' | ';
    color: #fff;
    opacity: .25;
    margin-left: 2rem;
} */

article {
    /* padding: 20px;
    background-color: #f1f1f1; */
    /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
    content: "";
    display: table;
    clear: both;
}

.section-dark {
    background-color: #000;
    color: #fff;
    text-align: left;
}

.section-dark ul {
    margin: 0;
}

.section-dark ul li {
    font-family: monospace;
    letter-spacing: -1px;
}

/* Style the footer */
footer {
    background-color: #efefef;
    border-top: 1px solid #ddd;
    padding: 1rem;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 992px) {
    .bg-body {
        background-image: linear-gradient(to bottom,
                #333 0px,
                #333 60px,
                #fff 375px);
    }

    nav,
    article {
        width: 100%;
        height: auto;
    }

    .header-content>.nav {
        background-color: transparent;
        box-shadow: none;
        border: none;
    }

    header .nav a {
        padding: 4px;
    }

    .flair::before,
    .flair::after {
        display: none;
    }

    .hero {
        border-bottom: none;
        border-top: none;
        height: initials;
    }

    .hero button {
        background-color: orange;
    }

    header {
        border: none;
        height: 30vh;
        max-height: 30vh;
    }

    header .title-card {
        /* height: auto; */
        display: none;
    }

    header .title-card h1 {
        font-size: 1.5rem;
        text-shadow: none;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }

    header .contact li {
        padding: 0;
    }

    header q {
        font-size: 1rem;
        height: 50px;
        width: 200px;
        transform: none;
        position: absolute;
        bottom: 0px;
        left: calc(50% - 100px);
    }

    .header-content {
        position: initial;
        height: auto;
        width: 100%;
    }

    .animated-bg {
        display: none;
    }
}

.animated-bg {
    background: linear-gradient(90deg, #4768fc30 0%, #ffbd4c5c 100%);
    background-size: 200% 200%;
    animation: bg-fade-in 8s ease infinite;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 1;
}

@keyframes bg-fade-in {
    0% {
        background-position: 10% 0%
    }

    50% {
        background-position: 91% 100%
    }

    100% {
        background-position: 10% 0%
    }
}

#pop-over {
    background-color: antiquewhite;
    padding: 2rem;
}

.card {
    @media (max-width: 992px) {
        margin: 1rem auto;
    }
}

.hero .card {
    background-color: #529fff;
    box-shadow: 0 0 20px 0 #333;
    color: #fff;
    padding-top: 70px;
    width: 250px;
    left: calc(50% - 460px);
    outline: 1px dashed #000;
    border: 1px solid #000;
    outline-offset: -5px;

    @media (max-width: 992px) {
        margin: auto;
        left: auto;
        width: 75%;
    }
}

/* body>div.container,
header>div.container {
    max-width: 960px !important;
} */

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}

.ribbon {
    --d: .8em;
    /* the depth */

    position: absolute;
    top: 20px;
    inset-inline: calc(-1*var(--d));
    border-bottom: var(--d) solid #0008;
    line-height: 1.8;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)), var(--d) 100%, 0 calc(100% - var(--d)));
    background-color: #ef318d;
    /* the main color */
}