@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
	font-family: "PT Sans", sans-serif;
	font-size: 20px;
	color: #222;
	word-break: word-break;
	word-break: auto-phrase;
	width: 100vw;
	height: 100vh;
	margin: 0;
	line-height: 150%;
	overflow: hidden;
	position: relative;
}

div.container {
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg,rgba(186, 216, 219, 1) 0%, rgba(234, 245, 255, 1) 100%);
	background-repeat: no-repeat;
	display: grid;
	place-content: center;
	justify-items: center;
	align-content: center;
	text-align: center;
 	perspective: 800px;
}

div.container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  pointer-events: none;
  mix-blend-mode: darken;
}

div.container img {
	max-height: 300px;
	max-width: calc(100% - 2rem);
	position: relative;
	left: 1rem;
	transition: transform 0.2s ease-out;
  	animation: float 6.8s ease-in-out infinite;
}

div.container h1 {
	color: #032D51;
	text-transform: uppercase;
	font-size: 2.5rem;
	padding: 0 1.5rem;
	font-weight: 700;
	line-height: 120%;
}

div.container p {
	padding: 0 1.5rem;
	margin: 0 auto 0.5rem;
}

@keyframes float {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(4px, -6px); }
  33%  { transform: translate(-3px, -10px); }
  52%  { transform: translate(6px, -4px); }
  71%  { transform: translate(-5px, 2px); }
  89%  { transform: translate(2px, -3px); }
  100% { transform: translate(0, 0); }
}