@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

		* {
			font-family: "Montserrat", sans-serif;
			font-optical-sizing: auto;
			font-weight: <weight>;
			font-style: normal;
			color: rgba(255, 255, 255, 0.2);
		}
		body {
			padding: 0;
			margin: 0;
			display: flex;
			background-color: #1d2b3a;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
			width: 100vw;
			overflow: hidden;
		}

		table {
			width: 75%;
		}

		.wrapper {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			justify-content: center;
			align-items: center;

		}


		.inputBox {
			position: relative;
			margin-block: 25px;
		}

		.inputBox input {
			width: 400px;
			background-color: #1d2b3a;
			outline: none;
			border: 1px solid rgba(255, 255, 255, 0.2);
			height: 36px;
			font-size: 24px;
			padding: 4px;
			border-radius: 10px;
			color: rgba(255, 255, 255, 0.2);
			padding-left: 12px;
			transition: 0.5s;
		}

		.inputBox span {
			position: absolute;
			color: rgba(255, 255, 255, 0.2);
			left: 0;
			margin-left: 12px;
			padding: 8px;
			transition: 0.3s;
			pointer-events: none;
			text-transform: uppercase;
		}

		.inputBox input:focus ~ span,
		.inputBox input:valid ~ span {
			padding: 0;
			transform: translate(0px, -16px);
			font-size: 12px;
			background-color: #1d2b3a;
			letter-spacing: 0.2em;
			color: white;
		}

		.inputBox input:focus,
		.inputBox input:valid {
			border: 2px solid white;
			color: white;		
		}

		.inputBox textarea {
			width: 400px;
			height: 400px;
			background-color: #1d2b3a;
			outline: none;
			border: 1px solid rgba(255, 255, 255, 0.2);
			font-size: 24px;
			padding: 4px;
			border-radius: 10px;
			color: rgba(255, 255, 255, 0.2);
			padding-left: 12px;
			transition: 0.5s;
			resize: none;
		}

		.inputBox textarea:focus ~span,
		.inputBox textarea:valid ~span {
			padding: 0;
			transform: translate(0px, -16px);
			font-size: 12px;
			background-color: #1d2b3a;
			letter-spacing: 0.2em;
			color: white;
		}

		.inputBox textarea:focus,
		.inputBox textarea:valid {
			border: 2px solid white;
			color: white;	
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(255, 255, 255, 0.2);
			width: 90%;
			height: 32px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 15px;
			transition: 0.5s;
			text-transform: uppercase;
			cursor: pointer;
			background-color: rgba(255, 255, 255, 0.0);
		}

		.submit:hover {
			color: #1d2b3a;
			background-color: rgba(255, 255, 255, 0.2);
		}

		.submit:active {
			color: black;
			background-color: white;
		}

		.t1 {
			color: rgba(255, 255, 255, 0.2);
			font-size: 36px;
			overflow: visible;
			animation: mainTitle 6s linear alternate infinite;
		}

		.t2 {
			color: rgba(255, 255, 255, 0.2);
			font-size: 24px;
		}

		.t3 {
			margin-top: 24px;
			color: rgba(255, 255, 255, 0.2);
			font-size: 12px;
		}

		a {
			text-decoration: none;
			color: rgba(255, 255, 255, 0.2);
		}

		.isocontainer {
			position: relative;
			min-width: 176px;
			min-height: 264px;
			background-image: url("/images/noimage.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			overflow: hidden;
			border-radius: 12px;
			transition: 0.5s;
			backdrop-filter: blur(5px);

		}

		.isocontainer:hover,
		.isocontainer:focus {
			transform: scale(1.05);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
		}

		.isocontainer:hover > .hovertext {
			background-color: rgba(0, 0, 0, 0.6);
			color: rgba(255, 255, 255, 1.0);
			opacity: 1;
		}

		.hovertext {
			display: flex;
			flex-direction: column;
			justify-content: end;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.0);
			transition: 0.5s;
			color: white;
			padding: 24px;
			opacity: 0;
		}

		.hovertext > * {
			color: white;
		}

		.group {
			max-width: 130px;
			min-height: 16px;
			position: absolute;
			padding: 3px;
			padding-inline: 6px;
			border-radius: 12px;
			margin-left: 12px;
			margin-top: 6px;
			top: 0;
			left: 0;
			font-size: 14px;
			color: white;
			background-color: rgba(0, 0, 255, 0.6);
		}

		.pat {
			position: absolute;
			top: 0;
			right: 0;
			height: 16px;
			width: 16px;
			margin-right: 12px;
			margin-top: 6px;
			border-radius: 100%;
			background-color: limegreen;
			padding: 3px;
		}

@keyframes mainTitle {

	from {
		color: rgba(255, 255, 255, 0.2);
	}
	to {
		color: rgba(255, 255, 255, 1);
	}

}