@font-face {
  font-family: 'fontsncss';
  src: url(fontsncss/lacythethree.ttf);
}

@font-face {
  font-family: 'fontsncss2';
  src: url(/fontsncss/poti.ttf);
}

body {
    background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);
    background: url(images/wooden-bridge-river-forest-surrounded-by-trees-bushes.jpg) no-repeat center center fixed;
    font-family: fontsncss;
}

.header, .navBar, .content, .sideBar, .buttons, .chatBox {padding: 15px; border-radius: 20px; border: solid  rgba(25, 10, 5, 0.745) 5px;}
.introBox, .microBlog, .music, .innerSide, .buttonsIn {padding: 10px; border-radius: 6px; border: solid rgba(25, 10, 5, 0.745) 8px;}

.main {
    margin: auto;
    margin-top: 45px;
    display: grid;
    grid-template-areas: 
    "header header header"
    "navBar navBar navBar"
    "sideBar content chatBox"
    "sideBar content buttons" ;
    grid-template-columns: 250px 1fr 550px;
    grid-template-rows: 140px 70px 350px 280px;
    gap: 10px;
    max-width: 1800px;
}

.header {
grid-area: header;
background-image: url(images/5015.png);
font-family: fontsncss2;
font-size: 6.3rem;
letter-spacing: 20px;
font-weight: light;
text-align: right;
padding: 2%;
color: rgb(255, 246, 230);
border-bottom-left-radius: 0%;
border-bottom-right-radius: 0%;

}

.navBar {
color: white;
 grid-area: navBar;
 background-image: url(images/fa1af055d96107d069e97136438821a0.jpg);
 margin-bottom: 20px;   
 word-spacing: 20px;
  font-size: 1.2rem;
 text-align: center;
 a:link {
      color: #ffffff;
      
    }
    a:visited {
      color: #f0f8ff;
    }
    a:hover {
      color: #7d7b76;
    }
}

.sideBar {
grid-area: sideBar;
background-image:  url(images/brown091.gif);
}

.innerSide {
height: 538px;
background-image: url(images/downloadmegadark.jpg);
}

.sideText {
margin: 1%;
padding: 3%;
border: solid 2px rgb(35, 19, 10);   
border-radius: 6px;
background-color: #edd49a84;
}

.content {
grid-area: content;
background-image:  url(images/brown091.gif);
display: grid;
grid-template-areas: 
    "introBox microBlog"
    "music microBlog";
grid-template-columns: auto 400px;
grid-template-rows: auto 200px;
gap: 10px;
}

.buttons {
grid-area: buttons;
background-image:url(images/brown091.gif) ;
}

.buttonsIn {
height: 177.5px;
background-image: url(images/downloadmegadark.jpg);
}

.buttonsText {
margin: 1%;
padding: 3%;
border: solid 2px rgb(35, 19, 10);   
border-radius: 6px;
background-color: #edd49a84; 
height: 138px;
}

.rings {
padding-top: 2%;
overflow-y: scroll;
overflow: auto;
margin: auto;
scrollbar-width: none;
max-height: 73px;
}

.verdant {
filter: sepia(50%);
}
.ultraring {
  margin-left: 10%; 
    filter: sepia(99%);
}
.babyRings {
   filter: sepia(99%);
   padding-left: 5%;
}
.aiRing {
 filter: hue-rotate(90deg);
margin-top: 1%;
margin-left: 29%;
}
.palestine {
  margin: 2%;
  margin-left: 5%;
  width: 140px;
}

.sanringo {
  max-height: 20px;
}

.chatBox {
grid-area: chatBox;
background-image: url(images/brown091.gif);
padding: 15px;
}

.introBox {
grid-area: introBox;
background-image:  url(images/downloadmegadark.jpg);
border-image: url(images/fa1af055d96107d069e97136438821a0.jpg) 8 a;
}

.introInner {
margin: 1%;
padding: 3%;
border: solid 2px rgb(35, 19, 10);   
border-radius: 6px;
background-color: #edd49a84; 
height: 290px;
font-size: 1.1rem;
a:link {
      color: #000000;
      
    }
    a:visited {
      color: #000000;
    }
    a:hover {
      color: #44423f;
    }
}

.music {
grid-area: music;
background-image: url(images/downloadmegadark.jpg);
border-image: url(images/fa1af055d96107d069e97136438821a0.jpg) 8 a;
}

.musicText {
margin: 1%;
padding: 3%;
border: solid 2px rgb(35, 19, 10);   
border-radius: 6px;
background-color: #edd49a84; 
height: 126px;
}

.microBlog {
grid-area: microBlog;
background-image:url(images/downloadmegadark.jpg);
border-image: url(images/fa1af055d96107d069e97136438821a0.jpg) 8 a;
}

.microText {
margin: 1%;
padding: 4.5%;
border: solid 2px rgb(35, 19, 10);   
border-radius: 6px;
background-color: #edd49a84; 
height: 496px;
font-size: 1.1rem;
font-weight: lighter;
}

