* {
	-webkit-tap-highlight-color: transparent;
}

*:focus {
	outline: none;
}

input {
	outline: none;
}

hr {
	background-color: var(--text-color);
	height: 2px;
	border-radius: 2px;
	width: 95%;
}

p {
	margin: 0;
}

@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron.ttf') format('truetype');
    font-weight: 400 500 600 700 800 900;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
	--background-color: #fafafa;
	--inverted-background-color: #0c0c0c;
	--text-color: #232323;
	--primary-color: #ff9933;
	--input-color: #dadada;
	--scrollthumb-color: #aaaaaa;
	color-scheme: light;
}

.dark-mode {
	--background-color: #0c0c0c;
	--inverted-background-color: #fafafa;
	--text-color: #fafafa;
	--primary-color: #ff9933;
	--input-color: #434343;
	--scrollthumb-color: #737373;
	color-scheme: dark;
}

body {
	background-color: var(--background-color);
	font-family: 'Ubuntu';
	transition: background-color 0.3s ease;
	margin: 0;
}

#navbar {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	max-width: max-content;
	height: 3.7rem;
	box-shadow: 0px 1px 3px var(--text-color);
	border-radius: 500px;
	cursor: pointer;
	color: var(--text-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	z-index: 10;
	user-select: none;
	text-shadow: 0px 0px 4px var(--background-color);
	transition: all 0.3s ease, color 10ms ease, text-shadow 10ms ease;
	transform-origin: left top;
}

#navbar:hover {
	scale: 1.02;
}

.open-navbar {
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	border-radius: 25px !important;
	box-shadow: none !important;
	height: max-content !important;
	scale: 1 !important;
	cursor: default !important;
	border: 1px solid #ddd;
	padding: 0.6rem 1.2rem;
	color: #fafafa !important;
	text-shadow: 0px 0px 4px #0c0c0c !important;
}

.open-navbar #navbarbrand {
	justify-content: space-between;
}

#navbarbrand {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: 2.5rem;
	width: 100%;
	padding: 0.6rem 1.2rem;
	transition: all 0.3s ease;
}

.navbarlogo {
	height: 100%;
	width: auto;
	user-select: none;
}

.navbartitle {
	font-family: 'Orbitron';
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
	padding: 0 0.5rem;
}

#navbaricon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50px;
	font-size: 2rem;
	cursor: pointer;
}

.navbarrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0.5rem 0;
	box-sizing: border-box;
	text-decoration: none;
	cursor: pointer;
	color: #fafafa !important;
}

.navbarrow:hover .navbarrowtext {
	scale: 1.02;
}

.navbarrowicon {
	font-size: 2rem;
}

.navbarrowtext {
	font-size: 2rem;
	font-weight: 700;
	flex-grow: 1;
    text-align: center;
	transition: scale 0.3s ease;
}

#nojs-navbar {
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translate(-50%, 0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	width: 100%;
	max-width: max-content;
	height: max-content;
	max-height: 3.7rem;
	box-shadow: 0px 1px 3px var(--text-color);
	border-radius: 500px;
	cursor: pointer;
	color: var(--text-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	z-index: 10;
	user-select: none;
	transition: all 0.3s ease, color 10ms ease, text-shadow 10ms ease;
	transform-origin: left top;
}

.nojs-navbarlogo {
	height: 2.5rem;
	width: auto;
	user-select: none;
}

.nojs-nav-toggle {
	display: none;
	transition: all 0.3s ease;
}

.nojs-nav-toggle-label {
	cursor: pointer;
	width: 100%;
	height: 3.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

#nojs-closenavbaricon {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50px;
	font-size: 2rem;
	cursor: pointer;
}

.nojs-nav-toggle:checked ~ #nojs-navbar {
    top: 50% !important;
	transform: translate(-50%, -50%) !important;
	border-radius: 25px !important;
	box-shadow: none !important;
	max-height: 100%;
	scale: 1 !important;
	cursor: default !important;
	border: 1px solid #ddd;
	padding: 0.6rem 1.2rem;
	color: #fafafa !important;
	text-shadow: 0px 0px 4px #0c0c0c;
}

