/*   keyframes and animations */

@keyframes enter-right {
	0% {
		left:15%;
		opacity: 0;
	}
	70% {
		opacity: 1;
	}

	100%{
		left:0;
	}
}

.enter-right{
	position:relative;
	animation-name: enter-right;
    animation-duration: 1s;
    animation-iteration-count: 1;
}


@keyframes enter-left {
	0% {
		right:15%;
		opacity: 0;
	}
	70% {
		opacity: 1;
	}

	100%{
		right:0;
	}

}

.enter-left{
	position:relative;
	animation-name: enter-left;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.transparency{
	opacity: 0;
}

/*   Mobile & Tablet */


#main{
	margin:0.6em;
	padding:0.4em;
	border-radius:1em;
	background-color:#fc9957;
	font-size:xx-large;
	font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fc9957;
    line-height: 150%;
}

p{
	margin-bottom: 0;
}

header{
	font-family:"Rubik", sans-serif;
	text-align: center;
	font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	color: #a10661;
}

header ul{
	text-align: left;
	list-style-type: none;
}

ul li::before {
  content: "\27A1   ";
}


article{
	padding-bottom:0.5em;
	padding-right: 1em;
	padding-left: 1em;
	padding-top: 1em;
	border-radius:0.5em;
	width:85%;
	text-align: justify;
	margin-bottom: 1em;
}

footer{
	font-size: small;
	text-align: center;
	line-height: 2em;
}

.purple{
	background-color:#a10661;
}

.orange{
	background-color:#d53200;
}

.pink{
	background-color:#d063a4;
	color: white;
}

.white{
	background-color:white;
	color:#a10661;
	font-family:"Rubik", sans-serif;
	font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.right{
	margin-left:auto;
}

.center{
	width:auto;
	margin-bottom:0px;
}

.center img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

h1{
	font-family:"Edu AU VIC WA NT Hand", cursive;;
}


/* Large screens */


@media only screen and (min-width: 1130px) {

article{
	width:765px;
	margin-bottom: 0;
}


header ul{
	margin: auto;
	display: inline-block;
	padding: 1em;
}

.center{
 text-align: center;
 margin-left: 235px;
 margin-right: 235px;	
}

.center img{
  display: inline;
  margin-left: 0;
  margin-right: 0;
  width:auto;
}

@keyframes enter-right {
	0% {
		right:-15%;
		opacity: 0;
	}
	70% {
		opacity: 1;
	}

	100%{
		right:235px;
	}
}

@keyframes enter-left {
	0% {
		left:-15%;
		opacity: 0;
	}
	70% {
		opacity: 1;
	}

	100%{
		left:235px;
	}
}

.left{
	left:235px;
}

.right{
	right:235px;
}

.stack0{
	z-index:4;
}

.stack1{
	top:-2em;
	z-index:3;
}

.stack2{
	top:-3em;
	z-index:2;
}

.stack3{
	z-index:1;
}

}

/* very narrow screens */


@media only screen and (max-width: 600px) {

article{
	font-size:medium;
}

.center img{
  width: 60%;
}


}