html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	background-color: #f8f8f8;
	color: #333333;
	position: absolute;
	padding-bottom: 5em;
}

:root {
	font-size: xx-small;
}

nav > ul {
	flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* font-size: xxx-large; */
	background: url(assets/kuberkon-background.svg) center 4vh no-repeat;
	background-color: rgb(51,51,51);
	color: #f8f8f8;
	color-scheme: only light;
	position: relative;
}

.service-container {
	width: 100%;
    height: 160px;
}

.service-text {
	font-size: 1.5em;
}

@media screen and (min-width: 320px) {
	:root {
		font-size: x-small;
	}
}

@media screen and (min-width: 375px) {
	:root {
		font-size: small;
	}
	nav > ul {
		flex-direction: row;
	}
	header {
		background: url(assets/kuberkon-background.svg) 50vw 4vh no-repeat;
		background-color: rgb(51,51,51);
		color: #f8f8f8;
	}
	.service-container {
		width: 50%;
	}
}

@media screen and (min-width: 425px) {
	:root {
		font-size: medium;
	}

	.service-text {
		font-size: 1.17em;
	}
}

@media screen and (min-width: 768px) {
	:root {
		font-size: large;
	}
	.service-container {
		width: 33.33333333333%;
	}
}

@media screen and (min-width: 1024px) {
	:root {
		font-size: x-large;
	}
	.service-container {
		width: 25%;
	}
	.service-text {
		font-size: 1em;
	}
}

@media screen and (min-width: 1440px) {
	:root {
		font-size: x-large;
	}
	.service-container {
		width: 20%;
	}
}

@media screen and (min-width: 2560px) {
	:root {
		font-size: x-large;
	}
	.service-container {
		width: 16.666666666666666666666666666667%;
	}
}


header > * {
    display: flex;
    flex-direction: row;
    align-items: center;
}

header svg.logo {
	height: 2em;
	width: 2em;
	margin: 1em;
	fill: #f8f8f8;
	color-scheme: only light;
}

header > nav > ul {
	list-style: none;
	padding-inline-start: 0;
}

header > nav > ul > li {
    height: 3em;
}

header nav > ul > li > a {
	border-radius: 0.5em;
	border-width: 1px;
	border-style: solid;
	background: transparent;
    border-color: white;
	border: none;
    font-size: 1em;
    font-family: unset;
	color: white;
	padding: 0.5em;
	font-weight: 500;
	letter-spacing: 0px;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	user-select: none;
	vertical-align: -webkit-baseline-middle;
	font-kerning: none;
	/* margin: 2em; */
}

header nav > ul > li > a:hover, header nav > ul > li.active > a {
	color: #111111;
	background-color: white;
}

h1 {
	text-transform: uppercase;
}

header div.subtitle {
	padding-left: 4em;
}

header div.subtitle > p {
	/* margin-block-start: 0; */
	width: 100%;
}

.word::before {
	content: ' ';
	position: absolute;
	opacity: 0;
	margin-left: 0.3em;
	transform: translateY(1em); /* Initial position below resting position */
	animation: newWord 30s infinite;
}