.nojs-nav-toggle:checked ~ #nojs-navbar #navbarbrand .nojs-nav-toggle-label {
	justify-content: space-between;
}

.nojs-nav-toggle:checked ~ #nojs-navbar #navbarbrand #navbaricon {
	transform: rotate(180deg);
}

#blur {
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 5;
	transition: all 0.3s ease;
}

#modalblur {
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 11;
	transition: all 0.3s ease;
}

#contentarea {
	display: none;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 5rem;
    width: 100dvw;
    height: calc(100dvh - 5rem);
    transition: all 0.3s ease;
    overflow-y: auto;
	color: var(--text-color);
	scroll-behavior: smooth;
	user-select: none;
}

#contentarea::-webkit-scrollbar {
	width: 0.5rem;
}

#contentarea::-webkit-scrollbar-track {
	background: var(--input-color);
}

#contentarea::-webkit-scrollbar-thumb {
	background: var(--scrollthumb-color);
}

#contentarea::-webkit-scrollbar-thumb:hover {
	background: var(--primary-color);
}

#nojs-contentarea {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 5rem;
    width: 100dvw;
    height: calc(100dvh - 5rem);
    transition: all 0.3s ease;
    overflow-y: auto;
	color: var(--text-color);
	scroll-behavior: smooth;
	user-select: none;
}

#nojs-contentarea::-webkit-scrollbar {
	width: 0.5rem;
}

#nojs-contentarea::-webkit-scrollbar-track {
	background: var(--input-color);
}

#nojs-contentarea::-webkit-scrollbar-thumb {
	background: var(--scrollthumb-color);
}

#nojs-contentarea::-webkit-scrollbar-thumb:hover {
	background: var(--primary-color);
}

#darkmode {
	position: fixed;
	bottom: 0.5rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	border-radius: 500px;
	background-color: var(--inverted-background-color);
	color: var(--background-color);
	cursor: pointer;
}

#darkmode:hover {
	scale: 1.1;
}

#homeheader {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	gap: 1rem;
	opacity: 1;
	transition: all 0.4s ease;
}

#homelogo {
	width: 90%;
	max-width: 500px;
	height: auto;
	pointer-events: none;
}

.spritecontainer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 300px;
	overflow: hidden;
}

.spritecontainer img {
	width: 100%;
	height: auto;
	user-select: none;
	pointer-events: none;
}

.satelliteimg {
	position: absolute;
	top: 0;
	animation: spin 7.5s linear infinite;
}

.button {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.2rem;
	font-size: 1.2rem;
	font-weight: 600;
	background-color: transparent;
	color: var(--text-color);
	border: 2px solid var(--text-color);
	border-radius: 15px;
	cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-bottom: 0.5rem;
	text-align: center;
}

.button:hover {
	scale: 1.02;
	background-color: var(--primary-color);
	color: #fafafa;
	text-shadow: 0px 1px 3px #232323;
	box-shadow: 0px 1px 3px var(--text-color);
	border-radius: 5px;
}

.greenbutton {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.2rem;
	font-size: 1.2rem;
	font-weight: 600;
	background-color: transparent;
	color: var(--text-color);
	border: 2px solid var(--text-color);
	border-radius: 15px;
	cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-bottom: 0.5rem;
}

.greenbutton:hover {
	scale: 1.02;
	background-color: #00ca00;
	color: #fafafa;
	box-shadow: 0px 1px 3px var(--text-color);
	border-radius: 5px;
}

.greybutton {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.2rem;
	font-size: 1.2rem;
	font-weight: 600;
	background-color: transparent;
	color: #aaaaaa;
	border: 2px solid #aaaaaa;
	border-radius: 15px;
	cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-bottom: 0.5rem;
}

.greybutton:hover {
	scale: 1.02;
	background-color: #aaaaaa;
	color: #fafafa;
	box-shadow: 0px 1px 3px var(--text-color);
	border-radius: 5px;
}

.rainbowbutton {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.2rem;
	margin-bottom: 0.5rem;
    border: none;
    outline: none;
    color: var(--text-color);
    background-color: var(--background-color);
    position: relative;
    z-index: 1;
    border-radius: 15px;
    user-select: none;
    transition: all 0.3s ease;
	cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 600;
}

