img, h2, h3 {
	margin: 0;
}

body {
	background-color: #F0E7FC;
}

div#header {
	text-align: center;
}

div#header img{
	margin-top: 20px;
	width: 90%;
}

div#main {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	font-family: arial, helvetica, sans-serif; 
	color: #274a89;
}

div#main ul li {
	height: 10vw;
}

div#main ul li a {
	font-size: 4vw;
}

div#nav {
	/*width: 310px;*/
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

div#nav img {
	width: 24%;
}
audio#wordAudio {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

div.bigitem {
	width: 90vw;
	height: 45vh;
	position: relative;
	background-color: #E2CDFF;
	margin: auto;
}

img#wordImage {
	width: 90%;
	height: 90%;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	object-fit: contain;
}

h2#word {
	min-height: 7vw;
	font-size: 6vw;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

img.wordImageClass {
    max-width: 90%;
    max-height: 90%;
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

div.item {
	border: 1px solid #DABEFF;
	width: 28%;
	height: 20vw;
    display: inline-block;
    background-color: #E2CDFF;
    margin-right: 3%;
    margin-bottom: 15px;
    position: relative;
}