@font-face {
font-family: 'main';
src: url('https://files.catbox.moe/n7f1m8.ttf');}


html{
background: url(https://snarlingteeth.neocities.org/assets/backgrounds/river2.jpg);
background-size: cover;
background-attachment: fixed;
image-rendering: pixelated;
padding: 30px;
margin:auto;
font-family: ms ui gothic;
font-size: 14px;
cursor: url(https://www.cursor.cc/cursor/775/229/cursor.png), auto;
line-height: 15px;
overflow-x: hidden;
}
  
.layout {
position: relative;
margin: auto;
width: 77rem;
display: grid;
grid:
"header header" 100px
"sidebar body"
/ 1fr 4fr;
gap: 20px;
}

.header, .sidebar, .body {
background: url(https://snarlingteeth.neocities.org/assets/backgrounds/rocks.jpg);
padding: 15px;
Border: double #262920 5px;
background-attachment: local;
}

.header {
grid-area: header; 
text-align: right; 
display: inline-block; 
background: url(https://64.media.tumblr.com/155a75b3b2477a7937ec3082db2507f1/tumblr_pmvoexPi9i1wj3plno1_1280.jpg);
background-position: center;
background-size: cover;
border-color: #151A0E
}

.sidebar { grid-area: sidebar; height: 40rem; border-radius: 0px 0px 100px 100px; overflow-y: scroll; overflow-x: hidden; scrollbar-width:none;}

.body {grid-area: body; height: 925px}
  
.disc {
-webkit-animation:spin 3s linear infinite;
-moz-animation:spin 3s linear infinite;
animation:spin 3s linear infinite;
position:absolute;
top: -1%;  
right: -12%; 
z-index: -99;
z-index: -5;
text-align:right;
}

@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
.decor {
position: absolute;
width: 100px;
left: -7px;
top: -10px;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, -10px); }
100% { transform: translate(0, -0px); }
}


.title{margin-top: -10px; filter: drop-shadow(2px 0px 0px #35421e) drop-shadow(0px 2px 0px #35421e) drop-shadow(-2px 0px 0px #35421e) drop-shadow(0px -2px 0px #35421e);}

s{opacity: 40%}

.webamp{height: 350px; border: none}


.heading{
font-family: georgia;
font-variant: small-caps;
font-weight: bold;
font-size: 30px;
text-shadow: 0px 0px 2px black;
color: white;
background: rgba(77, 39, 27, .3);
border-bottom: 7px double rgba(77, 39, 27, .7);
}


button{
border: solid 1px #363A22;
filter: drop-shadow(2px 2px 0px #363A22);
border-radius: 0px;
text-align: left;
padding: 2px 2px 2px 8px;
margin-bottom: 5px;
width: 100%;
font-size: 12px;
background: #ABB5A4;
color: #363A22;
font-family: ms ui gothic;
font-weight: bold;
}

button:hover{background: #62683F; color: #A8B073; transition: .3s}

button i{margin-right: 1px}

.pfp{background: radial-gradient(#62683F, #363A22);border-radius: 100%; width: 140px; margin-left: 15px; image-rendering: auto; margin-bottom: 10px}

.row{display:flex;flex-wrap:wrap;}

.col{flex:0 0 auto;max-width:100%;width:auto}

a{color: #7F8654; text-decoration: underline wavy; text-decoration-skip-ink: none; text-shadow: 0px 0px 3px #7F865470; font-weight: bold;}
a:hover{color: #62683F; text-shadow: 0px 0px 3px #62683F70}

textarea{background: #62683F; border: 2px solid #858B59; font-family: ms ui gothic; color:#A8B073; scrollbar-width: none;}

.guestbook:hover, .wolf:hover{transform:scale(1.05); transition:1s ease; overflow:hidden;}

.textbox{
padding: 0px 8px 0px 8px;
background: url(https://snarlingteeth.neocities.org/assets/backgrounds/yarn.png); 
color: #363A22;
overflow-y: auto;
overflow-x: hidden;
background-attachment: local;

}

.innertext{border-left: 3px dashed #363A2260; padding: 8px; margin: 0px}

.textbox2{background: #62683F; border: 2px solid #858B59; padding: 10px; text-shadow: 0px 0px 3px #A8B07350; color:#A8B073; margin-top: 15px;}

#s-m-t-tooltip{
max-width: 300px;
z-index: 10;
margin: 24px 14px 7px 12px;
padding:8px;
border-radius:3px;
background: black;
border:1px solid #515559;
color: white;
font-size:12px;
letter-spacing: 1px
}