.rainbowbutton:before {
	content: "";
	background: linear-gradient(
		45deg,
		#ff0000,
		#ff7300,
		#fffb00,
		#48ff00,
		#00ffd5,
		#002bff,
		#7a00ff,
		#ff00c8,
		#ff0000
	);
	position: absolute;
	top: -2px;
	left: -2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing-rainbowbutton 23s linear infinite;
	transition: all 0.3s ease;
	border-radius: 15px;
}

.rainbowbutton:after {
	z-index: -1;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: var(--background-color);
	border-radius: 15px;
	transition: all 0.3s ease;
}

.rainbowbutton:hover {
	scale: 1.02;
	border-radius: 5px;
	background: transparent;
	color: #fafafa;
	box-shadow: 0px 1px 3px var(--text-color);
	text-shadow: 0px 0px 3px #232323;
}

.rainbowbutton:hover::before {
	border-radius: 5px;
}

.rainbowbutton:hover::after {
	background: transparent;
	border-radius: 5px;
}

.contenttitle {
	font-size: 2rem;
	font-weight: 700;
}

.contenttext {
	font-size: 1.1rem;
	font-weight: 400;
}

.equalwidthwrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: max-content;
	height: auto;
}

.aboutrows {
	width: 100%;
	max-width: 850px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.aboutrow {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.rowcontent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.aboutrowtext {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 500;
	padding: 0 0.5rem;
	text-align: center;
}

#aboutus {
	font-size: 1.7rem;
	max-width: 800px;
	text-align: center;
	line-height: 1.3;
	padding: 0 1rem;
}

.opacityanim {
	transition: all 0.4s ease;
}

.portfolio-list {
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.portfolio-entry {
	width: 95%;
	padding: 2rem 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.portfolio-entry:nth-child(even) {
	flex-direction: row;
}

.portfolio-entry:nth-child(odd) {
	flex-direction: row-reverse;
}

.portfolio-list .portfolio-entry:first-child {
	flex-direction: column;
}

.portfolio-image-anchor {
	width: 50%;
}

.portfolio-image {
	width: 100%;
	height: auto;
	border-radius: 15px;
	box-shadow: 0px 2px 10px var(--text-color);
	transition: all 0.3s ease;
}

.portfolio-image:hover {
	scale: 1.02;
	border-radius: 5px;
	box-shadow: 0px 2px 10px var(--text-color);
}

.portfolio-list .portfolio-entry:first-child .portfolio-image-anchor {
	width: 95%;
	max-width: 800px;
}

.portfolio-text {
	height: 100%;
	width: 50%;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
}

.portfolio-list .portfolio-entry:first-child .portfolio-text {
	width: 95%;
	max-width: 800px;
}

.portfolio-button {
	width: max-content;
	max-width: 100%;
	margin: 0.5rem 0;
	font-size: 1.3rem;
	text-decoration: none;
	color: var(--text-color);
	font-weight: 700;
	transition: all 0.3s ease;
}

.portfolio-button:hover {
	scale: 1.02;
}

.footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: max-content;
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-size: 0.8rem;
	color: var(--input-color);
	text-align: center;
}

.services-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.services-container {
	padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.service-entry {
	border: 3px solid var(--text-color);
	border-radius: 15px;
    color: var(--text-color);
    padding: 1rem;
    width: 16rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem;
	cursor: pointer;
	background-color: unset !important;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.service-entry::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 225, 255, 0) 75%);
	background-size: 200% 100%;
	z-index: 2;
	pointer-events: none;
	border-radius: 15px;
	transition: all 0.3s ease-in-out;
}

.service-entry:hover {
	scale: 1.05;
	border-radius: 5px;
	box-shadow: 0px 1px 3px var(--text-color);
}

.service-entry:hover::before {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 225, 255, 0) 60%);
	animation: shimmer 1.6s linear infinite;
	border-radius: 5px;
}

.service-blue-hover:hover {
	background-color: #00d0ff !important;
	color: #fafafa !important;
	text-shadow: 0px 1px 3px #232323 !important;
}

.service-green-hover:hover {
	background-color: #00dd0d !important;
	color: #fafafa !important;
	text-shadow: 0px 1px 3px #232323 !important;
}

