html, 
body {
  height: 100%;
  margin: 0;
}

body {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
  background: linear-gradient(-45deg, #52c3ee, #e45fb5, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 20s ease infinite;
}

.logo-block {
	text-align: center;
	width: 90%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.logo {
	max-width: 100%;
}

.page-container {
	max-width: 1200px;
	padding: 30px 15px;
	margin: 0 auto;
}

.page-container .logo {
	max-width: 260px;
	margin: 0 auto 40px auto;
	display: block;
}

.page-container .page-content {
	padding: 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.6);
}

.jagged-box {
  display:inline-block;
  aspect-ratio:1;
  background:linear-gradient(135deg,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
  --m:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 51% repeat-x,
    conic-gradient(from 135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) top   /20px 51% repeat-x;
  -webkit-mask: var(--m);
          mask: var(--m);
}

.headline {
	font-size: 22px;
}

.contact {
	font-weight: 700;
	text-transform: uppercase;
}

.contact a {
	text-decoration: none;
	display: inline-block;
	color: #fff;
  padding: 10px 20px;
  background: black;
}

.contact a:hover {
	background: #e13527;
}

@media only screen and (min-width: 768px) {
	.logo-block {
		padding: 100px 0;
		width: 100%;
	}

	.headline {
    font-size: 32px;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}