/*
Theme Name: Outlined
Template: generatepress
Version: 1.0
*/

@font-face {
    font-family: "Liberation Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/liberationsans-regular-webfont.woff2") format("woff2");
}

@font-face {
    font-family: "Liberation Sans";
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url("fonts/liberationsans-bold-webfont.woff2") format("woff2");
}

@font-face {
    font-family: "Warband Stencil";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/WarbandStencilTextured.woff2") format("woff2");
}

:root {
    --outlined-font-body: "Liberation Sans", Arial, Helvetica, sans-serif;
    --outlined-font-display: "Liberation Sans", Arial, Helvetica, sans-serif;
    --outlined-font-stencil: "Warband Stencil", Impact, fantasy;
    --outlined-bg: #191919;
    --outlined-surface: #202020;
    --outlined-ink: #ffffff;
    --outlined-muted: rgba(255, 255, 255, 0.68);
    --outlined-line: rgba(255, 255, 255, 0.18);
    --outlined-line-strong: rgba(255, 255, 255, 0.34);
    --outlined-accent: #7dff00;
    --outlined-radius: 22px;
    --outlined-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

html,
body {
    background:
        radial-gradient(circle at 55% 0%, rgba(255, 255, 255, 0.045), transparent 34rem),
        linear-gradient(180deg, #202020 0%, var(--outlined-bg) 24rem) !important;
    background-color: var(--outlined-bg) !important;
    color: var(--outlined-ink);
    font-family: var(--outlined-font-body);
}

.site,
.site-content,
.container,
.grid-container,
.separate-containers .site-main,
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-article,
.sidebar .widget,
.footer-widgets,
.site-footer {
    background: transparent !important;
    background-color: transparent !important;
}

.site-content {
    padding-block: clamp(2rem, 5vw, 4rem);
}

.inside-article {
    color: var(--outlined-ink);
}

.entry-content,
.entry-content > *,
.wp-block-post-content,
.wp-site-blocks {
    background-color: transparent;
}

a {
    color: var(--outlined-accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover,
a:focus {
    color: var(--outlined-accent);
}

.main-navigation,
.site-header {
    background: #191919;
    color: var(--outlined-ink);
}

.site-info,
.site-footer .inside-site-info {
    background: #191919 !important;
    color: var(--outlined-muted);
}

.site-info a,
.site-footer .inside-site-info a {
    color: var(--outlined-muted);
}

.main-navigation .main-nav ul li a,
.site-branding a,
.site-branding .main-title a {
    color: var(--outlined-ink);
    font-family: var(--outlined-font-display);
    font-weight: 900;
}

.entry-title,
.wp-block-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--outlined-ink);
    font-family: var(--outlined-font-display);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 1;
}

h1,
.entry-title {
    font-size: clamp(3rem, 8vw, 7rem);
}

h2 {
    font-size: clamp(2.2rem, 5vw, 4.4rem);
}

p,
li {
    color: var(--outlined-muted);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.7;
}

.wp-block-group {
    border-color: var(--outlined-line);
}

.wp-block-image img,
.wp-block-gallery img,
.wp-block-media-text__media img {
    border-radius: var(--outlined-radius) 0 0 0;
}

.wp-block-button__link,
button,
input[type="button"],
input[type="submit"] {
    border: 1px solid var(--outlined-accent);
    border-radius: var(--outlined-radius) 0 0 0;
    background: transparent;
    color: var(--outlined-accent);
    font-family: var(--outlined-font-display);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wp-block-button__link::after,
button::after,
input[type="button"]::after,
input[type="submit"]::after {
    margin-left: 0.85rem;
    content: "≫";
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    border-color: var(--outlined-accent);
    background: rgba(125, 255, 0, 0.07);
    color: var(--outlined-accent);
}

@media (max-width: 768px) {
  .grid-container,
  .site-content,
  .inside-article {
    padding-inline: 15px;
  }
}