.service-yellow-hover:hover {
	background-color: #ffea00 !important;
	color: #fafafa !important;
	text-shadow: 0px 1px 3px #232323 !important;
}

.service-pink-hover:hover {
	background-color: #e91e63 !important;
	color: #fafafa !important;
	text-shadow: 0px 1px 3px #232323 !important;
}

.service-image {
	width: 16rem;
    height: auto;
}

.service-text {
	font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 0.5rem;
	text-decoration: none;
}

.team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 26rem;
	max-width: 95%;
	height: max-content;
	border-radius: 20px;
	box-shadow: 0px 1px 3px var(--text-color);
	transition: all 0.3s ease;
}

.team-card:hover {
	scale: 1.02;
	border-radius: 5px;
}

.team-card-image {
	width: 100%;
	margin-top: 1rem;
	position: relative;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.team-card-image::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(to top, var(--background-color), transparent);
	pointer-events: none;
}

.team-card-image img {
	width: 100%;
	height: auto;
}

.team-card-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-grow: 1;
	background-color: var(--background-color);
	border-radius: 0px 0px 20px 20px;
	transition: all 0.3s ease;
}

.team-card-name {
	font-size: 1.3rem;
	font-weight: 700;
	margin-top: 2rem;
}

.team-card-text {
	font-size: 1.2rem;
	font-weight: 500;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

.team-card-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: 2rem;
}

.team-card-buttons a {
	text-decoration: none;
	color: inherit;
	margin: 0 1rem;
	transition: all 0.3s ease;
}

.team-card-buttons a:hover {
	scale: 1.05;
}

.team-card-gif {
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0;
	transition: all 0.3s ease;
}

.team-card:hover .team-card-gif {
	opacity: 1;
	border-radius: 5px;
}

.team-card:hover .team-card-info {
	border-radius: 0px 0px 5px 5px;
}

.faq-list {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	width: 95%;
	max-width: 800px;
	margin-bottom: 10rem;
}

.faq-question {
	font-size: 1.3rem;
	font-weight: 600;
	margin-top: 1rem;
	margin-bottom: 0.75rem;
}

.faq-answer {
	font-size: 1.2rem;
	font-weight: 400;
}

.faq-asterisk {
	font-size: 1rem;
	font-weight: 300;
}

.service-header {
	margin: 1rem 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 95%;
	max-width: 800px;
	height: 20rem;
	min-height: 20rem;
	border-radius: 15px;
	box-shadow: 0px 1px 5px var(--text-color);
	color: #fafafa !important;
	text-shadow: 0px 0px 3px #232323 !important;
	background-color: #00000033;
}

.service-header-title {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	max-width: 70%;
	font-size: 1.5rem;
	font-weight: 600;
}

.service-header-media {
	border-radius: 15px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.service-text-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 95%;
	max-width: 800px;
}

.service-text-container ul {
	padding: 0.5rem 1rem;
	margin-bottom: 0;
}

.quicklinks-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 95%;
	max-width: 800px;
	margin-bottom: 0.5rem;
}

.quicklinks-button {
	margin: 0.5rem 1rem;
}

.text-with-image-text {
	margin: 0.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.text-with-image {
	width: 95%;
	max-width: 800px;
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: center;
}

.text-with-image img {
	max-width: 45%;
	height: auto;
	border-radius: 15px;
	box-shadow: 0px 1px 20px -10px var(--text-color);
}

.list-item {
	font-size: 1.2rem;
	font-weight: 400;
	margin: 0.75rem 0;
}

.contactform {
	width: 95%;
	max-width: 800px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.input {
	border-radius: 15px;
	border: 2px solid var(--text-color);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.6rem 1.2rem;
	font-size: 1.2rem;
	font-family: 'Ubuntu';
	box-sizing: border-box;
	transition: all 0.3s ease;
	background: transparent;
}

.input:hover {
	border-radius: 5px;
	scale: 1.02;
	box-shadow: 0px 1px 3px var(--text-color);
}

.input:active {
	border-radius: 5px;
	scale: 1.02;
	box-shadow: 0px 1px 3px var(--text-color);
}

.input:focus {
	border-radius: 5px;
	scale: 1.02;
	box-shadow: 0px 1px 3px var(--text-color);
}

.checkbox-group {
	width: max-content;
	text-align: center;
}

.custom-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 1.3rem 0;
	cursor: pointer;
	line-height: 20px;
	white-space: nowrap;
	transition: all 0.3s ease;
	transform-origin: left center;
}

.custom-checkbox:hover {
	scale: 1.03;
}

.custom-checkbox input[type="checkbox"] {
	display: none;
}

.checkbox-indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	background: transparent;
	position: absolute;
	left: -3rem;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid #2c2c2c;
	border-radius: 5px;
}

