body{
	background-image: url(../res/websitekitty.gif);
	background-size: 70vh;
	background-repeat: no-repeat;
	background-position: bottom 1em right 3em;
	height:100vh;
	padding:0;
	margin: 0;
}

nav.main{
	position:fixed;

	top:calc(50% - 0em);
	transform: translateY(-50%) rotateZ(-7.5deg);

	left:-10em;

	width: 20em;

	display: flex;
	flex-direction: column;
	
	font-size: 3rem;
	font-family: 'CAT North', sans-serif;
	font-weight: 800;
}
nav.main > a{
	position:relative;
	display:block;
	padding:.1ch 1ch;

	border:.5ch solid var(--indigo-dark);
	border-radius:999em;
	

	text-align: right;
	text-decoration: none;
	background-color:#fff;
	left:0;
	transition:left 0.2s;
	box-shadow: 0 0 0 .15em #fff;

}
nav.main > a::before{
	content: " ";
	position: absolute;
	z-index: -1;
	top:	.1em;
	left:	.1em;
	right: .1em;
	bottom: 5px;
	border: 5px solid #ffea00;
}
nav.main > a:hover, nav.main > a:active, nav.main > a:focus{
	left:5em;
}

/* MARQUEE */

.marquee{
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  background-color: var(--magenta-light);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

footer{
	position: absolute;
	bottom: 2em;
	display: flex;
	max-width: 40vw;
	flex-direction: row;
}
footer a{
	padding: .25em;
	margin: .25em;
	flex: 0 0 5.5em;
	width: 5.5em;
	text-align: center;	
}
footer img{
	display: inline-block;
	max-height: 4em;
	/*lets make a bad outline filter!*/
	filter: 
		drop-shadow(var(--off-white) -.1em -.1em)
		drop-shadow(var(--off-white) .1em -.1em)
		drop-shadow(var(--off-white) .1em .1em)
		drop-shadow(var(--off-white) -.1em .1em)
}

a:link		{	color:var(--magenta-dark) ;}
a:visited	{	color:var(--magenta-dark);}
a:hover		{	color:var(--magenta-mid) ;}
a:active	{	color:var(--magenta-mid) ;}

@media (height <= 625px),(orientation: portrait) {
	nav.main{
		transform:translateY(-50%) rotateZ(-7.5deg);
		top:9.75em;
		font-size: 2rem;
		width: 13.5em;
		left:-5.5em;
	}
	nav.main a{
		white-space: nowrap;
	}
	nav.main > a:hover, nav.main > a:active, nav.main > a:focus{
		left:0;
	}
	body{
		background-size: 80vmin;
		background-position: bottom 3em center;
	}
	footer{
		flex-direction: column;
		right:0;
		top:4em;
	}
	footer a{
		max-height: 4em;
	}
	footer img{
		max-height: 3em;
	}
}
/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  body{
	background-image: url(../res/goodnightkitty.png);
  }
  .marquee * {
    animation-iteration-count: 1;
    animation-duration: 0.01; 
    /* instead of animation: none, so an animationend event is 
     * still available, if previously attached.
     */
    width: auto;
    padding-left: 0;
  }
}