body
{
	background-color: #1d1919; 
	font-size: 150%;
	font-family: "Asap","Calibri", "Arial";
    color: #fff1f1;
    animation-name: HG;
    animation-duration: 20s;
    animation-iteration-count: infinite
}

.cs
{   

    position: absolute;
    top: 38%;
    left:12%;
    margin: 0;
    width: 75%;
    /*border: 3px solid red;*/
}

.cs h1, .cs h2, .cs form
{
    display: flex;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200%;
    /*border: 3px solid green;*/
}

@keyframes HG
{
    0% {background-color: #1d1919;}
    10% {background-color: #7a2d74;}
    30% {background-color: #471bd6;}
    50% {background-color: #1b7cd6;}
    70% {background-color: #31ccb2;}
    90% {background-color: #305750;}
    100% {background-color: #1d1919;}
}

h1
{
    text-align: center;
	font-weight: bold;
    font-family: "Asap","Calibri","Arial";
    font-size: 300%;
    color: #e7dbdb;
}

h2
{
    font-size: 100%;
    position: sticky;
    bottom: 0;
    text-align: left;
}

p
{
    line-height: 150%;
}

a:link
{
    font-style: italic;
    text-decoration: none;
    font-weight: bolder;
    color: #adadad
}

a:visited
{
    color: #9e9393;
}

a:hover
{
    color: #726868;
    font-size: 105%;
    transition: font-size 100ms ease-in;
}

a, img
{
    transition: 100ms ease-out
}

img
{
    width: 30%;
    height: auto
}

img:hover
{
    width: 32%;
    height: auto;
    opacity: 75%;
    transition: 100ms ease-in; 
}


input[type=submit]{
    background-color: transparent;
    border-style:solid;
    border-color: white;
    border-width: 4px;
    color: #fff1f1;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    font-family: "Asap","Calibri", "Arial";
    font-weight: bold;
    font-size: 300%;
    cursor: pointer;
  }