old-personal-website/site/projects/homepage/homepage-css.css

/**
	normal chrome dark theme color
	@media(prefers-color-scheme:dark){body{background-color:rgb(50,54,57);}}
	
	#ball-left
	{
		display: block;
		position: relative;
		
		top: 2.5rem;
		left: 20%;
		
		height: .5rem;
		width: .5rem;
		border-radius: 50%;
		
		animation-name: left-ball;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}

	#ball-right
	{
		display: block;
		position: relative;
		
		bottom: 2.5rem;
		
		height: .5rem;
		width: .5rem;
		border-radius: 50%;
		
		animation-name: right-ball;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}
	
	@keyframes left-ball
	{
		0%
		{
			left: 25%;
			background-color: white;
		}
		10%
		{
			left: 30%;
			background-color: #fcd2d1; 
		}
		20%
		{
			left: 25%;
			background-color: #fcfad1;
		}
		30%
		{
			left: 30%;
			background-color: #d4fcd1;
		}
		40%
		{
			left: 25%;
			background-color: #d1f6fc;
		}
		50%
		{
			left: 30%;
			background-color: #dfd1fc;
		}
		60%
		{
			left: 25%;
			background-color: #d1eefc;
		}
		70%
		{
			left: 30%;
			background-color: #eed1fc;
		}
		80%
		{
			left: 25%;
			background-color: #f1d1fc;
		}
		90%
		{
			left: 30%;
			background-color: #fcdcd1;
		}
		100%
		{
			left: 25%;
			background-color: white;
		}
	}
	
	@keyframes right-ball
	{
		0%
		{
			left: 72.25%;;
			background-color: white;
		}
		10%
		{
			left: 67.25%;;
			background-color: #fcd2d1; 
		}
		20%
		{
			left: 72.25%;;
			background-color: #fcfad1;
		}
		30%
		{
			left: 67.25%;;
			background-color: #d4fcd1;
		}
		40%
		{
			left: 72.25%;;
			background-color: #d1f6fc;
		}
		50%
		{
			left: 67.25%;;
			background-color: #dfd1fc;
		}
		60%
		{
			left: 72.25%;;
			background-color: #d1eefc;
		}
		70%
		{
			left: 67.25%;;
			background-color: #eed1fc;
		}
		80%
		{
			left: 72.25%;;
			background-color: #f1d1fc;
		}
		90%
		{
			left: 67.25%;;
			background-color: #fcdcd1;
		}
		100%
		{
			left: 72.25%;;
			background-color: white;
		}
	}**/

	@media(prefers-color-scheme:dark){body{background-color:rgb(23,38,38);}}
	
	@keyframes border-color
	{
		0%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
		
			border-right-color: white;
			border-left-color: white;
		}
		10%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
			
			border-right-color: #fcd2d1;
			border-left-color: #fcd2d1;
		}
		20%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
			
			border-right-color: #fcfad1;
			border-left-color: #fcfad1;
		}
		30%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
						
			border-right-color: #d4fcd1;
			border-left-color: #d4fcd1;
		}
		40%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
						
			border-right-color: #d1f6fc;
			border-left-color: #d1f6fc;
		}
		50%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
						
			border-right-color: #dfd1fc;
			border-left-color: #dfd1fc;
		}
		60%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
					
			border-right-color: #d1eefc;
			border-left-color: #d1eefc;
		}
		70%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;			
			
			border-right-color: #eed1fc ;
			border-left-color: #eed1fc;
		}
		80%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;		
			
			border-right-color: #f1d1fc;
			border-left-color: #f1d1fc;
		}
		90%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;			
			
			border-right-color: #fcdcd1;
			border-left-color: #fcdcd1;
		}
		100%
		{
			border-right-width: 4px;
			border-left-width: 4px;
			
			border-right-style: solid;
			border-left-style: solid;
						
			border-right-color: white;
			border-left-color: white;
		}
	}
	
	@keyframes color
	{
		0%
		{
			color: white;
		}
		10%
		{
			color: #fcd2d1; /*light pink*/
		}
		20%
		{
			color: #fcfad1;
		}
		30%
		{
			color: #d4fcd1;
		}
		40%
		{
			color: #d1f6fc;
		}
		50%
		{
			color: #dfd1fc;
		}
		60%
		{
			color: #d1eefc;
		}
		70%
		{
			color: #eed1fc;
		}
		80%
		{
			color: #f1d1fc;
		}
		90%
		{
			color: #fcdcd1;
		}
		100%
		{
			color: white;
		}
	}
	
	@keyframes hover
	{
		0%
		{
			color: #f45a5a;
			font-size: 1rem;
		}
		25%
		{
			color: #84E0D5;
		}
		50%
		{
			color: #f4a75a;
			font-size: 1.2rem;
		}
		75%
		{
			color: #b0e084;
		}
		100%
		{
			color: #FCB283;
			font-size: 1rem;
		}
	}
	
	@keyframes right-arrow
	{
		0%
		{
			transform: translateX(0%);
		}
		10%
		{
			transform: translateX(15%);
		}
		20%
		{
			transform: translateX(0%);
		}
		30%
		{
			transform: translateX(15%);
		}
		40%
		{
			transform: translateX(0%);
		}
		50%
		{
			transform: translateX(15%);
		}
		60%
		{
			transform: translateX(0%);
		}
		70%
		{
			transform: translateX(15%);
		}
		80%
		{
			transform: translateX(0%);
		}
		90%
		{
			transform: translateX(15%);
		}
		100%
		{
			transform: translateX(0%);
		}
	}
	
	@keyframes left-arrow
	{
		0%
		{
			transform: translateX(0%);
		}
		10%
		{
			transform: translateX(-15%);
		}
		20%
		{
			transform: translateX(0%);
		}
		30%
		{
			transform: translateX(-15%);
		}
		40%
		{
			transform: translateX(0%);
		}
		50%
		{
			transform: translateX(-15%);
		}
		60%
		{
			transform: translateX(0%);
		}
		70%
		{
			transform: translateX(-15%);
		}
		80%
		{
			transform: translateX(0%);
		}
		90%
		{
			transform: translateX(-15%);
		}
		100%
		{
			transform: translateX(0%);
		}
	}
	
	html, body
	{
		line-height: 15pt;
		min-height: 100%;
		min-width: 100%;
		max-height: 100%;
		max-width: 100%;

		overflow: hidden;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	
	body
	{
		padding: 0px;
		margin: 0px;

		height: 100vh;
		width: 100vw;
						
		background-image: url("bg.png");
		background-size: 100% 100%;
		overflow: hidden;
		scrollbar-width: none;
	}

		
	h1
	{
		color: white;
		font-family: monospace;
		font-size: 1.4rem;

		
		animation-name: color;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}
		
	
	a, section
	{
		display: inline-block;
		height: 1rem;
		
		text-decoration: none;
		text-align: center;
		
		color: white;
		font-family: monospace;
		font-size: .8rem;
		
		scrollbar-width: none;
		
		animation-name: color;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}

	a:hover
	{
		animation-name: hover;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}
	
	hr
	{
		color: white;
		border: .5px solid;
		border-radius: 25px;
		
		animation-name: color;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}
	
	audio
	{
		display: inline;
		position: absolute;
		right: 0%;
		bottom: 0%;
		width: 1.25rem;
	}
	
	#line-top
	{
		margin-top: 1rem;
		margin-bottom: -.2rem;
	}
	
	#line-bottom
	{
		margin-top: -.2rem;
		margin-bottom: 1rem;
	}
	
	#right-arrow
	{
		display: inline-block;
		font-family: monospace;
		font-size: 1.4rem;
		
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		
		animation: right-arrow 10s infinite, color 20s infinite;
	}
	
	#left-arrow
	{
		display: inline-block;
		font-family: monospace;
		font-size: 1.4rem;
		
		position: relative;
		margin-top:0;
		margin-bottom: 0;
		
		animation: left-arrow 10s infinite, color 20s infinite;
	}
	
	#black-box
	{		
		width: 20rem;	
		height: 100%;
		background-color: rgba(0, 0, 0, .6);

		
		border-right-width: 4px;
		border-left-width: 4px;

		padding-top: 0%;
		margin-left: 10rem;
		text-align: center;
			
		overflow: scroll;	
		scrollbar-width: none;

		animation-name: border-color;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}
	
	html::-webkit-scrollbar 
	{   
		display: none; 
	}


	
    }