@font-face{
font-family: 'simplythebest';
src: url(../fonts/KGSimplytheBest.ttf);
}

@font-face{
font-family: 'yoster island';
src: url(../fonts/yoster.ttf);
}

@font-face{
font-family: 'adabelle';
src: url(../fonts/AdabelleHandwriting-Regular.ttf);
}

/* navi */

.navi {
text-align: center;}

.navi a {
display:inline-block;
background:transparent;
text-align:center;
padding-left:10px;padding-right:10px;
font:bold 11px adabelle;
margin-top: 3em;
text-transform:uppercase;
letter-spacing:2px;
color:#888;
}

.navi a:hover {color:#FC96BB;}

/* body stuff */  

html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
width: 100%;
align-content: center;
cursor: url("/images/pixels/tumblr_b8a941dabcd102ff7afc32e01be54f89_8eea338b_75.webp"), auto;
background:#fbf6f6 url(../images/tumblr_e3226d4585fb0263aa3fb12c14cbc202_2aaa33a7_75.webp) fixed;
font:11px simplythebest;
line-height:12px;
color: #9e9999;
letter-spacing:1.2px;
text-align:justify;
overflow: scroll;}

/* links & other */

a:link, a:visited, a:active { 
color:#F67C8B;text-decoration:none;}
a:hover {color:#666; cursor: url("/images/pixels/tumblr_b8a941dabcd102ff7afc32e01be54f89_8eea338b_75.webp"), auto;}

b {color:#413636;font-weight:bold;}
i {color:#FC96BB;font-weight:bold;font-style:italic;}
u {color:#888;text-decoration:underline;} 

.list {
display: flex;
align-items: flex-start; 
margin-bottom: 2px;
}

/* scrollbar */

::-webkit-scrollbar-thumb {
background-color: #fff; border-radius:5px;
border:1px solid #F8ACBF;}
::-webkit-scrollbar {
width: 7px; height: 0px; 
background: transparent;}

/* titles */

.title 
{
text-transform:uppercase;
font:bold 12px adabelle; 
color:#777;
line-height:10px;
padding:0px;
letter-spacing:2px;
}

#h3 {
font-size: 8px;
}

/* container */

.wrapper {
margin: 0 auto;
width: 100%;
max-width: 700px;
padding: 10px 0;
box-sizing: border-box;
}

.layout {
max-width: 100%;
display: flex;
gap: 8px;
box-sizing: border-box;
justify-content: center;
}

/* box */

.box {
padding: 6px 6px;
margin-bottom:13px;
border-radius:5px;
text-align: center;
}

.image img {
width: 100%;
max-width: 20em;
margin: 0.2em;
display: block;
}

.image {
position: relative;
display: inline-block;
margin: 0.2em; 
}

.image img {
margin: 0; 
}

.image:hover .overlay {
opacity: 1;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(252, 150, 187, 0.8);
font-family: simplythebest;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0;
transition: opacity 0.3s;
border-radius: inherit;
}

@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}

/* footer */

.footer {text-align: center;
padding-top: 7px;}

/* responsive */

@media (max-width: 640px) { 
.layout {
flex-direction: column;
}
.left, .main, .right {
flex: 1 1 100%;
}
}