:root {
    --white-brown:#f0eee9;
    --brown-white:#5d4b3c;
    --purple-blue:#a05460;
    --blue-purple:#aac5cb;
    --main-font:Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
    --white-brown:#5d4b3c;
    --brown-white:#f0eee9;
    --purple-blue:#aac5cb;
    --blue-purple:#a05460;}
}

html {color-scheme: light;}
@media (prefers-color-scheme: dark) {html {color-scheme: dark;}}

body {
  background: var(--white-brown); 
	background-size: cover;
	background-attachment: fixed;
  background-position:center;
	font-family: var(--main-font);
	color: var(--brown-white);
	font-size: 1rem;
	text-align: left;
  width:60%; margin:auto
}

#title{font-size:0px} 
#title::after{content:"Chilblands Guestbook";margin-top:10px;
color:var(--purple-blue);font-size:3rem;font-weight:300;font-family:'myrtille_pixel';}

input{font-family: var(--main-font); background-color:white; color:black}
input[type=submit]{border:1px var(--brown-white);background-color: var(--brown-white);color:var(--white-brown)}
textarea{font-family:var(--main-font); background-color:white;color:black }
/* -------------------------------------------------------- */
/* customisations */
/* -------------------------------------------------------- */
::-webkit-scrollbar {width:5px;height:5px;background-color:var(--white-brown);border:1px solid var(--brown-white);}
::-webkit-scrollbar-thumb {background-color:var(--brown-white);}
a {
    color:var(--brown-white);
    text-decoration: none; text-transform:none; 
    border-bottom: 1px dotted var(--brown-white);
}
a:hover {
    text-transform:lowercase;
}
title {
    position: relative;
}
title:after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: 100%; /* put it on the top */
    background-color:var(--brown-white);
    color:var(--white-brown);
    width: max-content;
    opacity: 0;
}
title:hover:after {
    opacity: 1;
}
::-moz-selection {
    background:var(--purple-blue);
    color:var(--white-brown);
}
::selection {
    color:var(--white-brown);
    background:var(--purple-blue);
}
@font-face {
    font-family: 'myrtille_pixel';
    src: url(https://file.garden/ad89oNRzGm6DbhQ9/fonts/myrtille-pixel.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}