:root
{
--shadow: #3067;
}

html
  {
    background-color: mediumpurple;
    height: 3000px;
  }

#page
  {
    font-family:"Bubblegum Sans";
		font-size:1.25rem;
    background-color:plum;
    padding:20pt;
    border-radius:20pt;
    border: solid indigo 8pt;
    margin:20pt;
    box-shadow:6pt 6pt 10pt var(--shadow);
  }

#intro, #credits
{
  background-color:white;
  padding: 16pt;
  border:dashed;
  margin:4pt;
  border-radius:10pt;
  box-shadow:6pt 6pt 10pt var(--shadow);
}

hr
  {
    background-color:indigo;
  }

h1
  {
    background-color:white;
    padding: 16pt;
    border:dashed;
    position:sticky;
    top:16px;
    margin: 0px 4pt;
    border-radius:10pt;
    box-shadow:6pt 6pt 10pt var(--shadow);
  }

img
  {
    display:block;
    margin-left:auto;
    margin-right:auto;
  }

.title
	{
    text-align:center;
    font-weight:bold;
	}

.container
  {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
  }

.card
	{
    display:flex;
    flex-flow: column wrap;
    border:black solid 3pt;
    background-color:white;
    border-radius:6pt;
    width:100%;
		max-width: 300px;
    padding:6pt 18pt;
    margin: 12px 6px;
    justify-content: center;
    align-items:center;
    box-shadow:6pt 6pt 10pt var(--shadow);
	}

@media (min-width:576px)
{
  .card
  {
    max-width: 300px;
  }
}

@media (min-width:768px)
{
  .card
  {
    max-width: 300px;
  }
}

.image
	{
    display:flex;
    border:white solid .65em;
    background-color: #AEA98F;
    margin:16px;
    padding:6px;
    box-shadow:3pt 3pt 10pt var(--shadow);
    width:75%;
    max-width:300px;
    justify-content: center;
    align-items:center;
	}