/* Come get y'all font */

@import url('https://fonts.googleapis.com/css2?family=Cormorant');

@font-face {
  font-family: 'Cormorant';
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Cormorant';
  font-weight: 700;
  font-style: italic;
}

/* 20251012: version for listmonk has some extra classes e.g. .container and some !importants to override OTB styling. Some of this is still not what I would consider ideal (e.g. the narrow central container of max 550px) but messing around with it breaks other stuff more than I have the cycles to want to deal with. */

html {
    /* needs to be set here instead of body to be sure the whole window is filled, otherwise you get a hard line at the end of the gradient */
    background-color: black;
    background-image: linear-gradient(to bottom, black, black, #1768C4, #3693C1), url(https://www.shininghearth.net/starrygradient_smallerer.png);
    width: 100%;
    /* make sure the gradient reaches bottom of viewport */
    min-height: 100%;
    background-repeat: no-repeat;
    /* shows lighter pixel of the banner image or background, so they appear to blend as gradient gets lighter */
    background-blend-mode: lighten;
}

body {
    font-size: 16pt;
    font-weight: 500;
	font-family: Cormorant, Cambria, serif !important;
	color: #EAEAEA;
	text-decoration: none;
    /* extra for listmonk */
    background: none !important;
}

main {
    margin-bottom: 200px;
}

/* extra for listmonk */
.container {
    background: transparent;
    color: #EAEAEA !important;
}
.container a:link {
    color: #b2fbee !important;
}
.container a:active {
    color: #21dbfd !important;
}
.container a:visited {
    color: #cffb9f !important;
}

img {
	max-width: 90%;
	width: auto;
	height: auto;
}

/* couldn't flipping get it to center in the container so what the hell just make it fill and then it looks centered ha ha */
.logo img {
    max-width: 100% !important;
}

/* mainly for the confirm subscription button afaik */
.button {
    font-family: Cormorant, Cambria, serif !important;
}

.text {
	width: 85%;
	margin: 100px auto auto;
}
.text a:link {
    color: #b2fbee;
}
.text a:active {
    color: #21dbfd;
}
.text a:visited {
    color: #cffb9f;
}
.text strong {
    font-weight: 700;
}
h1 {
    font-size: 20pt;
}
h2 {
    font-size: 18pt;
    font-style: italic;
}
footer {
    /* Got this from stackoverflow. I am not sure which pieces are truly necessary or if there is a way to do it better, but i've spent too much of my life on this already and it seems to provide the desired effect, so. */
    width: 100% !important;
    max-width: 100% !important;
    height: 180px;
    margin: 0 !important;
    background: transparent url(https://www.shininghearth.net/treeline.png) repeat-x 0 0 !important;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -1;
}