header {
    background: linear-gradient(to bottom, #0b0b0f, #13131a);
    background-position: 0;
    background-size: cover;
    position: relative;
      background: linear-gradient(180deg, #0c0c0c 0%, #2d1f0d 100%);
}

header:before {
    --tw-gradient-from: #0b0b0f;
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    bottom: 0;
    content: "";
    height: 50px;
    position: absolute;
    width: 100%;
    z-index: 10;
}

header h1 {
    color: #f3dc9b;
    text-shadow: 0 2px rgba(0, 0, 0, .32);
    font-family: "Playfair Display", serif;
}

header p {
    color: #e7d4a5;
    text-shadow: 0 3px 11px #000;
    font-family: "Playfair Display", serif;
}

header a {
    --tw-border-opacity: 1;
    --tw-gradient-from: #caa343;
    --tw-gradient-to: #f8e7b5;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    border-color: #d2af53;
    border-radius: 12px;
    border-width: 1px;
    display: inline-block;
    line-height: 60px;
    padding-left: 60px;
    padding-right: 60px;
    position: relative;
    color: #1c1c1c;
    font-weight: 600;
    font-family: "Playfair Display", serif;
    box-shadow:
        0 4px 0 #000000,
        0 0 23px rgba(0, 0, 0, .55),
        inset 0 3px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 2px rgba(0, 0, 0, .32);
    text-transform: uppercase;
}

@media (min-width: 768px) {
    header a {
        line-height: 76px;
    }
}

header a:before {
    bottom: -27px;
    left: 20px;
    position: absolute;
}

@media (min-width: 768px) {
    header a:before {
        bottom: -35px;
    }
}


@media (min-width: 768px) {
    header a:after {
        top: -45px;
    }
}

header a:hover {
    --tw-gradient-from: #f6d97e;
    --tw-gradient-to: #fff6ce;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

header a:hover:after,
header a:hover:before {
    --tw-scale-x: 1.5;
    --tw-scale-y: 1.5;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
        skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
        scaleY(var(--tw-scale-y));
}

header .bonuses {
    color: #f1c55f;
}