#mySummer{
		display: flex;
		flex-direction: column;
		width: max-content;
		padding:32px;
		margin-left:auto;
		margin-right:auto;
		height: auto;
		z-index:999;
		opacity:.75;
		font-family:monospace;
		gap: 20px;
		border-radius: 26px;
		font-size:72px;
		color: #181818;
		position: relative;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(2px) saturate(180%);
		border: 1px solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
		inset 0 4px 20px rgba(255, 255, 255, 0.3);
	}

	#mySummer::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 2rem;
		backdrop-filter: blur(1px);
		box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
		inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
		opacity: 0.6;
		z-index: -1;
		filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
	}

	.list-item {
		color: #ffffff;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		list-style: none;
		padding:24px;
		font-size: 36px;
	}

	.list-item::after,
	.list-item::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 2px;
		background: linear-gradient(to right, #ff0000, #00ffff);
		bottom: -5px;
		left: 0;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.4s ease-out;
	}

	.list-item::before {
		top: -5px;
		transform-origin: left;
	}

	.list-item:hover::after,
	.list-item:hover::before {
		transform: scaleX(1);
	}
	
	#banner{
		width: max-content;
		padding:32px;
		margin-right:auto;
		margin-left:auto;
        margin-top:2px;
		border-radius: 26px;
		opacity:.75;
		font-size:72px;
		font-family:monospace;
		color: #181818;
		z-index:999;
		position: relative;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(2px) saturate(180%);
		border: 1px solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
		inset 0 4px 20px rgba(255, 255, 255, 0.3);
	}

	#banner::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 2rem;
		backdrop-filter: blur(1px);
		box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
		inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
		opacity: 0.6;
		z-index: -1;
		filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
	}

	#myPic {
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		z-index: -999;
		object-fit: cover;
	}
	
	#credits{
		position:fixed;
		bottom:10px;
		font-family: monospace;
		font-size:12px;
		color:#000;
		z-index:999;
		background-color:#fff;
		opacity:.75;
	}
	
	a{
		font-family:monospace;
		font-size:12px;
		color:#000;
	}