body {
  display: grid;
  grid-template-columns: [first] 160px [line2] 200px [line3] 625px [col4-start] 200px [line5] 160px [end];
  grid-template-rows: [row1-start] auto [row1-end] 600px [third-line] 20px [last-line];
  background-image: url("https://woolywilds.neocities.org/Site_Graphics/BGTiles/doqmeat_gridpurple.png");
  background-size: repeat;
  max-width: 100%;
  overflow-x: hidden;
    }
	
@font-face {
  font-family: 'DraftingMono';
  src: url(https://woolywilds.neocities.org/fonts/DraftingMono.ttf) format("truetype");
}

@font-face {
  font-family: 'DraftingMono';
  src: url(https://woolywilds.neocities.org/fonts/DraftingMono-Bold.ttf) format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/1za99g.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
 
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/z7csle.woff") format("woff");
  src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
	
.notepad {
 grid-column: line3 / col4-start;
 grid-row: row1-end / third-line;
 max-height: 100%;
 overflow-y: hidden;
 overflow-x: hidden;
}
	
.my_iframe{
    width: 622px;
    height: 595px;
	background-color: #BA9AD0;
	border: none;
}

.navbar {
	grid-column: line2 / line3;
	grid-row: row1-end / third-line;
	text-align: left;
	background-image: url('https://woolywilds.neocities.org/Site_Graphics/BGTiles/tumblr_purplesky.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 10px;
	padding: 10px;
	border-left: 10px solid #352143;
	border-radius: 5px;
	outline: none;
}

.navmessage {
	padding: 2px 2px 2px 10px;
	margin-right: 10px;
	margin-top: 20px;
	opacity: 80%;
	height: 35%;
	background-color: #5AE7EA;
	border-radius: 10px;
	font-size: 10px;
	font-family: DraftingMono, sans serif;
}

.header {
	grid-column: line3 / col4-start;
	grid-row: row1-start / row1-end;
	box-sizing: border-box;
	border: solid 4px #BA9AD0;
	width: 622px;
}

.homebutton {
 grid-column: first / line2;
 grid-row: row1-start / row1-end;
 justify-items: start;
}

.blogtitle {
  grid-column: first / span 2;
  grid-row: row1-start / row1-end;
  align-self: center;
}

.sidebar1 {
 grid-column: first / line2;
 grid-row: row1-end / last-line;
 overflow: none;
}

.sidebar1_bottom {
	grid-column: first / line2;
    grid-row: row1-end / last-line;
	overflow: none;
	align-self: end;
}

.sidebar2 {
 grid-column: col4-start / end;
 grid-row: row1-start / last-line;
 justify-items: center;
 overflow: none;
 position: relative;
}

.pagedoll {
   position: relative;
   top: 65px;
   left: 0;
   z-index: 1;
}
.tv {
   justify-items: end;
}


ul {
  list-style-image: url('https://woolywilds.neocities.org/Site_Graphics/with_credit/foollovers_tealsparkle.gif');
  list-style-type: circle;
  margin: 20px;
  padding: 0;
}

h3 {
	font-family: Pixelated MS Sans Serif, sans serif;
	color: #5AE7EA;
}

/*Div style for common links.*/
a:link {
  color: #5AE7EA;
  background-color: transparent;
  text-decoration: none;
  font-family: Pixelated MS Sans Serif, sans serif;
}
a:visited {
  color: #BA9AD0;
  background-color: transparent;
  text-decoration-line: underline;
  text-decoration-style: double;
}
a:hover {
  color: #5AE7EA;
  background-color: transparent;
  text-decoration-line: underline;
  text-decoration-style: double;
}
a:active {
  color: #F9F8F0;
  background-color: transparent;
  text-decoration: none;
}
	
/*Tooltip/Credit Pop Ups*/ 
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #5AE7EA;
  color: #352143;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  top: 50%;
  left: 100%;

/* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%; /* At the bottom of the tooltip */
  right: 100%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #5AE7EA transparent transparent;
}

/* Wave Font*/
.tealwave {
font-size: 3em;
font-weight: bold;
font-family: DraftingMono-Bold;

color: transparent;
background: url("https://woolywilds.neocities.org/Site_Graphics/with_credit/loveberry_wave_fortext_teal.png") repeat-x #fff;
background-clip: border-box;
background-size: 200% 100%;

background-clip: text;
-webkit-background-clip: text;
transition: background-position-y 0.6s ease;
-webkit-transition: background-position-y 0.6s ease;
animation: waveAnimation 4s infinite linear;
-webkit-animation: waveAnimation 4s infinite linear;

-webkit-animation-play-state: running;
animation-play-state: running;

/* below just adds the outlines */
filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white)
drop-shadow(1px 1px #BA9AD0) drop-shadow(-1px 1px #BA9AD0) drop-shadow(1px -1px #BA9AD0) drop-shadow(-1px -1px #BA9AD0);
}

@-webkit-keyframes waveAnimation{
from { background-position-x: 0%; }
to { background-position-x: 200%; }
}

@keyframes waveAnimation{
from { background-position-x: 0%; }
to { background-position-x: 200%; }
}

/* Tilting Font*/

.tilty {
text-align: center;
animation: tilt 1s infinite alternate;
animation-timing-function:ease-in-out;
}

@keyframes tilt {
from { transform: rotate(5deg); }
to { transform: rotate(-5deg); }
}

@-webkit-keyframes tilt {
from { transform: rotate(5deg); }
to { transform: rotate(-5deg); }
}

/* ===== Scrollbar CSS ===== */
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #8f54a0 #5ae7ea;
}

/* Works on Chrome, Edge, and Safari */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #5ae7ea; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #8f54a0;
  border-radius: 1px;
  border: 1px #5ae7ea;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #352143; 
}