body 
{
	background: #093F71;
	color: #F8E1DD;
	display:flex; flex-direction:column; justify-content:center;
	font-family: Gothic,system-ui;
	font-size: 100%;
	font-weight: 300;
	line-height: 133%;
	text-align: center;
	
}

.card 
{
  padding: 24px;
  border-radius: 12px;
  background: #093F71;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(16px);
  animation: fade-in-up 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fade-in-up {
  to 
  {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card 
  {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

<!-- -->
.list 
{
  list-style: none;
  padding: 0;
  margin: auto;
  width: 280px;
}

.item 
{
	animation: fade-in-up 350ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	background: #08345E;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	opacity: 0;
	transform: translateY(12px);
}

@keyframes fade-in-up 
{
  to 
  {
    opacity: 1;
    transform: translateY(0);
  }
}

.item:nth-child(1) { animation-delay: 90ms; }
.item:nth-child(2) { animation-delay: 150ms; }
.item:nth-child(3) { animation-delay: 210ms; }
.item:nth-child(4) { animation-delay: 270ms; }
.item:nth-child(5) { animation-delay: 330ms; }

@media (prefers-reduced-motion: reduce) 
{
  .item 
  {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

header
{
	text-align: center;
	border-style: inset;
}

h1
{
	padding-left: 0px;
	text-shadow: .05em .05em .04em black;
}

h2
{
	text-shadow: .05em .05em .04em black;
}

a:active 
{
	color: white;
}
a:link
{
	color: #F8E1DD;
	text-decoration: none;
}
a:visited 
{
	
	color: white;
}
a:hover 
{
	color: lightblue;
}

ul.topnav 
{
	border-bottom: 1px solid #555;
	border-style: outset;
	list-style: none; 
	margin: 0 15%;
	padding: 0;
	text-align: center;
	text-shadow: .04em .04em .03em black;
}
ul.topnav li 
{
	display: inline;
	padding: .25em .5em;
	margin: 2em;
}

ul.topnav a
{
	color: #F8E1DD;
	text-decoration: none;
}

ul.topnav a:hover {color: lightblue;}

figure.selfie 
{
	background-color: #F8E1DD;
	border-style: outset;
	margin: auto;
	width: 200px;
	
}

figure.selfie img 
{
	width: 200px;
}

figcaption
{
	text-align: center;
}

footer
{
	border-style: inset;
	text-shadow: .05em .05em .04em black;
}