:root {
  --body-color: black;
  --head-color: MediumVioletRed;
  --link-color: DarkGreen;
  --bg-image: url('https://lycheecreature.neocities.org/asa/world/src/bg_gifs/dreamy2.gif'), none;
  --img-border: 5px dotted DeepSkyBlue;
  --img-outline: 5px solid none;
 
}

body
{
	padding: 5%;
	margin: none;
	background-image: var(--bg-image);
	font-family: Gelasio;
	font-size: clamp(14px, 18px, 24px);
	color: var(--body-color, white);
	overflow-x: hidden;
	background-attachment: fixed;
	
}

h1, .line, .multigif
{
	font-family: Grenze Gotisch;
	font-size: 5rem;
	justify-content: space-around;
	align-items: center;
	display:  flex;
	margin: auto;
	color: var(--head-color, white);

}

.multigif{
	margin-top: 40px;
	margin-bottom: 40px;
	justify-content: center;
}

h2
{
	font-family: Grenze Gotisch;
	font-size: 36px;
	color: var(--head-color, white);
}

#content
{
	margin: 20px;
}

a, a:visited
{
	color: var(--link-color, white);
}

.drawing, .fig, #back
{
	justify-content: space-around;
	align-items: center;
	display:  flex;
	margin: auto;
	margin-top: 40px;
}

.drawing
{
	width: 40vw;
	height: auto;
	border: var(--img-border);
	outline: var(--img-outline);
}

.fig
{
	font-size: clamp(14px, 18px, 18px);
	margin-top: 10px;
	color: var(--link-color, white);
}

.orb
{
	width: 60px;
	height: auto;
	justify-content: space-around;
	align-items: center;
	margin: auto;
		margin-top: 40px;
}
.orb:hover
{
	width: 70px;
	height: auto;
}
#orbs
{
	display: grid;
	columns: 2;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	color: white;
	

}

#obelisks
{
	width: 70vw;
}

li
{
	margin: 10px;
}

ul{
	margin: 10px;
}

h3
{
	font-family: Grenze Gotisch;
	font-size: 36px;
	justify-content: space-around;
	align-items: center;
	display:  flex;
	margin: auto;
	color: var(--head-color, white);
}

.symbol
{
	height: 125px;
	width: auto;
	padding: clamp(5px, 20px, 30px);
}

.blurb
{
	font-size: 24px;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 2%;
}

.sigil
{
	justify-content: space-around;
	align-items: center;
	display:  flex;
	margin: auto;
	width: 350px;
	height: auto;
	animation: rotate 10s linear infinite;
	
	
}


  @keyframes rotate {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

 @media (pointer:none), (orientation:portrait), (max-width: 2200) {
	h3
	{
		font-size: 28px;
	}
	
	.symbol
	{
		width: 80px;
		height: auto;
		padding: 10px;
	}
	
	.drawing
	{
		width: 70vw;
	}
}