/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   
   
   .box {
  max-width: 840px;
  height: fit-content; 
  display: grid;
   margin-left: auto;
  margin-right: auto;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-gap: 5px;
 
}


body {
  background-image: url("otterbackground.jpg");
background-size: cover;
background-repeat: no-repeat;
  color: black;
  font-family: Verdana;
  
}  


header {
    background-color: black;
  height: 127px;
   max-width: 845px;
   border-radius: 5px;
  margin: auto;
  background-image: url("bannerfinal.png");
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border: black 3px solid;
}

.miniheader {
   
  background-size: auto;
  background-repeat: no-repeat;

  font-size:20px;
  height: 148px;
  width: 845px;
}




main {
border: purple 2px dotted;
display: grid;
grid-template-columns: 1fr 1fr;
  
}


.box1 {
  display: grid;
  border-radius: 5px;
  grid-template-columns: 1fr 1fr 1fr;
  background-image:url("brownplaid.jpg");
  height:985px;
  border: black 3px solid;
  
}





.box2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  width:164px;
  background-image:url("otterchecker1.png");
  border: black 2px solid;
  margin:7px 7px 7px 7px;
  overflow-y:hidden;
  overflow-x:hidden;
  border-radius: 5px;

}

.menu {
  width:150px;
  height:280px;
  
  border: black 2px solid;
  background-color:#f3f4e8;
  overflow-y:scroll;
  border-radius: 5px;
   margin:4px 4px 4px 4px;
  overflow-x:hidden;
}

.menu2 {
  width:150px;
  margin:3px 3px 3px 3px;
  height:123px;
  border: black 2px solid;
  background-color:#f3f4e8;
  border-radius: 5px;
  overflow-y:scroll;
  overflow-x:hidden;
}

.extra2 {
  width:150px;
  border: black 2px solid;
  overflow-y:hidden;
  height:25px;
 vertical-align: middle;
  border-radius: 5px;
  margin:4px 4px 4px 4px;
  background-color:#f3f4e8;
}
.extra3 {
  width:150px;
  border: black 3px dotted;
  overflow-y:hidden;
  height:25px;
  border-radius: 5px;
  margin:4px 4px 4px 4px;
  background-color:#f3f4e8;
}

.text-index {
  width:490px;
  margin:7px 0px 7px 0px;
  border: black 2px solid;
  overflow-y:hidden;
  overflow-x:hidden;
  border-radius: 5px;
  display: grid;
  background-image: url("otterchecker1.png");
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr 1fr;
}

.index-welcome {
  width: 475px;
  margin: 5px 5px 5px 5px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;

}

.index-w-image {
  margin: auto;
  width: 185px;
  height: 240px;
  border-radius: 5px;
  background-image:url("https://i.pinimg.com/1200x/a3/61/82/a3618228413b8ef7ae1279800082b230.jpg");
  background-size: cover;
  border: black 2px solid;
  background-color:#f3f4e8;
}

.index-w-text {
margin: 5px 5px 5px 5px;
  width: 260px;
  padding: 10px;
  font-size:12px;
  border-radius: 5px;
  background-color:#f3f4e8;
  border: black 2px solid;

}

.stamp-fun {
  width:485px;
  margin: auto;
  height:100px;
}

.text-body {
  background-color: #f3f4e8;
  width: 485;
  height:327px;
  margin: 5px 5px 5px 5px;
  border: black 2px solid;
  border-radius: 5px;
  padding: 10px;
  overflow-y:scroll;
  overflow-x:hidden;
}

