#content {
	width: 65%;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#welcome {
	display: flex;
	justify-content: center;
    margin-bottom: 50px;
}

h1 {
	color: #66cccc;
	font-family: Calibri;
	font-size: 36px;
	font-weight: bold;

	align-self: center;
	text-shadow: 0px 0px 5px #66cccc80;
}

h1 > img {
	float: left;
	width: 48px;
	height: 48px;
	margin-right: 20px;

	filter: brightness(0) saturate(100%) invert(75%) sepia(29%) saturate(602%) hue-rotate(131deg) brightness(94%) contrast(85%) blur(0.5px);
}

#appbox {
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 4%;

	width: 100%;
}

.app {
	position: relative;

    width: 15%;
    min-width: 100px;
	display: block;

    text-decoration: none;
}

.appimgbox {

	/*
    width: auto;
    aspect-ratio: 1 / 1;
	*/

	width: 150px;
	height: 150px;

    border: 5px solid #66cccc;
	border-radius: 15%;
	background:
			linear-gradient(45deg, #0b2626c0, #174d4dc0 35%, #0b2626c0 80%),
		    	radial-gradient(circle at top, #174d4dff, #0b2626ff);

	box-shadow: 0px 0px 5px 5px #66cccc40,
 		    inset 0px 0px 5px 5px #66cccc40;
}

.appimgbox > img {
	max-width: 90%;
	max-height: 90%;

	filter: invert(76%) sepia(86%) saturate(236%) hue-rotate(123deg) brightness(84%) contrast(90%) blur(0.5px);

	position: relative;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.app > p {
	text-align: center;
	width: 100%;

    margin: 0px;
	margin-left: auto;
	margin-right: auto;

	color: #66cccc;
	font-family: Calibri;
	font-size: 12pt;
	font-weight: bold;

	text-shadow: 0px 0px 5px #66cccc;
}

.app:hover {
	opacity: 100%;
}

.app {
	opacity: 75%;
}

.app-disabled {
	filter: saturate(0%) brightness(50%);
	/* cursor: not-allowed; */
}

.app-annotation {
	display: block;
	position: relative;
	z-index: 2;

	position: relative;
	top: -160px;
	left: 110px;

	width: 50px;
	height: 50px;

	border: 5px solid #66cccc;
	border-radius: 50%;
	background:
			linear-gradient(45deg, #0b2626c0, #174d4dc0 35%, #0b2626c0 80%),
		    	radial-gradient(circle at top, #174d4dff, #0b2626ff);

	box-shadow: 0px 0px 5px 5px #66cccc40,
 		    inset 0px 0px 5px 5px #66cccc40;
}

.app-annotation > img {
	max-width: 80%;
	max-height: 80%;

	filter: invert(76%) sepia(86%) saturate(236%) hue-rotate(123deg) brightness(84%) contrast(90%) blur(0.5px);

	position: relative;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}