.checkbox-img {
	height: 3rem;
	width: auto;
	margin-right: 1rem;
}

.checkbox-indicator i {
	display: none;
	color: white;
	text-shadow: 0px 0px 2px #232323;
}

.custom-checkbox p {
	flex-grow: 1;
	text-align: left;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-indicator {
	background: var(--primary-color);
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-indicator i {
	display: block;
}

.submitmsg {
	max-width: 95%;
	width: max-content;
	padding: 0.6rem 1.2rem;
	border-radius: 15px;
	background-color: #00ab0a;
	color: #fafafa;
	margin-top: 2.5rem;
	box-shadow: 0px 1px 20px -10px var(--text-color);
	text-align: center;
	box-sizing: border-box;
}

#modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.2rem;
	background-color: var(--background-color);
	box-shadow: 0px 1px 20px -10px var(--text-color);
	border-radius: 15px;
	visibility: hidden;
	opacity: 0;
	width: 95dvw;
	max-width: 800px;
	max-height: 95dvh;
	overflow-y: auto;
	z-index: 12;
	color: var(--text-color);
	text-align: center;
	user-select: none;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

#closemodal {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	font-size: 1.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	transform-origin: top right;
}

#closemodal:hover {
	scale: 1.1;
}

.servicebuttonwrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: max-content;
	margin: 1rem 0;
	gap: 1rem;
}

.servicebuttonwrapper .button span {
	flex-grow: 1;
}

.servicebuttonimg {
	width: auto;
	height: 3rem;
	margin-right: 1rem;
}

.pricing-tier-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding: 1rem;
	justify-content: center;
	margin-top: 1rem;
}

.pricing-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	background-color: var(--background-color);
	box-shadow: 0px 1px 20px -10px var(--text-color);
	width: 20rem;
	max-width: 100%;
	border-radius: 20px;
	transition: all 0.3s ease;
	padding: 1rem;
	padding-bottom: 6rem;
	text-align: center;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.pricing-tier:hover {
	scale: 1.03;
}

.pricing-tier .button {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

.tier-title {
	position: absolute;
	top: -1rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.2rem;
	font-weight: 600;
	padding: 0.6rem 1.2rem;
	border-radius: 15px;
	color: #fafafa;
	text-shadow: 0px 1px 3px #232323;
	box-shadow: 0px 0px 5px -1px var(--text-color);
}

.tier-feature {
	font-size: 1.1rem;
	font-weight: 400;
	padding: 0.75rem 1.3rem;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	text-align: left;
}

.tier-feature-header {
	font-weight: 500;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    color: #fafafa;
    text-shadow: 0px 0px 3px #232323;
    border: none !important;
	box-shadow: 0px 1px 3px var(--text-color);
	text-align: center;
	display: flex;
}

.pricing-tier .tier-feature:not(:last-child) {
    border-bottom: 1px solid var(--text-color);
}

.tooltip-icon {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.tooltip-text {
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease;
	position: absolute;
	z-index: 2;
	bottom: 110%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.1rem;
	border-radius: 5px;
	text-align: center;
	color: var(--text-color);
	background-color: var(--background-color);
	box-shadow: 0px 0px 7px var(--text-color);
	width: 95%;
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
}

.tooltip-icon:hover + .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.cloud-addon-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	background-color: var(--background-color);
	box-shadow: 0px 1px 20px -10px var(--text-color);
	width: 95%;
	max-width: 1100px;
	border-radius: 20px;
	transition: all 0.3s ease;
	padding: 1rem 1.4rem;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.cloud-addon-container:hover {
	scale: 1.02;
}

.addon-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

.addon-table tr:first-child td {
	font-weight: 500;
	font-size: 1.1rem;
}

.addon-table tr td:last-child {
	white-space: nowrap;
	font-weight: 600;
	text-align: right;
}

.addon-table tr td {
	padding: 0.3rem;
}

.addon-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--text-color);
}

