@font-face
{
font-family: 'Otama.ep';
src: url('otama-ep.otf') format('opentype');
font-weight: normal;
}

*
{
box-sizing: border-box;
transition: .2s;
}

:root
{
font-size: 25px;
}

html
{
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

body
{
margin: 0;
background: #1d150e url(mailinglist-bg.jpg) no-repeat right;
background-size: auto 100%;
}

body, input
{
font: 1rem/1.3 "Playfair Display", serif;
color: #ffffea;
}

*::selection
{
background-color:  #ffffea;
color: #1d150e;
}

a
{
color: inherit;
font-weight: bold;
}

#wrapper
{
display: flex;
justify-content: space-between;
margin: 0 auto;
}

#illust
{
background: url(090421.png) no-repeat center;
background-size: cover;
position: sticky;
top: 0;
height: 100vh;
width: 50vw;
}

#content
{
width: 50vw;
padding: 1.7rem 6vw 1rem 3.75vw;
min-height: 100vh;
}

h1
{
font: normal 4rem/1 "Otama.ep", serif;
text-decoration: underline 3px;
margin: 0;
}

h1 + p
{
margin-top: .5rem;
margin-bottom: 3.75rem;
}

input
{
padding: .5rem 1rem;
border: 0;
}

input#mce-EMAIL
{
border: .1rem solid;
background-color: transparent;
width: 100%;
z-index: 900;
height: 2.5rem;
}

input#mce-EMAIL:focus
{
outline: 0;
}

input#mc-embedded-subscribe
{
background-color:#ffffea;
color: #000;
font-weight: bold;
cursor: pointer;
float: right;
width: 6rem;
margin-top: -2.375rem;
margin-right: .15rem;
z-index: 1000;
position: relative;
border: .1rem solid #000;
height: 2.25rem;
line-height: 1;
}


input#mce-EMAIL::placeholder
{
color: #8d897b;
font-style: italic;
}

input#mc-embedded-subscribe:hover
{
outline: .1rem solid #000;
outline-offset: -.3rem;
}

footer
{
font-size: .65rem;
margin-top: 6.5rem;
}


/* ANIMATIONS */

.fade-in{animation:fade-in .3s cubic-bezier(.39,.575,.565,1.000) both}

/* ----------------------------------------------
 * Generated by Animista on 2026-7-1 10:21:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* RESPONSIVITY */


@media all and (max-width: 950px)
{
#wrapper
{
display: revert;
}

#illust
{
position: revert;
height: 40vh;
width: auto;
background-position: center 35%; /* 35% helps it cut to the focal point in desktop window resized situation */
}

#content
{
margin: 0 auto;
max-width: revert;
width: 100vw;
padding-left: 2rem;
padding-right: 2rem;
}

h1 span
{
display: none;
}

footer
{
margin-top: 3.5rem;
}

}

@media all and (max-width: 500px)
{
:root
{
font-size: 14.5px;
}

#content
{
min-height: 60vh;
}
}