body {
background: rgb(255,212,230);
background: linear-gradient(180deg, rgba(255,212,212,1) 0%, rgba(255,255,230,1) 36%, rgba(255,255,230,1) 62%, rgba(223,231,129,1) 83%);
overflow: hidden;
height: 100vh;
cursor: url(https://mypillowfort.neocities.org/media/713.png), auto;
margin: 0px;
background-attachment: fixed;
}
::selection {
text-shadow: 1px 1px 3px;
}
::-webkit-scrollbar {
  width: 0px;
height: 0px;
}

.layout {
display: flex;
margin: 0.2rem;
height: inherit;
justify-content: center;
flex-direction: column;
}

.top {
    margin: auto;
    margin-bottom: 0rem;
    margin-top: 5rem;
    max-height: 20rem;
    overflow: auto;
    display: flex;
    padding: 0.2rem;
    width: 33rem;
    filter: drop-shadow(0px 0px 1px #ffffe6) drop-shadow(0px 0px 0px #ffffe6) drop-shadow(0px 0px 0px #ffffe6) drop-shadow(0px 0px 0px #ffffe6) drop-shadow(0px 0px 0px #ffffe6) drop-shadow(0px 0px 0px #B79B86);
}

.bottom {
margin: auto;
margin-top: 0rem;
height: 4rem;
width: 46rem;
}

.flower {
image-rendering: pixelated;
position: relative;
pointer-events: none;
top: -6.95rem;
left: 0rem;
}

.left {
width: 25%;
overflow: auto;
}

.right {
width: 25%;
overflow: auto;
}

.middle {
width: 50%;
display: flex;
align-items: center;
flex-direction: column;
}

.cred {
text-align: center;
position: relative;
font-family: ms pgothic;
color: #837D74;
Font-size: 0.65rem;
left: -9.3rem;
top: -10.3REM;
text-shadow: 1px 1px #ffffe6;
}

.box1 {
border: 0.1px ridge #E0E599;
Width: 14.2rem;
height: fit-content;
border-radius: 0.8rem;
background: #ffffe6;
font-family: ms pgothic;
color: #837D74;
Font-size: 0.635rem;
padding: 0.1rem;
}

a {
color: #A1CBE2;
}

a:hover {
color: #A1CBE2;
cursor: url(https://mypillowfort.neocities.org/media/714.png), pointer;
font-style: italic;
text-decoration: none;
letter-spacing: 0.05rem;
transition: all 0.05s ease-in-out 0s;
}

a:not(hover) {
letter-spacing: 0px;
transition: all 0.04s ease-in-out 0s;
}

.frog {
float: right;
image-rendering: pixelated;
margin-top: -1rem;
margin-right: -1.5rem;
filter: brightness(109%)
hue-rotate(var(--value, 360deg)); --value: -25deg;
}

.box2 {
border: 0.1px ridge #E0E599;
margin: 0.8rem;
height: fit-content;
border-radius: 0.8rem;
background: #ffffe6;
margin-top: 0.9rem;
font-family: ms pgothic;
color: #837D74;
Font-size: 0.635rem;
padding: 0.3rem;
}

.title {
font: 8pt arial;
border-top: 1px dashed #FFC6C6;
border-bottom: 1px dashed #FFC6C6;
background: #FFC6C640;
font-weight: 600;
text-align: center;
text-shadow: 1px 1px #837D74;
color: #FFC6C6;
margin: -0.1rem;
margin-bottom: 0.2rem;
}

.box3 {
border: 0.1px ridge #E0E599;
margin: 0.3rem;
margin-bottom: 0.5rem;
height: fit-content;
border-radius: 0.8rem;
background: #ffffe6;
font-family: ms pgothic;
color: #837D74;
Font-size: 0.635rem;
padding: 0.3rem;
}

a.o {
text-decoration: none;
color: #837D74;
}

a.o:hover {
text-decoration: none;
color: #837D74;
font-style: italic;
margin-left: 0.1rem;
border-top: 1px dashed #FFC6C6;
border-bottom: 1px dashed #FFC6C6;
background: #FFC6C640;
letter-spacing: 0.1209rem;
}

img.fla {
filter: sepia(20%) brightness(110%) hue-rotate(var(--value, 360deg)); --value: 10deg;
}

img.fli {
filter: saturate(6) sepia(80%) brightness(110%) hue-rotate(var(--value, 360deg)); --value: 3deg;
}

img.no {
filter: brightness(103%)
hue-rotate(var(--value, 360deg)); --value: 0deg;
}

img.flower {
filter: brightness(100%)
hue-rotate(var(--value, 360deg)); --value: 0deg;
}

img.guest {
filter: sepia(80%) brightness(110%) hue-rotate(var(--value, 360deg)); --value: -56deg;
}

img.mail {
filter: 
filter: sepia(80%) 
brightness(120%)
hue-rotate(var(--value, 360deg)); --value: -30deg;
}

.clock {
border: 0.1px ridge #E0E599;
margin: 0.3rem;
margin-bottom: 0.5rem;
height: fit-content;
text-align: center;
border-radius: 0.8rem;
background: #FFFFE8;
box-shadow: 0px 0px 6px #E0E599 inset;
padding: 0.3rem;
font: 8pt arial;
text-shadow: 1px 1px #837D74;
color: #FFC6C6;
}

.clock::before {
content: url(https://mypillowfort.neocities.org/media/655.png);
margin-bottom: 2rem;
margin-right: 0.3rem;
}

.clock::after {
content: url(https://mypillowfort.neocities.org/media/655.png);
margin-bottom: 2rem;
margin-left: 0.3rem;
}

.cal {
border: 0.1px ridge #E0E599;
margin: 0.2rem;
margin-top: 0.9rem;
margin-bottom: 0.5rem;
height: 132px;
width: 135px;
text-align: center;
border-radius: 0.8rem;
background: #FFFFE8;
padding: 0.3rem;
font: 8pt arial;
text-shadow: 1px 1px #837D74;
color: #FFC6C6;
}

.flex2 {
display: flex;
flex-direction: space-evenly;
margin-top: 0.5rem;
}

.box4 {
border: 0.1px ridge #E0E599;
margin: 0.3rem;
margin-bottom: 0.5rem;
height: fit-content;
border-radius: 0.8rem;
background: #ffffe6;
font-family: ms pgothic;
color: #837D74;
Font-size: 0.635rem;
padding: 0.3rem;
text-align: center;
}

.box5 {
border: 0.1px ridge #E0E599;
margin: 0.3rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
height: fit-content;
width: 5.3rem;
border-radius: 0.8rem;
background: #ffffe6;
font-family: ms pgothic;
color: #837D74;
Font-size: 0.635rem;
padding: 0.3rem;
}

#statuscafe {
background: #FFFFE8;
border: 0.1px ridge #E0E599;
font-family: ms pgothic;
color: #837D74;
Font-size: 0.635rem;
padding: 0.1rem;
BORDER-RADIUS: 5PX;
max-width: 5.5rem;
margin: 0.3rem;
}
#statuscafe-username {
font: 5pt arial;
border-top: 1px dashed #FFC6C6;
border-bottom: 1px dashed #FFC6C6;
background: #FFC6C640;
font-weight: 500;
margin: 0rem;
margin-bottom: 0.2rem;
text-align: center;
text-shadow: 1px 1px #837D74;
color: #FFC6C6;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
font-size: 0.5rem;
}

.center {
text-align: center;
}

.title2 {
font: 8pt arial;
font-weight: 600;
text-shadow: 1px 1px #837D74;
color: #FFC6C6;
margin-top: -0.5rem;
position: relative;
margin-left: -0.5rem;
}

.title3 {
font: 7pt arial;
font-weight: 900;
text-shadow: 1px 1px #837D74;
color: #FFC6C6;
text-align: center;
margin-top: -0.45rem;
margin-bottom: -0.3rem;
}

.house {
background: url(https://mypillowfort.neocities.org/media/664.png);
width: 133px;
height: 133px;
text-align: center;
border: 0px dashed transparent;
word-spacing: 0px;
padding: 1px;
}

.floor2 {
border: 0px dashed red;
height: 30px;
width: 100px;
margin-left: 15px;
margin-top: 65px;
padding: 0px;
}

.floor1 {
border: 0px dashed blue;
height: 27px;
width: 100px;
margin-left: 15px;
margin-top: 4px;
padding: 0px;
}

.txb1 {
margin-left: 0.4rem;
margin-right: 0.4rem;
overflow: auto;
height: 5.5rem;
}

.da {
margin-left: 0.3rem;
}

ul {
    list-style-image: url(https://mypillowfort.neocities.org/media/654.png);
margin-left: -1.5rem;
image-rendering: pixelated;
}

@media screen and (max-width:768px) {
@font-face {
  font-family: ms pgothic;
  src: url(https://mypillowfort.neocities.org/mspgothic.ttf);
}

.layout {
margin-top: 100rem;
}
}
}