@keyframes newWord {
	0% {
		content: 'Angular';
		opacity: 0;
		transform: translateY(1em);
	}
	2.66%,4% {
		content: 'Angular';
		opacity: 1;
		transform: translateY(0);
	}
	6.66% {
		content: 'Angular';
		opacity: 0;
		transform: translateY(-1em);
	}
	6.67% {
		content: 'AWS';
		opacity: 0;
		transform: translateY(1em);
	}
	9.32%,10.66% {
		content: 'AWS';
		opacity: 1;
		transform: translateY(0);
	}
	13.32% {
		content: 'AWS';
		opacity: 0;
		transform: translateY(-1em);
	}
	13.33% {
		content: 'Ionic';
		opacity: 0;
		transform: translateY(1em);
	}
	15.98%,17.32% {
		content: 'Ionic';
		opacity: 1;
		transform: translateY(0);
	}
	19.98% {
		content: 'Ionic';
		opacity: 0;
		transform: translateY(-1em);
	}
	19.99% {
		content: 'React Native';
		opacity: 0;
		transform: translateY(1em);
	}
	22.64%,23.98% {
		content: 'React Native';
		opacity: 1;
		transform: translateY(0);
	}
	26.64% {
		content: 'React Native';
		opacity: 0;
		transform: translateY(-1em);
	}
	26.65% {
		content: 'iOS and Android';
		opacity: 0;
		transform: translateY(1em);
	}
	29.3%,30.64% {
		content: 'iOS and Android';
		opacity: 1;
		transform: translateY(0);
	}
	33.3% {
		content: 'iOS and Android';
		opacity: 0;
		transform: translateY(-1em);
	}
	33.31% {
		content: 'NodeJS';
		opacity: 0;
		transform: translateY(1em);
	}
	35.96%,37.3% {
		content: 'NodeJS';
		opacity: 1;
		transform: translateY(0);
	}
	39.96% {
		content: 'NodeJS';
		opacity: 0;
		transform: translateY(-1em);
	}
	39.97% {
		content: 'Wordpress';
		opacity: 0;
		transform: translateY(1em);
	}
	42.62%,43.96% {
		content: 'Wordpress';
		opacity: 1;
		transform: translateY(0);
	}
	46.62% {
		content: 'Wordpress';
		opacity: 0;
		transform: translateY(-1em);
	}
	46.63% {
		content: 'PHP';
		opacity: 0;
		transform: translateY(1em);
	}
	49.28%,50.62% {
		content: 'PHP';
		opacity: 1;
		transform: translateY(0);
	}
	53.28% {
		content: 'PHP';
		opacity: 0;
		transform: translateY(-1em);
	}
	53.29% {
		content: 'API Development';
		opacity: 0;
		transform: translateY(1em);
	}
	55.94%,57.28% {
		content: 'API Development';
		opacity: 1;
		transform: translateY(0);
	}
	59.94% {
		content: 'API Development';
		opacity: 0;
		transform: translateY(-1em);
	}
	59.95% {
		content: 'MySQL and Postgres';
		opacity: 0;
		transform: translateY(1em);
	}
	62.6%,63.94% {
		content: 'MySQL and Postgres';
		opacity: 1;
		transform: translateY(0);
	}
	66.6% {
		content: 'MySQL and Postgres';
		opacity: 0;
		transform: translateY(-1em);
	}
	66.7% {
		content: 'Custom Solutions';
		opacity: 0;
		transform: translateY(1em);
	}
	69.26%,70.6% {
		content: 'Custom Solutions';
		opacity: 1;
		transform: translateY(0);
	}
	73.26% {
		content: 'Custom Solutions';
		opacity: 0;
		transform: translateY(-1em);
	}
	73.27% {
		content: 'Dashboards';
		opacity: 0;
		transform: translateY(1em);
	}
	75.92%,77.26% {
		content: 'Dashboards';
		opacity: 1;
		transform: translateY(0);
	}
	79.92% {
		content: 'Dashboards';
		opacity: 0;
		transform: translateY(-1em);
	}
	79.93% {
		content: 'Agile';
		opacity: 0;
		transform: translateY(1em);
	}
	82.58%,83.92% {
		content: 'Agile';
		opacity: 1;
		transform: translateY(0);
	}
	86.58% {
		content: 'Agile';
		opacity: 0;
		transform: translateY(-1em);
	}
	86.59% {
		content: 'UI/UX Design';
		opacity: 0;
		transform: translateY(1em);
	}
	89.24%,90.58% {
		content: 'UI/UX Design';
		opacity: 1;
		transform: translateY(0);
	}
	93.24% {
		content: 'UI/UX Design';
		opacity: 0;
		transform: translateY(-1em);
	}
	93.25% {
		content: 'Optimization';
		opacity: 0;
		transform: translateY(1em);
	}
	95.9%,97.24% {
		content: 'Optimization';
		opacity: 1;
		transform: translateY(0);
	}
	99.9%, 100% {
		content: 'Optimization';
		opacity: 0;
		transform: translateY(-1em);
	}
}


section#inquiries {
	/* padding-top: 1rem; */
	/* color-scheme: only light; */
	padding-bottom: 1em;
	/* background: #333333; */
	/* color: #f8f8f8; */
}

a.button, button.button {
    margin-top: 0;
    margin-bottom: 1em;
}

/* Reset default input styles */
input {
	border: none;
	outline: none;
    color: white;
    background: transparent;
	font-size: 1em;
	font-family: 'Courier New', Courier, monospace;
    width: 100%;
  }

textarea {
	border: none;
	outline: none;
    color: white;
    background: transparent;
	font-size: 1em;
	font-family: 'Courier New', Courier, monospace;
    width: 100%;
}
  
  /* Container styling */
  .input-container {
	position: relative;
    border-radius: 14px;
    border-width: 1px;
    border-style: solid;
    background: transparent;
    color: white;
    padding: 1em;
    margin: 0 2em;
    margin-bottom: 2em;
  }
  
  /* Label styling */
  label {
    position: absolute;
    top: -0.5em;
    left: 1em;
    background-color: #333333;
    padding: 0 5px;
    color: white;
  }

a.button, button.button {
	border-radius: 0.5em;
	border-width: 1px;
	border-style: solid;
	background: #111111;
    border-color: #111111;
    font-size: 1em;
    font-family: unset;
	color: white;
	padding: 1em;
	font-weight: 500;
	letter-spacing: 0px;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	user-select: none;
	vertical-align: -webkit-baseline-middle;
	font-kerning: none;
	margin: 2em;
}

a.button:hover, button.button:hover {
	color: #111111;
	background-color: white;
}
	
section {
	padding-left: 4em;
	padding-right: 4em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

section > * {
	align-self: center;
}

section > h2 {
	align-self: flex-start;
}

section > p {
	text-align: justify;
}

form {
    align-self: stretch;
    background: #333;
    padding: 2em;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

form button.button {
	background: transparent;
	color: white;
	border-color: white;
	margin: 0 2em;
}

form button.button:hover {
	color: black;
	background-color: white;
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
}

.service-container.column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.service-container > .row {
    display: flex;
    flex-direction: row;    
	align-items: center;
    justify-content: center
}

.service-icon > .icon {
	background: #333333;
    border-radius: 50%;
    width: 84px;
    height: 84px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.service-text.row {
	margin-top: 20px;
}