/* FONTS */

@font-face
{
font-family: 'Bodoni MT';
src: url('layout/BOD.TTF') format('truetype');
font-weight: bold;
}

@font-face
{
font-family: 'Bodoni MT';
src: url('layout/BOD_BLAI.TTF') format('truetype');
font-weight: 900;
font-style: italic;
}

@font-face
{
font-family: 'Franklin Gothic Book';
src: url('layout/FRABK.TTF') format('truetype');
}

@font-face
{
font-family: 'Franklin Gothic Book';
src: url('layout/FRABKIT.TTF') format('truetype');
font-style: italic;
}

@font-face
{
font-family: 'Franklin Gothic Medium';
src: url('layout/framd.ttf') format('truetype');
}

@font-face
{
font-family: 'Century Gothic';
src: url('layout/GOTHIC.TTF') format('truetype');
}

/* GENERAL */

:root
{
font: 17.25px/1.15 "Franklin Gothic Book", Arial, sans-serif;
}

*
{
box-sizing: border-box;
}

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

body
{
background: url(layout/jigen.png) no-repeat fixed 94.75% center, #fff url(layout/bg.jpg) no-repeat fixed;
background-size: contain, cover;
margin: 0;
color: #000;
}

body:after
{
content: "";
position: fixed;
top: 0;
left: 0;
width: calc(100vw - 80px);
height: calc(100vh - 80px);
border: 40px solid;
pointer-events: none;
z-index: 10000;
}

*::selection
{
background-color: #000;
color: #fff;
}

a
{
color: #000;
}

b, label
{
font-family: "Franklin Gothic Medium";
font-style: normal;
}


#wrapper
{
display: flex;
justify-content: space-between;
gap: 3.5vw;
width: 65.25vw;
margin-left: 5.5vw;
min-height: 100vh;
}

header
{
position: sticky;
top: 0;
height: 100vh;
width: 38vw;
padding: 10vh 0;
}

#content
{
min-height: 100vh;
width: 100%;
margin-bottom: 3rem;
}

/* HEADER (desktop left column) */

fieldset, legend
{
text-align: center;
margin: 0 auto;
text-transform: uppercase;
}

legend
{
font-family: "Century Gothic", serif;
font-size: .9rem;
letter-spacing: 1ch;
padding-left: 1ch;
}

fieldset
{
border: 1px solid #000;
padding: .25rem .5rem .7rem;
}

fieldset b
{
font: 900 italic 4.65rem/.7 "Bodoni MT", serif;
margin-left: -.65rem;
display: inline-block; /* for pulling the box sideways to have better control on the individual letters blah blah blah BLAH */
}

fieldset a, a#sign-button
{
text-decoration: none;

}

fieldset a
{
display: block;
background: #000;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 150%;
background-position: left top;
}

fieldset a:hover, a#sign-button:hover, input.submit:hover
{
background: url(layout/hover.png) no-repeat;
background-size: 150%;
background-position: right bottom;
transition: .4s ease;
}

fieldset a:hover
{
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}


header div
{
font-style: italic;
font-size: .93rem;
margin: 1.5rem 3vw;
}

header div p
{
margin-top: 0;
}

a#sign-button
{
display: block;
position: absolute;
bottom: 10vh;
background-color: #000;
color: #fff;
font: 900 italic 2rem/.85 "Bodoni MT", serif;
margin-bottom: 1rem;
text-transform: uppercase;
}

a#sign-button span /* a complicated way to make the little side borders */
{
display: block;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
padding: .5rem 1rem .5rem 2.25rem;
width: 95%;
margin: 0 auto;
}

/* GUESTBOOK ENTRIES */

#content
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin-top: 10vh;
}

article.entry
{
width: 44%;
margin-bottom: 3rem;
}

article.entry .meta b, h2
{
font: bold 1.4rem/1 "Bodoni MT", serif;
}

.meta, h2
{
margin-bottom: 1rem;
}

