@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/versions/bulma-no-dark-mode.min.css";
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* Base */
:root {
    --primary: #0058BF;
    --secondary: #051229;
    --main-color: #0E0E0E;
    --secondary-color: #FFF;
}

html,
body {
    font-family: Raleway, system-ui, sans-serif;
    background-color: var(--background-color);
    color: var(--main-color);
    min-height: 100svh;
    width: 100%;
}

.is-top {
    background-color: var(--primary);
}

.is-topsecondary {
    position: relative;
    background-color: var(--secondary);
    color: var(--secondary-color);
}

.is-topsecondary .title,
.is-topsecondary .subtitle {
    color: var(--secondary-color);
}

.is-top-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url("/images/restaurant.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.hero-body {
    z-index: 1;
}

.flexed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    height: 100%;
}

.photo {
    position: relative;
}

.photo::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: 12px;
    bottom: 12px;
    border: 4px solid var(--primary);
}

.is-textured,
.is-gray {
    position: relative;
    background-color: #F2F2F2;
    z-index: 1;
}

.is-textured::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/assets/texture-background.svg) no-repeat center bottom / cover;
    opacity: 8%;
    z-index: -1;
}

.is-textured img {
    height: 80px;
}

.footer {
    padding: 12px 0;
}

.card img {
    object-fit: cover;
    object-position: center;
}