:root {
	--offblack: rgb(33, 33, 35);
	--skybg: linear-gradient(#f5a2cd, #f2c5b8, #fcede6, #fcf6f0);
  --horizonbg: linear-gradient(
    #f5a2cd,
    #f2c5b8,
    #fcede6,
    #fcf6f0,
    #fcfcf7,
    #FFFFFF
  );
  --grassbg: linear-gradient(
      341deg,
      rgba(102, 161, 255, 0.281) 65%,
      rgba(240, 239, 244, 0.15) 85%,
      rgba(244, 214, 104, 0.15) 100%
    ),;
  --mainbody: #fcffe9;
  --accent: rgb(0, 136, 255);
  --shadow-color: 0deg 30% 52%;
  --drop-shadow: 0.7px 1px 1.4px hsl(var(--shadow-color) / 0.2),
    1.1px 1.8px 2.5px -1.1px hsl(var(--shadow-color) / 0.24),
    2.8px 4.3px 6px -2.1px hsl(var(--shadow-color) / 0.28);
  --overlay: #fbffe95c;
  --cloudBg: rgb(240, 254, 255);
  --cloudUpGrad: rgb(255, 253, 246);
  --cloudBotGrad: rgb(155, 208, 255);
  --cloudShadow: #61b0ff75;
}
body {
  background-color: #9e5d3d;
  background-image: var(--horizonbg);
  background-attachment: fixed;
  font-family: "MS UI Gothic", sans-serif;
  font-size: 0.9em;
  letter-spacing: 1px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--offblack);
}


* {
	scrollbar-width: thin;
	box-sizing: border-box
}

a:link {
	text-decoration: none
}

.cloudBubble {
	width: 100%;
	height: min-content;
	position: relative
}

.cloudBubble div:first-child {
	position: absolute;
	z-index: -1;
	background-color: var(--cloudBg);
	background-image: radial-gradient(circle at 0 -40%, var(--cloudUpGrad), 50%, var(--cloudBg) 60%, 90%, var(--cloudBotGrad));
	border: 1px solid #fff;
	border-radius: 25%;
	box-shadow: 0 -1px 10px var(--cloudBg) inset, 0 -20px 20px var(--cloudShadow) inset, 0 0 5px 3px var(--cloudBotGrad);
	width: 100%;
	height: 100%;
	filter: url(https://xodollynailz.neocities.org/templates/https://xodollynailz.neocities.org/templates/#goo)
}

.cloudContent {
	display: block;
	text-align: center;
	color: #61b0ff;
	font-family: Nunito;
	font-weight: 700;
	line-height: 110%;
	margin: 5px
}

.cloudBubble>a {
	display: block;
	text-align: center;
	color: #427afd;
	text-shadow: 0 0 5px #fff, 1px 1px 8px var(--cloudShadow);
	font-family: Nunito;
	font-weight: 1000;
	margin: 5px
}

.cloudText {
	display: flex;
	width: min-content;
	z-index: 10
}

.cloudText div {
	margin-right: -.1em;
	background-color: var(--cloudBg);
	background-image: radial-gradient(circle at 50% 0, var(--cloudUpGrad), 50%, var(--cloudBg) 60%, 70%, var(--cloudBotGrad));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #fff;
	filter: url(#goo)
}

@keyframes floatAcross {
	0% {
		transform: translateX(100vw)
	}

	100% {
		transform: translateX(-10vw)
	}
}

@keyframes squish {
	0% {
		transform: scale(1, 1)
	}

	40% {
		transform: scale(.95, 1.05)
	}

	90% {
		transform: scale(1.05, 1)
	}

	100% {
		transform: scale(1, 1)
	}
}

.vertCentre {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.centreImg {
	display: block;
	margin-left: auto;
	margin-right: auto
}

.justifyText {
	text-align: justify
}

.centreText {
	text-align: center
}

.smallerText {
	font-size: smaller
}

.span2 {
	grid-column: span 2
}

.textFluffy {
	color: #95cdff;
	text-shadow: var(--cloudBg) 0 0 5px;
	font-family: Porkys;
	font-size: 3cqw;
	letter-spacing: 5px
}

@font-face {
	font-family: Adelia;
	src: url(/fonts/ADELIA.woff) format("woff"), url(/fonts/ADELIA.woff2) format("woff2")
}

@font-face {
	font-family: Porkys;
	src: url(/fonts/PORKYS_.woff) format("woff"),
}