/* Block all light mode defaults */

/* Override the media queries in the <picture> tag of the logo. */
header picture::before {
    background-image: url("https://images.alabut.com/writing/logo-sega-monogram-bordered-white@3x.png");
    background-size: contain;
    content: "";
    display: block;
    filter: invert(1);
    height: 68px;
    transition: .2s all ease-in-out;
    width: 69px;
}

header a:hover picture::before {
    filter: invert(0);
    transform: scale(0.9);
}

header a img {
    display: none;
}

footer {
    background: none;
    border: 2px solid rgba(255,255,255,0.1);
}

/*
Begin custom styles for the Alien theme.

Eventually, these might be replaced or moved if the design of this one-off template turns into a repeatable pattern for a series of movie reviews.
*/

/* Match the bottom color of the brushstrokes */
:root {
    --background-color-darkmode: #000;
}

/* Add some papery/static noise */
body {
    /* background: url("/images/noise-white.avif"); */
}

/* Add noise over an orange background */
header {
    background: url("https://images.alabut.com/writing/alien1979/brushstrokes4.png") bottom center / contain no-repeat, var(--accent-color);
    padding-left: 0;
    padding-right: 0;
}

/* Add the hero graphic below the logo and above the headline */
header h1::before {
    background-image: url("https://images.alabut.com/writing/alien1979/hero.avif");
    background-size: contain;
    content: "";
    display: block;
    height: 462px;
    margin: 0 auto 30px;
    width: 350px;
}

/* Make the static noise fade out to a solid color for easier reading of long form content */
article {
    background: linear-gradient(to bottom, transparent 0%, #000 600px, #000 100%);
    padding-top: 15px;
}