:root {
  --background: url('/background.png');
}

body {
  background: fixed;
  background-image: var(--background);
  background-size: 80px;
  background-repeat: repeat;
  background-position: center;
  color: #9f3d25;
}

.box1 {c

  order: 2;
  max-width: 100%;
  width: 100%;
  border-width: 8px; 
  background-image:url('bg.webp');
  border-style: solid;
  padding: 10px 10px 10px 10px;
  border-image: url('/bordercopy.png') 6 fill round;
  color: #FF71B3;
  font-family: 'windows';
  font-size: 14px;
  letter-spacing: 1px;
image-rendering: pixelated;
}

.box2 {
  order: 2;
  max-width: 100%;
  width: 100%;
  border-width: 8px; 
  background-size: 100%;
  background: white;
  background-image:url('https://64.media.tumblr.com/547f4b850bd3286779cebade379d7e00/tumblr_mu61ojgdZC1s35i1to1_640.png');
  border-style: solid;
  padding: 10px 10px 10px 10px;
  border-image: url('/bordercopy.png') 5 fill round;
  font-family: 'windows';
  font-size: 14px;
  letter-spacing: 1px;
  image-rendering: pixelated;
  

}

.lacebox {
  order: 2;
  border-style: solid;
  border: 1px white;
  padding: 10px 10px;
  background-image: url('https://i.pinimg.com/1200x/79/de/ba/79deba83fcec99e355f5f711ddc51d38.jpg');
  background-size: cover;
  background-position: center;
}

.gallery {
    display: inline-block;
    padding-left: 1px;
    padding-right: 1px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}
center{display: inline-block;}


.container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  background-image: url('https://www.fancyparts.com/fancyparts/cg/season/sakura/sakura_201m.gif');
  border: 3px dotted white;
  border-image: url('/bordercopy.png') 10 fill round;
  padding: 12px;
  image-rendering: pixelated;
}

footer, header {
  margin: -12px;
}

header {
  margin-bottom: 5px;
}

footer {
  padding: 10px;
  margin-top: 12px;
}

marquee {
  padding: 15px;
  margin-bottom: 15px;
}

