.wrapper {
  border: 2px solid #aab2a0;
}

.meow {
  width: 900px;
  background: white;
  display: grid;
  grid-template-columns: 25% 75%;
}

.meow > div {
  height: 100%;
}

.grid {
  display: grid;
}

.side {
  background-image: url("https://fuchi.neocities.org/graphics/home/lightplaid.jpg");
  background-size: 200px;
  height: 200px;
  border-right: 1px solid lightgrey;
}

.border {
  border-width: 7px; 
  border-style: solid;
  border-image: url("https://fuchi.neocities.org/graphics/home/laceborder.gif") 7 fill round;
}

#intro {
  background-image: url("https://fuchi.neocities.org/graphics/home/intro.jpg");
  background-position: center;
  background-size: cover;
  height:300px;
  padding:15px 20px 20px 20px;
  border-bottom:1px solid #b5cea3;
}

#mini-intro {
  height:200px;
  margin-top:35px;
  background:#ffffffbf;
  padding:20px;
  border-radius:10px;
  -webkit-box-shadow: 5px 5px 9px -5px rgba(82,99,87,1);
  -moz-box-shadow: 5px 5px 9px -5px rgba(82,99,87,1);
  box-shadow: 5px 5px 9px -5px rgba(82,99,87,1);
}

a {
  color: #95ad89;
}

a:hover {
  text-decoration: none;
}

.header {
  background-image: url("https://fuchi.neocities.org/graphics/home/trainbg.jpg");
  background-position: center;
  background-size: cover;
  padding: 10px 20px 5px 20px;
  border-bottom: 1px solid #aab2a0;
}

#wing {
  width:95px;
  display: inline-block;
}

.text {
   filter: drop-shadow(5px 0 1px white) drop-shadow(0 5px 1px white) drop-shadow(-5px 0 1px white) drop-shadow(0 -5px 1px white) drop-shadow(-0px 1px 1px #424540);
  text-shadow: 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8;
  font-size:6em;
  text-align: center;
font-family: winkle;
  color:#b1c0a6;
}

#vine {
  position:absolute;
  z-index: 100;
  filter: drop-shadow(-0px 1px 1px #000);
}

#nav > div {
  font-family: winkle;
  display: block;
  padding: 11px 5px 5px 10px;
  border-bottom: 1px solid #b5cea3;
  background:#e6f0df;
  font-size: 22px;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px #fff9;
}

#nav a {
  color: #79826e;
  text-decoration: none;
text-shadow: 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8;
}

#nav a:hover {
 color: #9bab89
}

.bar {
  background-color: #c8d4bc;
  padding:5px 10px 5px 10px;
  border-bottom: 1px solid #aab2a0;
}

.update {
  background-color:#ebefe8;
  border: 1px solid lightgray;
  height: 180px;
  padding: 10px;
  font-size: 16px;
  overflow-y: scroll;
  color: #6d7068;
}

#hirono {
  position:absolute;
  z-index:100;
  bottom:10px;
  left:10px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.lace {
  background-image: url("https://fuchi.neocities.org/graphics/home/lace1.png"), url("https://fuchi.neocities.org/graphics/home/paledot.jpg");
  background-repeat: repeat-x, repeat;
  background-size: auto, 300px;
  background-position: top, auto;
  padding-top: 75px;
  min-height: 600px;
}

hr {
  border-color: white;
}

audio {
  width: 100%;
  display: block;
  border: 2px ridge white;
  border-radius: 0;
}

h3,h2 {
  margin: 0;
  line-height: 1.5em;
  text-align: center;
  color: #a7ad9a;
  font-family: winkle;
  font-weight: 400;
  text-shadow: 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8;
}

h2 {
  font-size:2em;
} 

h3 {
  font-size:1.5em;
}

#statuscafe {
  padding: .5em;
  background-color: #eef3eb;
  border: 1px solid #b0c199;
  text-align: left;
  height: 80px;
  border-radius: 4px;
  color: #6a755d;
  font-size: 12px;
  width:143px;
  vertical-align: top;
  display: inline-block;
}

#statuscafe-username {
  margin-bottom: .5em;
  color: #aac08d;
  font-family: ms pgothic;
}

#statuscafe-content {
  margin: 0 1em 0.5em 1em;
  font-family: ms pgothic;
}

.dropdown span:hover {
   color: #9bab89;
}
  
.dropdown {
  position: relative;
  display: inline-block;
  color: #79826e;
	text-shadow: 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #b8c4af;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border: 1px solid #788171;
  border-radius: 10px;
  font-family: Balsamiq Sans;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content li {
  font-size: 13px;
  border-bottom: 1px solid #788171;
  padding: 4px 10px 4px 10px;
  color: #8c9684;
  list-style-type: none;
}

.dropdown-content li a {
  color: #8c9684;
}

#foot {
  font-size: 14px;
  padding:10px;
  width:100%;
  text-align:center;
  background-color:#cfdcc0;
  color:rgb(101, 119, 97);
  text-shadow: 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8, 0 0 10px #dfe8d8;
}

#foot a {
  color: rgb(101, 119, 97);
}

#paper {
    position:absolute;
    z-index:-1;
    width:400px;
    right:-10px;
    bottom:-70px;
    filter: drop-shadow(-0px 1px 1px #81877B);
    transform:rotate(1deg);
}

#score {
  transform:rotate(1deg);
  width:340px;
  padding:0 20px 0 40px;
  height:320px;
  overflow-y: auto;
  margin-top: 10px;
}

#status {
  background-color:rgb(217, 229, 211);
  width:100%;
  border: 1px solid lightgrey;
  padding:0 10px 5px 10px;
  box-shadow: inset 0 0 0 1px rgba(220, 251, 216, 0.6);
  border-radius:4px;
}

#mini {
  color:#677261;
  margin-top: 20px;
  border: 1px solid lightgrey;
  background-color: rgb(250, 247, 244);
  min-height: 210px;
  padding: 5px 10px 5px 10px;
  box-shadow: inset 0 0 0 1px rgba(220, 251, 216, 0.6);
}

#tv {
  background-color:#f5f4f1;
  background-image:url('https://fuchi.neocities.org/graphics/home/warmdot.jpg');
  padding:10px;
  background-size: 200px;
}