@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');


body{
margin-top: 25px;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  background: url(https://i.imgur.com/gfovGKv.gif);
  font-family: ms gothic;
}

      footer{text-align:center;}
      
.wrapper {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 5px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "pets";
  width: 900px;
  height: 2000px;
   border-width:7px;
  border-style:solid;
  border-image: url("https://i.imgur.com/uleTTYd.png") 7 fill round;
  background-color: #fff;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.pets {  display: grid;
  grid-template-columns: 1fr 0.1fr 2.4fr;
  grid-template-rows: 0.3fr 1.7fr 1fr;
  gap: 10px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "banner banner banner"
    "box1 box1 box2"
    "box3 box3 box3";
  grid-area: pets;
  width: 875px;
  height: 2000px;
  border: ridge silver;
  border-radius: 10px;
  margin: auto;
  background: url(https://i.imgur.com/AV1ZOcl.gif);
  box-shadow: 10px 10px #cacac4;
}

.banner {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "banner-in banner-in banner-in"
    "banner-in banner-in banner-in"
    "banner-in banner-in banner-in";
  grid-area: banner;
  border-radius: 10px 10px 0px 0px;
  border-bottom: 1px silver solid;
  background: url(https://i.imgur.com/pLVdyJG.jpg);
  background-position:center;
  padding: 20px;
  height: 150px;
}

.banner-in { grid-area: banner-in; 
background: url(https://i.imgur.com/oZ8W57s.png);
background-size:contain;
padding: 40px;
font-family: 'Hachi Maru Pop', cursive;  
text-align:center;
letter-spacing: 10px;
font-size: 30px;
font-weight: 900;
color: #fff;
text-shadow: 0px 0px 1px white, 0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,1px 1px 2px #555555;}

.box1 {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1.6fr 0.4fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "box1-in1 box1-in1 box1-in1"
    "box1-in2 box1-in2 box1-in2"
    "box1-in2 box1-in2 box1-in2";
  grid-area: box1;
  border-radius: 25px;
  padding-left: 10px;
    height: 800px;
}

.box1-in1 { grid-area: box1-in1; 
  height: 700px;
  overflow: auto;
border: dotted 1px silver;
 text-align:center;
padding: 10px;
background: rgb(244,237,235);
background: -moz-linear-gradient(183deg, rgba(244,237,235,1) 0%, rgba(245,238,234,1) 24%, rgba(255,255,255,1) 82%);
background: -webkit-linear-gradient(183deg, rgba(244,237,235,1) 0%, rgba(245,238,234,1) 24%, rgba(255,255,255,1) 82%);
background: linear-gradient(183deg, rgba(244,237,235,1) 0%, rgba(245,238,234,1) 24%, rgba(255,255,255,1) 82%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4edeb",endColorstr="#ffffff",GradientType=1);
}

.box1-in2 { grid-area: box1-in2; 
border: dotted 1px silver;
background: url(https://loves1ck.neocities.org/img/lightblue-dots-tile.png);
  text-align:center;
padding: 10px;
height: 522px;
overflow: auto;
}

.box2 {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "box2-in1 box2-in1 box2-in1"
    "box2-in1 box2-in1 box2-in1"
    "box2-in2 box2-in2 box2-in2";
  grid-area: box2;
  padding-right: 10px;
}

.box2-in1 { grid-area: box2-in1; 
border: dotted 1px silver;
background: url(https://loves1ck.neocities.org/img/lightblue-dots-tile.png);
text-align:center;
padding: 10px;
height: 825px;}

.box2-in2 { grid-area: box2-in2;
  overflow: auto;
  height: 396px;
 text-align:center;
padding: 10px;
border: dotted 1px silver;
background: rgb(244,237,235);
background: -moz-linear-gradient(343deg, rgba(244,237,235,1) 0%, rgba(245,238,234,1) 24%, rgba(255,255,255,1) 82%);
background: -webkit-linear-gradient(343deg, rgba(244,237,235,1) 0%, rgba(245,238,234,1) 24%, rgba(255,255,255,1) 82%);
background: linear-gradient(343deg, rgba(244,237,235,1) 0%, rgba(245,238,234,1) 24%, rgba(255,255,255,1) 82%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4edeb",endColorstr="#ffffff",GradientType=1);}

.box3 {  display: grid;
  grid-template-columns: 1fr 1.1fr 0.9fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "box3-in2 box3-in2 box3-in"
    "box3-in2 box3-in2 box3-in"
    "box3-in2 box3-in2 box3-in";
  grid-area: box3;
    padding-right: 10px;
      padding-left: 10px;
  padding-bottom: 10px;
  height: 500px;
}

.box3-in { grid-area: box3-in;
border: dotted 1px silver;
height: 450px;
overflow-x:hidden;
  overflow-y: auto;
  background: url(https://i.imgur.com/pLVdyJG.jpg);
  background-position:center;
text-align:center;
font-size: 13px;
padding: 20px;}

.box3-in2 { grid-area: box3-in2;
border: dotted 1px silver;
background:  linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url(https://i.imgur.com/qTVMhXy.gif);
overflow: auto;
text-align:center;
font-size: 13px;
padding: 20px;
height: 450px;
      }

.spin {
    animation-name: spin;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }

 ::-webkit-scrollbar{
width: 15px; 
}
    
::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #c3d0e6;
border-radius: 10px;
border: 5px double #ffffff;
}

#milk-lace {
   position:relative;
  z-index:999;
  width:100%;
  background-image: url(https://loves1ck.neocities.org/img/sozai/lace-01-blue-small.png);
  height:46px;
  background-repeat: repeat-x;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d) ;
}

a {color: #7f96b0; }
a:hover{color: black;}

h1{font-family: 'Hachi Maru Pop', cursive;
  font-size: 50px;
  letter-spacing: 2px;
color: #7f96b0;
text-shadow: 0px 0px 1px white, 0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,1px 1px 2px #555555;}

h2{background: #fff;
  color: #7f96b0;
  font-size: 20px; 
  letter-spacing: 2px;}

h3{font-family: 'Hachi Maru Pop', cursive;
  font-size: 25px;
  letter-spacing: 2px;
color: #7f96b0;
text-shadow: 0px 0px 1px white, 0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,1px 1px 2px #555555;}

b{color: #7f96b0;
text-shadow: 0px 0px 1px white, 0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,0px 0px 1px white,1px 1px 2px #555555;}

.float{width: 300px;
    margin: 0 auto;
    display: block;
    position: relative;
    bottom: 1500px;
    left: -290px;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d) ;}

.float-r{width: 275px;
    margin: 0 auto;
    display: block;
    position: relative;
    bottom: 2100px;
    right: -350px;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d) ;}

.column {
  float: left;
  width: 45%;
  margin: 2%;
  padding: 0.5%;
  background: white;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

      .column2 {
  text-align:center;
  width:100%;
  margin: 2%;
  padding: 10px;
  background: white;

}
      
.fit {height: 175px;
width: 175px;
}
      
.shadow{   box-shadow: 5px 5px #c3d0e6;}