@font-face
{
  font-family: "Asap";
  src: url(font/Asap-Italic.ttf) format("truetype");
}

*
{
    box-sizing: border-box;
}

body
{
    padding: 0;
    font-family: 'Asap', sans-serif;
}

div.mainContent
{
    position: absolute;
    min-width: 90%;
	padding-right:5%;
	padding-left: 1%;
    left: 5%;
	margin-right: 5%;
    bottom: 5%;
	
	background: rgba(255, 255, 255, 0.35);
	border-radius: 25px;
	
	display: flex;
	flex-flow:column;
}

a
{
    color: #000000;
}

.textContainer
{
    height: 100%;
    flex: 1 1 auto;
	
	display:flex;
	flex-flow:column;
}

canvas
{
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-right: auto;
    margin-top:0;
    margin-bottom:auto;
    position: absolute;
    top: 0;
    left:  0;
    z-index: -1;
}

h1
{
    font-size: 5.5vmin;
    padding:  0;
    margin: 2.5%;
	margin-bottom: 0;
}

p
{
    font-size: 3vmin;
    padding:  0;
	margin: 2.5%;
}

.slideIn
{
	animation: 1s cubic-bezier(0.5,0.0,0.25,1.5) both anim-slide-in;
}

.footer
{
    position: absolute;
    width: 90%;
    align-content: center;
    bottom: 1%;
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 8pt;
}

@keyframes anim-slide-in
{
	from{opacity:0; transform:translateX(-5%);}
	to	{opacity:1; transform:translate(0);}
}

/* wider screens*/
@media only screen and (min-width: 768px)
{
    div.mainContent
    {
        position: absolute;
        left: 20%;
		min-width:0;
		top:20%;
		bottom:unset;
    }

    /*p
    {
        font-size: 2.5vh;
    }*/
}