.neighbors {
  background-color: #f3f4e8;
  width: 466px;
  height:179px;
  margin: 0px 5px 5px 5px;
  border: black 2px solid;
  border-radius: 5px;
  padding: 5px;
  overflow-y:hidden;
  overflow-x:hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.neighbors1 {
  width: 85px;
  margin:3px;
  border: black 2px solid;
  border-radius: 5px;
  padding: 15px 3px 7px 3px;
  overflow-y:hidden;
  overflow-x:hidden;
}
.neighbors2 {
  width: 345px;
  margin:3px;
  border: black 2px solid;
  border-radius: 5px;
  padding: 5px;
  overflow-y:scroll;
  overflow-x:hidden;
}

.base-header { 

  width: 435px;
  margin: 5px 5px 5px 5px;
  background-color: #f3f4e8;
  height:150px;
  border: black 2px solid;
  border-radius: 5px;
  padding: 15px 20px;
  overflow-y:scroll;
  overflow-x:hidden;

}

.base-wiki { 

  width: 435px;
  margin: 5px 5px 5px 5px;
  background-color: #f3f4e8;
  height:715px;
    padding: 20px;
  border: black 2px solid;
  border-radius: 5px;

  overflow-y:scroll;
  overflow-x:hidden;
}


a {
    text-decoration: underline;
    color:black;
}

.extra {
  border: black 2px solid;
  width:155px;
  border-radius: 5px;
  margin:7px 7px 7px 7px;
  background-image:url("otterchecker1.png");
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  overflow-y:hidden;
  overflow-x:hidden;
}


.scrolly {
  font-size:12px;
  width: 126px;
  background-color: white;
  padding:2px;
  border: brown 2px dotted;
  overflow-y: scroll;
  margin: 1px;
  height: 120px;
  border-radius: 5px;
  overflow-x: hidden;
}

.extra4 {
  width:140px;
  border-radius: 5px;
  border: black 2px solid;
  overflow-y:hidden;
  height:25px;
  margin:4px 4px 4px 4px;
  
  background-color:#f3f4e8;
}

.extra5 {
  width:135px;
  border-radius: 5px;
  border: black 2px solid;
  overflow-y:hidden;
  height:150px;
  margin:4px 4px 4px 4px;
  padding: 4px;
  background-color:#f3f4e8;
}

.extra6 {
  width:143px;
  border: black 2px solid;
  border-radius: 5px;
  height:75px;
  margin:3px 3px 0px 3px;
padding: 1px 1px;
  background-color:#f3f4e8;
}

.ad {
  border: 2px black solid;
  margin:4px 4px 4px 4px;
  height:450px;
  width:150px;

}

.ad2 {
  border: 2px black solid;
  margin:4px 4px 4px 4px;
  height:300px;
  width:150px;
  
}

.extra7 {
  width:140px;
 border: black 2px solid;
  overflow-y:hidden;
  border-radius: 5px;
  height:230px;
  margin:4px 4px 4px 4px;
  background-color:black;
  background-image:url("checkertranslucent.gif");
   display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr
}

.extra8 {
  width:130px;
  border: black 2px solid;
  border-radius: 5px;
  height:50px;
  margin:4px 4px 4px 8px;
padding: 1px 2px;
  background-color:#f3f4e8;
}


.chatbox {
  width:140px;
  height:300px;
  margin:4px 4px 4px 6px;

}
.extra9 {
  width:135px;
  border-radius: 5px;
  border: black 2px solid;
  overflow-y:hidden;
  height:370px;
  margin:4px 4px 4px 4px;
  padding: 4px;
  background-color:#f3f4e8;
}

.extra10 {
  width:135px;
  border-radius: 5px;
  border: black 2px solid;
  overflow-y:hidden;
  height:120px;
  margin:4px 4px 4px 4px;
  padding: 4px;
  background-color:#f3f4e8;
}

.chatbox2 {
  width:140px;
  height:300px;
  margin:4px 4px 4px 4px;

}

.motm {
  border: black 2px solid;
  width:125px;
  background-image:url("https://i.pinimg.com/1200x/41/8c/e9/418ce9c25dc0947c1d6154ef5ce4ace7.jpg");
  background-size:cover;
  height:125px;
  margin-left: auto;
  background-color: white;
  margin-right: auto;
}

footer {
  border-radius: 5px;
  border: black 3px solid;
  height: 70px;
  text-align: center;
vertical-align: middle;
line-height: 65px; 
  background-color: #f3f4e8;
 
}




    #container1 {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
      border: 3px solid;
      border-image-slice: 1;
      border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
    }
    
    
        #container2 {
      overflow: scroll;
      height: 10em;
      width: 10em;
      padding: 1rem;
      border-radius: 5px;
      box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
    
     #container2::-webkit-scrollbar {
      width: 0; /* remove scrollbar space */
      background: transparent; /* to make scrollbar invisible */
    }

    #container2::-webkit-scrollbar-thumb {
      background: transparent;
    }

    


