.card {
font-family: arial;
margin: auto;
text-align: center;
background-size:cover;
background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-037.jpg?fbclid=IwAR2e7ne-_NwIq_Ea_NUsHy9UEbKg_EjeKwWBxMBlG6uNJnhovIwntEk-XQs");
height: 100vh;
overflow:auto;
}

.container{
width: 425px;
height: 510px;
background-color: #f3f3f3;
margin: 9% auto auto auto;
box-shadow: 1px 1px 10px 2px #737373;
}

img{
width:425px;
height: 250px;
}

.answer {
margin: 22px auto auto auto;
font-weight: bold;
color: #26a6e6;
font-size: 38px;
padding-top: 10px;
}

.english{
width:425px;
height: 290px;
font-size: 25px;
background-color: #26a6e6;
color: white;
font-weight: bold;
}

.example{
font-size: 20px;
margin-right: 50px;
margin-left: 50px;
padding-top: 35px;
padding-bottom: 30px;
}




@media only screen and (max-width : 767px) {
	.container{
		width: 80%;
		height: 90%;
	}

	.english{
		width: 100%;
		height: 90%;
		font-size: 20px;
		padding-bottom: 2px;
	}

	.example{
		color: black;
	}

	img{
		width: 100%;
		height: 60%;
	}

	.recording{
		display:none;
	}

	.answer{
		font-size: 35px;
	}
}