.entry-controls
{
display: none;
}

.admin-reply
{
  margin-top: 1rem;
  border-left: 5px solid;
  padding-left: 1rem;
}

.admin-reply b
{
display: block;
}

/* FORM */

#sign-wrapper-intro
{
font-style: italic;
font-size: .9rem;
}

input, textarea
{
font: 17.25px/1.15 "Franklin Gothic Book", Arial, sans-serif;
border: 1px solid #000;
background: transparent;
padding: .5rem 1rem;
margin-bottom: 1rem;
width: 100%;
}

input:focus, textarea:focus
{
border-left: 5px solid;
border-right: 5px solid;
outline: none;
}

label
{
margin-left: .25rem;
font-weight: bold;
cursor: text;
}

label span
{
margin-right: .25rem;
float: right;
font-family: "Franklin Gothic Book";
font-weight: normal;
font-style: italic;
font-size: .93rem;
}

textarea
{
height: 12rem;
}

input.submit
{
background-color: #000;
color: #fff;
cursor: pointer;
float: right;
width: 10rem;
font: 900 italic 2rem/.85 "Bodoni MT", serif;
  text-transform: uppercase;
text-align: center;
border: 0;
}

/* TEMPLATE ADJUSTMENTS */

#content div:last-of-type[style="text-align:center"] /*...really just a trick to style the credit */
{
  margin: 3rem 0 1rem;
  font-style: italic;
  font-size: .9rem;
  width: 100%;
align-self: flex-end;
}

#content div:last-of-type[style="text-align:center"]:before, #content div:last-of-type[style="text-align:center"]:after /*the things we do...*/
{
content: "\2014";
padding: 1rem;
}

.email-secret
{
display: none;
}

.gbook_sign_error
{
margin-bottom: 1rem;
background-color: #000;
color: #fff;
padding: .5rem 1rem;
font-weight: bold;
}

/* ADMIN AREA */

.gbook_guestbook
{
font-style: italic;
margin-bottom: 1rem;
display: inline-block;
}

.gbook_sign_text
{
margin-top: 1rem;
}

#gbook_bottom_images
{
display: none;
}

/* FOOTER */

footer
{
font-style: italic;
font-size: .9rem;
border-top: 1px solid;
}

footer h3
{
font: 900 1.3rem "Bodoni MT", serif;
margin-bottom: 0;
}

i#mobile
{
display: none;
}


/* RESPONSIVITY */

@media all and (max-height: 670px)
{
header, a#sign-button
{
position: revert;
}

header
{
height: auto;
}
}

@media all and (max-width: 1200px)
{
article.entry, footer
{
width: 85%;
}
}

@media all and (max-width: 1000px), all and (orientation: portrait)
{
body
{
background:#fff url(layout/bg.jpg) no-repeat fixed;
background-size: cover;
}

#wrapper
{
display: revert;
width: calc(100% - 80px);
padding: 1.5rem;
margin: 40px;
}

header
{
position: revert;
max-height: 1000px;
}

header
{
width: 50vw;
padding: 0;
}

header:after
{
content: "";
display: block;
width: 100%;
max-height: 1000px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: url(layout/jigen.png) no-repeat scroll 94.75% center;
background-size: auto;
pointer-events: none;
}

a#sign-button
{
position: revert;
text-align: center;
}

#content
{
margin: 0;
padding-top: 2rem;
display: revert;
min-height: revert;
}

article.entry, footer
{
width: 100%;
}
}

/* Enormous screens that I will never see  */
@media all and (min-width: 2200px), all and (orientation: portrait) and (min-width: 1800px)
{
:root
{
font-size: 30px;
}
}

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


body:after
{
border: 0;
}

#wrapper
{
padding: 0;
}


header:after
{
display: none;
}

header
{
width: 100%;
height: auto;
margin-bottom: 3rem;
}



a#sign-button span
{
padding: .5rem 1rem;
}

i#mobile
{
display: inline;
font-style: normal;
}

}