.blogTitle {
    font-family: fontsncss2;
    font-size: 4rem;
    font-weight: lighter;
    letter-spacing: 3px;

}

.bok {
  height: 170px;
  position: absolute;
  top: 1%;
  left: 65px;
rotate: 340deg;
}

@media (max-width: 800px)
{   .main {
    margin: auto;
    grid-template-areas: 
        "header header"
        "navBar content"
        "buttons chatBox";
    grid-template-columns: 270px 200px;
}
}

.buttonScroll {
  overflow: hidden;
  height: 45px;
  border-radius: 10px;
  margin-bottom: 2%;
}
.buttonScrollInner {
  --buttNumber: 15;
  --buttGape: 3.8px;
  --buttSpread: calc((128px + var(--buttGape)) * var(--buttNumber) ) ;
  display: flex;
  flex-direction: row;
  animation:  BUTOX 20s linear infinite;
  gap: var(--buttGape);
  width: var(--buttSpread);

  &:hover {
    animation-play-state: paused;
  }
}
@keyframes BUTOX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--buttSpread) * -1));
  }
}
.Butts {
  width: 128px;
  height: 44px;
  image-rendering: pixelated;
border-radius: 10px;
margin-bottom: 1.5%;
}
.lunoButts {
  height: 47px;
  translate: -0px -2px;
  border-radius: 10px;
  width: 128px;
}


#chattable {
height: 98%;
width: 98%;
border: solid 7px #1c0e0198;
border-image: url(images/fa1af055d96107d069e97136438821a0.jpg) 8 a;
border-radius: 10px;
}

.cute2 {
     border-width: 20px;
     border-style: solid;
     border-image-outset: 0.9;
     border-image: url(https://solaria.neocities.org/guides/borderimage/whitelace.png) 30 round;
     image-rendering: pixelated;
     background-clip: padding-box;

    }

.border {
  width: 134px;
  height: 40px;
  image-rendering: auto;

}
.stamp {
    margin: auto;
    margin-top: 1%;
    margin-bottom: 1%;
  margin-left: 7%;
  height: 65px;
  width: 114px;
  filter: sepia(70%);
}




h1 {
   font-size: 13pt;
   font-weight: 600;
   text-transform: uppercase;
   color: rgb(0, 0, 0);
   cursor: default;
}

h4 {
   font-size: 8pt;
   font-weight: 400;
   cursor: default;
}

h2 {
   font-size: 13pt;
   font-weight: 300;
   color: rgb(0, 0, 0);
   cursor: default;
}

@mixin unselectable() {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

@include unselectable();
.player {
   height: 180px;
   width: 420px;
   background-color: #edd49a84;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   
   ul {
      list-style: none;
      li {
         display: inline-block;
      }
   }
}

.cover {
   position: absolute;
   top: 0;
   left: 0;
   img {
      height: 100px;
   }
}

.info {

   h1 {
      margin-top: 15px;
      margin-left: 180px;
      line-height: 0;
   }

   h4 {
      margin-left: 180px;
      line-height: 20px;
      color: #000000;
   }

   h2 {
      margin-left: 180px;
   }
}

.button-items {
   margin-left: 180px;
}

#slider {
	width: 182px;
	height: 4px;
	background: #151518;
   border-radius: 2px;
   div {
      width: 4px;
      height: 4px;
      margin-top: 1px;
      background: #EF6DBC;
      border-radius: 2px;
   }
}

#timer {
   color: #494B4E;
   line-height: 0;
   font-size: 9pt;
   float: right;
   font-family: Arial, Sans-Serif;
}

.controls {
   margin-top: 20px;

   svg:nth-child(2) {
      margin-left: 5px;
      margin-right: 5px;
   }
}

#play {
   padding: 0 3px;
   width: 30px;
   height: 30px;
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;

   g {
      stroke: #FEFEFE;
      stroke-width: 1;
      stroke-miterlimit: 10;

      path {
         fill: #FEFEFE;
      }
   }
}

#play:hover {
   cursor: pointer;
   g {
      stroke: #8F4DA9;
      cursor: pointer;

      path {
         fill: #9b59b6;
         cursor: pointer;
      }
   }
}

.step-backward {
   width: 18px;
   height: 18px;
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;
   margin-bottom: 5px;

   g polygon {
      fill: #FEFEFE;
   }
}

.step-foreward {
   width: 18px;
   height: 18px;
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;
   margin-bottom: 5px;

   g polygon {
      fill: #FEFEFE;
   }
}

#pause {
   x: 0px;
   y: 0px;
   enable-background: new 0 0 25 25;
   width: 30px;
   height: 30px;
   position: absolute;
   margin-left: -38px;
   cursor: pointer;

   rect {
      fill: white;
   }
}

#pause:hover rect {
   fill: #8F4DA9;
}

.step-backward g polygon:hover, .step-foreward g polygon:hover {
   fill: #EF6DBC;
   cursor: pointer;
}

.expend {
   padding: 0.5px;
   cursor: pointer;
   
   svg:hover g polygon {
      fill: #EF6DBC;
   }
}