marquee, footer {
  background: #FFD8E3;
  background: linear-gradient(to bottom, #e2f3ff 1%, #a5d5ff 49%, #71beff 51%, #ebf0f4 100%);
  border-top: 2px solid #9FD3FF;
  border-bottom: 1px solid #9FD3FF;
}

header img {
  width: 100%;
}

aside {
  width: 180px;
  border: white;
  flex-shrink: 1;
}

.left {
  order: 1;
}

.right {
  order: 3;
}

main {
  order: 2;
  margin: 0 13px;
  width: 100%;
  border-width: 5px; 
  border-style: solid;
  border-image: url('/bordercopy.png') 6 fill round;
  padding: 2px;
  background-image: url('/pinkheartbg.png');
  background-clip: padding-box;
  
}


.box {
  border: 2px solid #afdeff;
  border-radius: 1px;
}

section, article, nav {
  margin: 0;
  padding: 3px;
}

section:last-child, article:last-child {
  margin-bottom: 0;
}

nav ul {
  list-style: url('/applenav.gif');
  margin: 8px 0;
  padding: 0 24px;
}

nav a {
  display: block;
  padding: 2px;
}

nav a:hover {
  transition-duration: .4s;
  background: #eee;
}

h1, h3, h4, h5, h6, .heading {
  font-family: 'emily', 'Verdana';
  font-size: 2.5em;
}

h2, .heading {
  font-family: 'emily';
  font-size:1.5em;
  letter-spacing: 2px;
  padding: 5;
  color: #fff;

}

.heading {
  display: block;
  font-family: 'ms pgothic';
  background-image: linear-gradient(to bottom, #e2f3ff 1%, #a5d5ff 49%, #71beff 51%, #ebf0f4 100%);
  background-size: 10px 100%;
  text-shadow: 
    -1px -1px 0 #34b8ff,  
    1px -1px 0 #34b8ff,
    -1px  1px 0 #34b8ff,
    1px  1px 0 #34b8ff;
  border: 2px solid var(--pink);
  padding: 3px;
  padding-right: 6px;
  padding-left: 6px;
}

.updates {
  padding: 0;
  width: 100%;
  background-color: #ffffff;
  background-image:  linear-gradient(#e2f0f3 0.7000000000000001px, transparent 0.7000000000000001px), linear-gradient(to right, #e2f0f3 0.7000000000000001px, #ffffff 0.7000000000000001px);
  background-size: 14px 14px;
  
}

.updates ul {
  padding: 0;
  margin: 0;
  margin-left: 4px;
  margin-bottom: 3px;
  width: 100%;
  overflow: auto;
  scrollbar-width: thin;
  list-style: none;
  font-size: 0.8em;
  color: #a9765e;
  
}

.clover {
  order: 2;
  max-width: 100%;
  width: 100%;
  border-width: 15px;
  background-size: 100%;
  border-style: solid;
  background: none;
  padding: 0;
  border-image: url('/clover1.png') 15 15 15 15 round space;
  border-image-outset: 2px;
  font-family: 'windows';
  font-size: 14px;
  letter-spacing: 1px;
  image-rendering: pixelated;
  
}
.updates li {
  padding: 4px;
}

.updates h3 {
  border-radius: 7px 7px 0 0;
  margin-bottom:0;
}

.featured {
  width: 200px;
  padding: 10px;
}

.featured img {
  width: 150px;
}

.status {
  padding: 12px 0;
}


.buttons {
  width: 40%;
  padding: 10px 0;
}

.todo {
  width: 60%;
  border: 1px solid #b8e5ed;
  background-color: #ffffff;
  background-image:  linear-gradient(#e2f0f3 0.7000000000000001px, transparent 0.7000000000000001px), linear-gradient(to right, #e2f0f3 0.7000000000000001px, #ffffff 0.7000000000000001px);
  background-size: 14px 14px;
}

.todo .heading {
  border-bottom: 1px solid #b8e5ed;
  padding: 4px;
  background-color: #f0fdff;
  background-image:  linear-gradient(30deg, #b8e5ed 12%, transparent 12.5%, transparent 87%, #b8e5ed 87.5%, #b8e5ed), linear-gradient(150deg, #b8e5ed 12%, transparent 12.5%, transparent 87%, #b8e5ed 87.5%, #b8e5ed), linear-gradient(30deg, #b8e5ed 12%, transparent 12.5%, transparent 87%, #b8e5ed 87.5%, #b8e5ed), linear-gradient(150deg, #b8e5ed 12%, transparent 12.5%, transparent 87%, #b8e5ed 87.5%, #b8e5ed), linear-gradient(60deg, #b8e5ed77 25%, transparent 25.5%, transparent 75%, #b8e5ed77 75%, #b8e5ed77), linear-gradient(60deg, #b8e5ed77 25%, transparent 25.5%, transparent 75%, #b8e5ed77 75%, #b8e5ed77);
  background-size: 14px 25px;
  background-position: 0 0, 0 0, 7px 12px, 7px 12px, 0 0, 7px 12px;
}

.todo ul {
  height: 120px;
  scrollbar-width: thin;
  scrollbar-color: #b8e5ed white;
  overflow-y: auto;
}

.todo li {
  padding: 2px;
}

.todo li::marker {
  content: "\2610   ";
  color: black;
}

@media only screen and (max-width: 900px) {
  aside, main, main article, aside section {
    width: 100% !important;
  }
  
  main article, .welcome, .status {
    margin: 0 0 0 0;
  }
  
  aside {
    flex-shrink: 1;
  }
  
  main section, .welcome article, main {
    margin: 0 0 0 0;
  }
  
  ul {
    text-align: left;
  }
  
  body {
    text-align: center;
    margin: 0;
  }

  .featured {
    order: 2;
  }
  .updates {
    order: 1;
  }
  .status {
    display: none;
  }
}