.linkbutton-1
{text-align:center;
background:#FCB8B7;
padding:3px;
border:2px outset #FCB8B7;
margin:1px 1px 1px 1px;
width:140px;
}

.linkbutton-1:hover
{border:2px inset #FCB8B7;

}

.linkbutton-2
{text-align:center;
background:#B2C0BD;
padding:3px;
border:2px outset #B2C0BD;
margin:1px 1px 1px 1px;
width:140px;
}

.linkbutton-2:hover
{border:2px inset #B2C0BD;

}

.linkbutton-3
{text-align:center;
background:#F3E9DE;
padding:3px;
border:2px outset #F3E9DE;
margin:1px 1px 1px 1px;
width:140px;
}

.linkbutton-3:hover
{border:2px inset #F3E9DE;
}

.linkbutton-4
{text-align:center;
background:#f3f4e8;
padding:3px;
border:2px outset #f3f4e8;
margin:1px 1px 1px 1px;
}

.linkbutton-4:hover
{border:2px inset #f3f4e8;
}


 /**************** animations **********************/
    .rainbow2 {
        animation-name: rainbow2;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    @keyframes rainbow2 {
        0% {
            filter: drop-shadow(1px 1px 0 yellow) drop-shadow(-1px 1px 0 pink) drop-shadow(0 -1px 0 lightblue)hue-rotate(0deg);
        }

        50% {
            filter: drop-shadow(1px 1px 0 yellow) drop-shadow(-1px 1px 0 pink) drop-shadow(0 -1px 0 lightblue)hue-rotate(180deg);
        }

        100% {
            filter: drop-shadow(1px 1px 0 yellow) drop-shadow(-1px 1px 0 pink) drop-shadow(0 -1px 0 lightblue)hue-rotate(360deg);
        }
    }



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

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee-content {
  display: inline-flex;
  gap: .5rem;
  animation: marquee 30s steps(400, end) infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

.marquee-content img {
  vertical-align: middle;
}

.stampbox {
  background-color:#f3f4e8;
  height: 60px;
  padding: 5px;
  width:465px;
  margin:3px;
  border: 2px black solid;
  border-radius: 5px;
}

.blinkies {
  background-color:#f3f4e8;
  height: 25px;
  padding: 2px;
  width:465px;
  margin:3px;
  border: 2px black solid;
  border-radius: 5px;
}


blockquote {
  background: rgba(254, 255, 247, 0.6);
 border-radius: 8px;
  padding: 5px 10px;
  margin: 1px 0;
  font-style: italic;
  color: #634628;
  border-radius: 8px;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);
}

h2 {
  background: rgba(254, 255, 247, 0.6);
  color: #634628;
  margin: 3px 0px;
  border-radius: 8px;
  padding:5px;
  font-size: 25px;

}


h3 {
  font-size: 15px;
  
  margin-bottom: 2px;
}

strong {
  color: #662c14;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.4);
  padding: 1px 3px;
  border-radius: 4px;
}


.custom-list1 li {
  list-style: none;
  padding: 5px 5px 5px 30px;
  background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/25e46574-05d5-4425-916d-e5292bb066ac/dbhq7bg-3cc7f4ef-7124-4bd6-8316-bda24189dc1a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi8yNWU0NjU3NC0wNWQ1LTQ0MjUtOTE2ZC1lNTI5MmJiMDY2YWMvZGJocTdiZy0zY2M3ZjRlZi03MTI0LTRiZDYtODMxNi1iZGEyNDE4OWRjMWEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.OehiCPZpOD66pGQdJjNomRCdN9XSlphoiAqnGgeDzEM");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
}

.custom-list2 li {
  list-style: none;
  padding: 5px 5px 5px 30px;
  background-image: url('https://pixelsafari.neocities.org/favicon/animals/bug/butterfly3.gif');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
}

.custom-list3 li {
  list-style: none;
  padding: 5px 5px 5px 30px;
  background-image: url('https://pixelsafari.neocities.org/favicon/animals/bug/butterfly3.gif');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
}