@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');


.container-fluid{
	margin: 0 auto;
	align-content: center;
}
.img-fluid{
	margin: 0 auto;
	box-shadow: 10px 10px 10px rgb(73,64,64);
}
.textbox{
	width: 80%;
	text-align: center;
	font-size: 3.5vh;
	margin: 20px;
	padding: 10px;
	background: rgba(255,255,255,0.9);
	box-shadow: 10px 10px 10px rgba(73,64,64);
}
.textbox li{
	font-family: 'EB Garamond', serif;
	text-align: left;
	margin-left: 20px;
}
.title1{
	font-family: 'EB Garamond', serif;
	color: darkblue;
	font-size: 6vh;
	opacity: 0;
	transform: translateY(20px);
	transition: 1s all ease-in-out;
}
p{
	font-family: 'EB Garamond', serif;

}
.title2{
	font-family: 'EB Garamond', serif;
	color: darkred;
	font-size: 40px;
	opacity: 0;
	transform: translateY(20px);
	transition: 1s all ease-in-out;
}

.title-appear{
	opacity: 1;
	transform: translateY(0px);
}


@media(max-height: 500px){
	.navbar{	
		display: none;
	}
	.textbox{
		width: 100%;
		margin: 0px;
	}
	.textbox li{
	text-align: left;
	margin-left: 0px;
}
}
.kiemelt{
	font-family: 'EB Garamond', serif;
  margin:1vw 1vw 0px 1vw;
  font-size: 1.5rem;
  font-weight: bold;
}

.listatitle1{
	max-width: 750px;
	left: 0px;
	font-size: 20px;
	color: white;	
	padding: 8px;
	background-image: linear-gradient(to right, blue , darkblue);
	border-radius: 10px;
	text-align: center;
	position: relative;
	animation-name: t2;
	animation-duration: 2s;
	margin: 20px;
}
@keyframes t2{
	0% {left: -550px}
	100% {left: 0px;}
}
.listatitle2{
	max-width: 750px;
	left: 0px;
	font-size: 20px;
	color: white;
	font-family: georgia;	
	padding: 8px;
	background-image: linear-gradient(to right, red , darkred);
	border-radius: 10px;
	text-align: center;
	position: relative;
	animation-name: t2;
	animation-duration: 3s;
	margin: 20px;
}
@keyframes t2{
	0% {left: -550px}
	100% {left: 0px;}
}