* {
		margin: 0;
		padding: 0;
}

	/*
	background-image: url(./assets/bgmobile.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	*/

 	:root {
 		--text-color: white;
 		--bg-url: url(./assets/bgmobile.jpg);
 		--stroke-color: rgba(255, 255, 255, 0.5);
 		--surface-color: rgba(255, 255, 255, 0.1);
 		--surface-color-hover: rgba(255, 255, 255, 0.05);
 		--highlight-color: rgba(255, 255, 255, 0.2);
 		--switch-bg-url: url(./assets/MoonStars.svg);
 	}

 	.light {
 		--text-color: black;
 		--bg-url: url(./assets/bgmobilelight.jpg);
 		--stroke-color: rgba(0, 0, 0, 0.5);
 		--surface-color: rgba(0, 0, 0, 0.05);
 		--surface-color-hover: rgba(0, 0, 0, 0.02);
 		--highlight-color: rgba(0, 0, 0, 0.1);
 		--switch-bg-url: url(./assets/Sun.svg);
 	}

	/*background: color image repeat position/size */
	
	body {
		background: var(--bg-url) no-repeat top center/cover;
		height: 100vh;
}

	body * {
		font-family: 'Inter', sans-serif;
		color: var(--text-color);
}

	#container {
		width: 100%;
		max-width: 588px;
		margin: 56px auto 0px;
		padding: 0 24px;
}

/*profile */

	#profile {
		text-align: center;
		padding: 24px;
}

	#profile img {
		width: 112px;
}

	#profile p {
		font-weight: 500;
		line-height: 24px;
		margin-top: 8px;
}

/* switch */

	#switch {
		position: relative;
		width: 64px;

		margin: 4px auto;
	}

	#switch button {
		width: 32px;
		height: 32px;
		background: white var(--switch-bg-url) no-repeat center; 
		border: 0;
		border-radius: 50%;
		cursor: pointer;

		position: absolute;
		top: 50%;
		left: 0;
		z-index: 1;
		transform: translateY(-50%);

		animation: slide-back 0.2s;
	}

	.light #switch button {
		animation: slide-in 0.2s forwards;
	}

	#switch button:hover {
		outline: 8px solid var(--highlight-color);
	}

	#switch span {
		display: block;
		width: 62px;
		height: 24px;
		background: var(--surface-color);
		border: 1px solid var(--stroke-color);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		border-radius: 9999px;
	}

/*links */

	ul {
		list-style: none;

		display: flex;
		flex-direction: column;
		gap: 16px;

		padding: 24px 0;
}

	ul li a {
		display: flex;
		align-items: center;
		justify-content: center;

		padding: 16px 24px;

		background: var(--surface-color);
		border: 1px solid var(--stroke-color);
		border-radius: 8px;

		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);

		text-decoration: none;
		font-weight: 500;

		transition: background 0.2s;
}

/* pseudo-selector */
	ul li a:hover {
		background: var(--surface-color-hover);
		border: 1.5px solid var(--text-color);
}

/* social-links */
	#social-links {
		display: flex;
		justify-content: center;

		padding: 24px 0;

		font-size: 24px;
}

	#social-links a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;

		transition: background 0.2s;
		border-radius: 50%;
}

	#social-links a:hover {
		background: var(--highlight-color);
}

	footer {
		padding: 24px 0;
		text-align: center;
		font-size: 14px;
}

/* media queries */
	@media (min-width: 700px) {
		:root {
			--bg-url: url(assets/bgdesktop.jpg);
			}

		.light {
			--bg-url: url(assets/bgdesktoplight.jpg);
		}
	}

/* animation */
	@keyframes slide-in {
		from {
			left: 0;
		}
		to {
			left: 50%;
		}
	}

	@keyframes slide-back {
  from {
    left: 50%;
  }
  to {
    left: 0;
  }
}