@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Lexend+Peta:wght@100..900&display=swap');

:root {
    --lightblue: #699EFF;
}

body {
    margin: 0;
    padding: 0;
    background-color: #222;
    font-family: "Instrument Sans";
}

.topbar {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-items: start;
    width: 100%;
    height: 72px;
    background-color: #333c;
    backdrop-filter: blur(24px);
    padding: 0px 16px;
    position: sticky;
    top: 0;
    border-bottom: 2px solid #ddd;
    box-shadow: 0px 2px 0px #888, 0px 8px 16px #0008;
    z-index: 9999;
}

.block1 {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 48px 8px;
}

.block2 {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* flex-wrap: wrap; */
    padding: 48px 8px;
    background-color: #316CDA;
    font-family: "Lexend Peta";
    letter-spacing: -18%;
    color: white;
}

.block3 {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 16px 8px 32px 8px;
    color: white;
    background-color: #333;
}

.footer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 48px 8px;
}

.footer>span {
    color: white;
}

.block2>h2 {
    font-size: 2em;
    text-align: center;
    font-weight: 500;
    margin: 0;
    margin-bottom: 24px;
}

.logo {
    margin: 5px;
}

.topbar-link {
    display: block;
    color: white;
    font-weight: bold;
    text-decoration: none;
    margin-left: 32px;
}

.current-location {
    color: var(--lightblue);
}

.right-align {
    margin-left: auto;
}

.carbon-button {
    padding: 12px 32px;
    border-radius: 24px;
    box-shadow: 0 30px 4.1px -17px rgba(255, 255, 255, 0.27) inset, 0 1px 1.3px 1px rgba(255, 255, 255, 0.24) inset;
    background-size: 20px;
    background-image: url(./assets/carbonfiber.png);
    color: white;
    font-style: italic;
    text-decoration: none;
    font-weight: bold;
    font-family: "Instrument Sans";
    text-align: center;
    letter-spacing: normal;
}

.carbon-button-big {
    padding: 16px 64px;
    border-radius: 48px;
    box-shadow: 0 30px 4.1px -17px rgba(255, 255, 255, 0.27) inset, 0 1px 1.3px 1px rgba(255, 255, 255, 0.24) inset;
    background-size: 20px;
    font-size: 1.5em;
    background-image: url(./assets/carbonfiber.png);
    color: white;
    font-style: italic;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    font-family: "Instrument Sans";
    letter-spacing: normal;
}

.contact-method-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 24px;
    /* margin-top: 48px; */
}

.email-bubble {
    padding: 64px;
    border-radius: 128px;
    color: white;
    font-size: 2em;
    font-weight: bold;
    width: 530px;
    text-align: center;
    text-shadow: 0px -2px 0px #0005;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0%, rgba(255, 255, 255, 0.28) 100%), #316CDA;
    box-shadow: 0 3px 1.3px 1px rgba(255, 255, 255, 0.36) inset, 0 162px 7.8px -72px rgba(255, 255, 255, 0.15) inset, 0 -10px 8.6px 0 rgba(0, 0, 0, 0.25) inset;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.phone-bubble {
    padding: 64px;
    border-radius: 24px;
    color: white;
    font-size: 2.6em;
    font-weight: bold;
    width: 530px;
    text-align: center;
    text-shadow: 0px -2px 0px #0005;
    background-size: 5px;
    /* background-image: url(./assets/carbonfiber.png); */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0%, rgba(255, 255, 255, 0.28) 100%), url(./assets/carbonfiber.png);
    box-shadow: 0 3px 1.3px 1px rgba(255, 255, 255, 0.36) inset, 0 162px 7.8px -72px rgba(255, 255, 255, 0.15) inset, 0 -10px 8.6px 0 rgba(0, 0, 0, 0.25) inset;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.bubble-header {
    margin: 0px auto;
    padding: 16px 64px;
    border-radius: 48px;
    font-size: 1.5em;
    width: 256px;
    text-align: center;
    position: absolute;
}

.bubble-header-container {
    display: flex;
    justify-content: center;
    /* height: 48px; */
    position: relative;
    bottom: 30px;
}

.hero {
    /* height: 512px; */
    width: 100%;
    font-family: "Lexend Peta";
    font-size: 1.5em;
    letter-spacing: -20%;
    color: white;
    box-sizing: border-box;
    padding: 96px;
    background-image: url(./assets/bmw1.png);
    background-position: center;
    background-size: cover;
    text-shadow: 0px 5px 5px #0008;
}

.hero-link {
    text-decoration: underline;
    font-weight: 500;
    font-size: 1em;
    margin: 0;
    color: white;
}

.header {
    /* height: 512px; */
    width: 100%;
    font-family: "Lexend Peta";
    font-size: 1.5em;
    letter-spacing: -20%;
    color: white;
    box-sizing: border-box;
    padding: 96px;
    background-position: center;
    background-size: cover;
    text-shadow: 0px 5px 5px #0008;
}

.contact { background-image: url(./assets/bmw-side2.png); }
.services { background-image: url(./assets/bmw-side1.png); }

.bubble-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    border-radius: 32px;
    width: 420px;
    height: 360px;
    background-size: cover;
    background-position: center;
    margin: 16px;
    /* font-size: 2.5em; */
    font-weight: bold;
    color: white;
    text-shadow: 0 3px 0 #0008;
    box-shadow: 0 30px 4.1px -17px rgba(255, 255, 255, 0.27) inset, 0 1px 1.3px 1px rgba(255, 255, 255, 0.24) inset;
}

.bubble-card>h1 {
    font-size: 2.5em;
    margin: 0;
}

.bubble-description {
    border-radius: 34px;
    background: #2228;
    backdrop-filter: blur(10px);
    font-size: 1em;
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 8px; */
    text-shadow: none;
}

.bubble-description>a {
    text-decoration: underline;
    color: white;
}

.bubble-description>p {
    width: 280px;
}

.interior { background-image: url(./assets/bmw3.png); }
.exterior { background-image: url(./assets/bmw4.png); }
.package { background-image: url(./assets/bmw2.png); }

.card {
    border-radius: 24px;
    background-color: #333;
    margin: 16px;
    width: 420px;
    color: white;
}

.card-header {
    padding: 32px;
    border-radius: 24px 24px 0px 0px;
    background-position: center;
    background-size: cover;
    text-shadow: 0 3px 0 #0008;
    height: 172px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-header>h1 {margin: 0;font-size: 2.5em;}
.card-header>h2 {margin: 0;font-size: 2em;}

.card-description {
    padding: 32px;
    font-size: 1.5em;
    font-weight: bold;
}

.special {
    font-weight: bold;
    color: var(--lightblue)
}

@media (max-width: 800px) {
    .topbar-link {
        display: none;
    }
}