body {
    /* background: linear-gradient(0deg, rgba(6, 0, 128, 1) 0%, rgba(0, 42, 90, 1) 30%, rgba(75, 0, 128, 1) 100%); */
    background: linear-gradient(0deg, rgba(6, 0, 128, 0.6) 0%, rgba(0, 42, 90, 0.6) 30%, rgba(75, 0, 128, 0.6) 100%), url(./bytes.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    color: white;
    padding-bottom: 16px;
}

main {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
    top: 16px;
    padding: 16px 64px 32px 64px;
    border-radius: 16px;
    border: 2px solid #666;
    background: linear-gradient(180deg, rgba(0, 24, 72, 0.9) 0%, rgba(48, 0, 48, 0.9) 100%);
}

h1
{
    text-align: center;
    color: cyan;
    text-shadow: 4px 4px 2px purple;
    margin-top: 32px;
    margin-bottom: 0px;
}

h1::after
{
    content: ' ';
    display: block;
    border: 1px solid white;
    margin-top: 2px;
    margin-bottom: 8px;
}

h2
{
    text-align: center;
    color: orchid;
    text-shadow: 4px 4px 2px #404;
    margin-top: 32px;
    margin-bottom: 0px;
}

h2::after
{
    content: ' ';
    display: block;
    border: 1px solid #666;
    width: 300px;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
}

ul
{
    margin-top: 8px;
    margin-bottom: 16px;
    margin-left: 8px;
    padding: 0;
}

li
{
    display: block;
}

li.accepted::before
{
    content: "✓ ";
    color: #0f0;
    font-size: 16px;
    margin-right: 4px;
}

li.rejected::before
{
    content: "X ";
    color: red;
    font-size: 16px;
    margin-right: 4px;
}

li.considering::before
{
    content: "? ";
    color: #ff0;
    font-size: 16px;
    margin-right: 4px;
}

li.information::before {
    content: "🛈 ";
    color: #fff;
    font-size: 16px;
    margin-right: 4px;
}

ul.contacts {
    display: flex;
    flex-flow: row wrap;
}

ul.contacts > li {
    display: block;
    flex-grow: 1;
    margin-bottom: 8px;
    margin-left: 4px;
    margin-right: 4px;
}

li::before {
    content: "• ";
    font-size: 16pt;
}

p
{
    margin-top: 4px;
    margin-bottom: 16px;
}

a
{
    color: lightblue;
    text-shadow: 4px 4px 2px purple;
}

a:hover
{
    color: white;
}

small
{
    color: #999;
    font-size: 9pt;
}

small > a {
    color: rgb(115, 158, 172);
    text-shadow: 4px 4px 2px purple;
}

.contacts > li > small::before
{
    content: "\a";
    white-space: pre;
}

.copy::before
{
    content: "⎘";
}

.copy::after
{
    content: "Copy";
    font-size: 10pt;
    position: relative;
    top: -2px;
    left: 2px;
}

.copy
{
    color: #7f7;
    font-size: 14pt;
    text-decoration: none;
    user-select: none;
}

.copy:hover
{
    color: #cfc;
}

.center
{
    text-align: center;
}

.nowrap
{
    white-space: nowrap;
}

.imageflex
{
    display: flex;
    justify-content: center;
}

.imagefleximage
{
    width: 160px;
    height: 160px;
}

.aboutflex
{
    display: flex;
    flex-direction: row;
    position: relative;
}

.aboutname
{
    font-size: 48pt;
    color: white;
    text-shadow: 4px 4px 2px purple;
}

.aboutname > small
{
    font-size: 16pt;
    color: #999;
    text-shadow: 4px 4px 2px purple;
    display: inline-block;
    position: relative;
}

.aboutpronouns1
{
    color: #44f;
    font-size: 32pt;
    text-align: center;
    text-shadow: 4px 4px 2px purple;
}

.aboutpronouns1 > small
{
    font-size: 10pt;
    color: #999;
    display: inline-block;
    position: relative;
    text-align: center;
}

.aboutpronouns2
{
    color: rgb(185, 85, 143);
    font-size: 32pt;
    text-align: center;
    text-shadow: 4px 4px 2px purple;
}

.aboutpronouns2 > small
{
    font-size: 10pt;
    color: #999;
    display: inline-block;
    position: relative;
    text-align: center;
}

.aboutspecies
{
    color: #00f;
    font-size: 32pt;
    position: relative;
    text-align: center;
    text-shadow: 4px 4px 2px #404;
}

.aboutspecies > small
{
    font-size: 10pt;
    color: #999;
    display: inline-block;
    position: relative;
    text-align: center;
}

@media screen and (width < 448px) {
    .aboutpronouns1 > small
    {
        top: -16px;
        rotate: -8deg;
    }
}

@media screen and (width < 360px) {
    .aboutname
    {
        font-size: 40pt;
    }

    .aboutname > small
    {
        top: -40px;
        rotate: -6deg;
    }
}

@media screen and (width < 371px) {
    .aboutpronouns2 > small
    {
        top: -16px;
        rotate: -6deg;
    }
}

@media screen and (width < 600px) {
    main {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media screen and (width < 850px) {
    main {
        min-width: 304px;
        max-width: 450px;
    }

    li {
        margin-bottom: 8px;
    }

    .contacts > li {
        flex-basis: 100%;
    }

    .aboutlist > li > small::before {
        content: "\a";
        white-space: pre;
        white-space-collapse: preserve;
    }

    .imageflex
    {
        margin-top: 16px;
        flex-direction: column;
    }

    .imagefleximage
    {
        margin-left: auto;
        margin-right: auto;
        margin-top: 32px;
    }

    .aboutname
    {
        rotate: 4deg;
        text-align: center;
        display: block;
    }

    .aboutflex
    {
        top: -64px;
        margin-bottom: -72px;
    }

    .aboutpronouns1
    {
        rotate: 16deg;
        flex-grow: 1;
    }

    .aboutpronouns2
    {
        rotate: -4deg;
        flex-grow: 1;
    }

    .aboutspecies
    {
        top: 0px;
        rotate: 8deg;
        flex-grow: 1;
    }

    .aboutspecies > small
    {
        top: -24px;
        rotate: 6deg;
    }
}

@media screen and (width < 850px) and (width >= 448px) {
    .aboutpronouns1 > small
    {
        top: -32px;
        rotate: -8deg;
    }
}

@media screen and (width < 850px) and (width >= 360px) {
    .aboutname > small
    {
        top: -48px;
        rotate: -8deg;
    }
}

@media screen and (width < 850px) and (width >= 371px) {
    .aboutpronouns2 > small
    {
        top: -32px;
        rotate: -6deg;
    }
}

@media screen and (width >= 850px) {
    main {
        width: 700px;
    }

    .contacts > li {
        flex-basis: 40%;
    }

    .imageflex
    {
        margin-top: 16px;
    }

    .imagefleximage
    {
        margin-left: 4px;
        margin-right: 16px;
        margin-top: 32px;
    }

    .imageflexcontent
    {
        margin-top: 32px;
    }

    .aboutflex
    {
        top: -16px;
        margin-bottom: -32px;
    }

    .aboutname
    {
        rotate: 4deg;
    }

    .aboutname > small
    {
        top: -32px;
        rotate: -16deg;
    }

    .aboutpronouns1
    {
        rotate: 16deg;
        flex-grow: 1;
    }

    .aboutpronouns1 > small
    {
        top: -32px;
        rotate: -8deg;
    }

    .aboutpronouns2
    {
        rotate: -4deg;
        flex-grow: 1;
    }

    .aboutpronouns2 > small
    {
        top: -32px;
        rotate: -6deg;
    }

    .aboutspecies
    {
        rotate: 24deg;
        flex-grow: 1;
    }

    .aboutspecies > small
    {
        top: -32px;
        rotate: -4deg;
    }
}