body {
background: #39317f;
color: #fff;
font-family: CharisSIL;
font-size: 20px;
letter-spacing: 2px;
padding: 10px;
}

img {
	width: 60%;
}

.txt {
	padding: 1% 20% 1% 20%;
	word-wrap: break-word;
}

.link {
text-align: center;
padding: 20px;
border: 3px solid #7c6cc4;
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}


@font-face {
  font-family: CharisSIL;
  src: url(charissil-regular.ttf);
}

p.qa {
	background: white;
	color: #39317f;
	padding: 5px 5px 5px 10px;
}
			

a {
text-decoration: underline;
color: #b1ffff;
transition: color 0.8s;
}

a.link:hover {
text-decoration: none;
color: #39317f;
background: #7c6cc4;
}

a.link {
text-decoration: none!important;
}


.linkblock {
text-align: center;
text-decoration: none!important;
color: #39317f;
font-weight: bold;
background: #fff;
padding: 20px;
border: 3px solid white;
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}


.animate-top{position:relative;animation:animatetop 1.2s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}
}


.opacity{animation:opac 2.2s}@keyframes opac{from{opacity:0} to{opacity:1}
}


/* ------- Smaller screens ------- */

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

body {
font-size: 17px;
letter-spacing: 2px;
padding: 6px;
}

	
img {
	width: 99%;
}

.txt {
	padding: 1% 10% 1% 10%;
	word-wrap: break-word;
}
}