.submission-button-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.loadingspinner {
	width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    border-top: 4px solid var(--primary-color);
    animation: spin 0.5s linear infinite;
	margin: 1rem;
}

.submission-spinner-container {
	position: absolute;
	width: 100%;
    height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	visibility: hidden;
}

#submissionloadingspinner {
	width: 2.8rem;
    height: 2.8rem;
	margin: 0;
	margin-top: 10px;
}

.ssl-notice {
    background-color: #31e03a;
    color: #fafafa;
    font-size: 1.2rem;
    border-radius: 15px;
    box-shadow: 0px 1px 3px var(--text-color);
    text-shadow: 0px 0px 3px #232323;
    margin-bottom: 2rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: max-content;
    max-width: 75dvw;
    font-weight: 500; 
}

.ssl-notice p {
    padding-right: 4rem;
    padding-left: 1.8rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

.ssl-notice img {
    height: 9rem;
    position: absolute;
    right: -4rem;
}

@media (max-width: 820px) {
	
	.servicebuttonwrapper {
		flex-direction: column;
		gap: 0.3rem;
	}
	
	.servicebuttonwrapper .button {
		width: 100%;
	}
	
}

@media (max-width: 650px) {
	
	.text-with-image {
		flex-direction: column;
		align-items: center;
	}
		
	.text-with-image img {
		max-width: 95%;
	}
	
}

@media (max-width: 800px) {
	
	.portfolio-entry {
		flex-direction: column !important;
	}
	
	.portfolio-image-anchor {
		width: 95%;
		max-width: 800px;
	}
	
	.portfolio-text {
		width: 95%;
		max-width: 800px;
	}
	
}

@media (max-width: 985px) {
	
	#homeheader {
		flex-direction: column;
	}
	
	#homelogo {
		max-width: 360px;
	}
	
}

@media (max-width: 700px) {
	
	.service-header {
		height: 15rem;
		min-height: 15rem;
	}
	
	.aboutrow {
		flex-direction: column;
	}
	
	.aboutrowtext {
		font-size: 1.3rem;
		padding: 0 2rem;
	}
	
	.spritecontainer {
		max-width: 200px;
	}
	
	.invertedaboutrow {
		flex-direction: column-reverse;
	}
	
}

@media (max-width: 395px) {
	
	#homelogo {
		max-width: 270px;
	}
	
	.open-navbar {
		padding: 0;
	}
	
	.open-navbar #navbarbrand {
		justify-content: center;
	}
	
	.navbarrow {
		width: 90%;
	}
	
	.contenttitle {
		font-size: 1.5rem;
	}
	
	.contenttext {
		font-size: 1rem;
	}
	
	.button {
		padding: 0.3rem 0.6rem;
		font-size: 1.1rem;
	}
	
	.input {
		padding: 0.3rem 0.6rem;
		font-size: 1.1rem;
	}
	
	.greybutton {
		padding: 0.3rem 0.6rem;
		font-size: 1.1rem;
	}
	
	.rainbowbutton {
		padding: 0.3rem 0.6rem;
		font-size: 1.1rem;
	}
	
}

@media (max-width: 500px) {
	
	.quicklinks-container {
		flex-wrap: nowrap;
		flex-direction: column;
		width: 95%;
		max-width: 95%;
	}
	
	.quicklinks-button {
		width: 100%;
		margin: 0.25rem 0;
	}
	
	#darkmode {
		right: 0.5rem;
	}
	
	#contentarea::-webkit-scrollbar {
		width: 0.3rem;
	}
	
	#nojs-contentarea::-webkit-scrollbar {
		width: 0.3rem;
	}
	
}

@media (max-width: 1340px) {
	
	.services-container {
		max-width: 60rem;
	}
	
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes glowing-rainbowbutton {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

@keyframes shimmer {
	from {
		background-position: -200% 0;
	}
	to {
		background-position: 200% 0;
	}
}