/*--- Fonts ---*/
@font-face {
	font-family: "Ubuntu";
	src: url("papercuts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
	font-display: swap;
	font-weight: 400;
}

@font-face {
	font-family: "NunitoSans";
	src: url("papercuts/Nunito_Sans/NunitoSansFont.ttf") format("truetype");
	font-display: swap;
	font-weight: 400;
}

/*--- General ---*/
	html {
  scroll-behavior: smooth;
}

body {
    	max-width: 100%;
		min-height: 100vh;
    	overflow-x: hidden;
		background-size: cover;
		background-repeat: no-repeat;
		background-color: #403151;
    }

/*--- Nav ---*/

	#lul {
		list-style-type: none;
		padding:0;
		margin:0;
		overflow: hidden;
	width:100%;
	top:0;
	height:fit-content; /*this screws up animations for when the menu comes down in portait. to fix in future.*/
	clear:both;
	position: fixed;
	left:0;
	right:0;
	animation: cansadooo 2s;
	animation-fill-mode: backwards;
	}

	.i1 {
		list-style-type: none;
		font-family: 'Trebuchet MS', "Ubuntu", Tahoma, Geneva, Verdana, sans-serif;
		font-size:2.3vw;
		border-radius:2px;
		float: left;
		color:white;
		margin-left: 1vw;
		margin-right: 1vw;
		margin-top:	1vw;
		margin-bottom:0.5vw;
		border-radius:7px;
		transition-duration: 0.8s;
		padding:1px;
		background-color: #212121E6;
		box-shadow: 1px 1px 1px 1px #36BACFB0;
		padding-left: 0.2em;
		padding-right: 0.2em;
		}
		
				.i1:hover {
		animation:bobb 1s infinite;
		scale: 1.1;
		}

 /*-- Animations --*/
		@keyframes bobb {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(4px) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

		@keyframes cansadooo {
 from {transform: translateY(-3vh); opacity: 0;}
 to {transform: translateY(0vh); opacity: 1;}
	}

			@keyframes espressooo {
 from {transform: translateX(3vh); opacity: 0;}
 to {transform: translateY(0vh); opacity: 1;}
	}
				@keyframes espressoo {
 from {transform: translateX(-3vh); opacity: 0;}
 to {transform: translateY(0vh); opacity: 1;}
	}
	
 /*-- Links --*/
 
		a:link {
		color: #FAFAFA;
		text-decoration: none;
	}

	a:visited {
		color: #FAFAFA;
	}

	a:hover {
		color: #ffc0c0;
	}

	a:active {
		text-decoration-line: underline;
		color:powderblue;;
			}

/*--- General Style Classes ---*/
			
				/*I like hyprland :)*/
				
			.hyprlink {#42445A
				text-decoration-line: underline;
			}

			.hyprimage {
				width: 18vw;
				border: solid #2dc9d7 2px;
				border-radius: 15px;
				transition-duration: 1s;
				animation: cansadooo 1s;
				animation-fill-mode: backwards;
			}
			.hyprimage:hover {
				border: solid #1dffc1 4px;
				border-radius: 40px;
				scale: 1.6;
				animation-timing-function: ease;
			}

			.hyprlist {
				list-style-type: none;
			}

			hr {
				border-color: #cd9e88;
				animation-name: cansadooo;
				animation-fill-mode: backwards;
				animation-duration: 1s;
			}

            .divvv {
                margin-top: 10%;
            }

/*--Spec for Nav--*/
			.navicon {
				display:none;
			}

			#hamburger {
				display:none;
			}
			
				.active.i1 {
	border-bottom: solid 3px #33ff6d;
	box-shadow: none;
	}

	#fful {
					list-style-type: circle;
					color: white;
					font-family: 'Trebuchet MS', "Ubuntu", Tahoma, Verdana, sans-serif;
				}
/*--- General Again ---*/
			.adrian {
					background-color: #21212150;
					color: white;
					width: fit-content;
					padding: 4px;
					margin-left: 4px;
					border-radius: 10px;
					font-size: 250%;
					animation: espressoo 1s;
					animation-fill-mode: backwards;
					box-shadow: 2px 2px 2px 2px #21212199;
					font-family: "Ubuntu", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
				}
				.adrianh {
					background-color: #21212150;
					color: white;
					width: fit-content;
					padding: 4px;
					margin-left: 4px;
					font-size: 250%;
					border: solid #2ddbebE6 3px;
					border-radius: 10px;
					animation: espressoo 1s;
					animation-fill-mode: backwards;
					box-shadow: 2px 2px 2px 2px #21212199;
					font-family: "Ubuntu", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
				}

			.adrianl {
					background-color: #21212150;
					color: white;
					width: fit-content;
					padding: 4px;
					margin-left: 4px;
					font-size: 180%;
					border-radius: 10px;
					animation: espressoo 1s;
					animation-fill-mode: backwards;
					box-shadow: 2px 2px 2px 2px #21212199;
					font-family: "Ubuntu", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
				}

			.sllas {
					background-color: #21212150;
					color: white;
					width: fit-content;
					padding: 4px;
					font-size: 140%;
					border: solid #2ddbebE6 3px;
					border-radius: 10px;
					animation: espressoo 1s;
					animation-fill-mode: backwards;
					box-shadow: 2px 2px 2px 2px #21212199;
					font-family: 'Trebuchet MS', NunitoSans, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
				}

		footer {
		background-color: #21212199;
		height: fit-content;
		margin:1%;
		padding: 1%;
		color: white;
		font-family: 'Trebuchet MS', NunitoSans, 'Segoe UI', Tahoma, Verdana, serif; 
		font-size: 1.2em;
		width: fit-content;
		border: solid #40A4DA 3px;
		border-radius: 10px;
		transition-duration: 1s;
	}
		footer:hover {
			transform: scale(1.2);
		}
		
		.notepaad {
			animation: cansadooo 1s;
			animation-fill-mode: backwards;
			margin-right: 5%;
			margin-left: 5%;
			color: white;
			font-family: NunitoSans, Verdana, sans-serif;
			font-size: 1.5vw;
		}

				.wuhble {
			animation: cansadooo 1s;
			animation-fill-mode: backwards;
			margin-right: 5%;
			margin-left: 5%;
			color: white;
			font-family: NunitoSans, Verdana, sans-serif;
			font-size: 130%;
			background-color: #21212199;
			padding: 4px;
			width: fit-content;
			border-radius: 10px;
		}

			/*Will apply different styling, size, and navigation menu to portrait oriented devices*/

    		@media (orientation: portrait) {
		#lul {
			background-color:#41414190;
			backdrop-filter: blur(10px);
			border:none;
	    width:100%;
	    margin:0;
	    left:0;
margin-left:0;
top:0;
position:fixed;
border-bottom: solid #40a4da 2px;
		}
		#buttona {
			font-size: 4vw;
			color: black;
			width:40vw;
			margin-top: 1vw;
			margin-left: 4vw;
			position: relative;
		}
		#buttona:hover {
			width:50vw;
		}
		
		.i1:hover {
			animation:none;
			transform: scale(1.1);
		}
		
		.i1 {
	display: none;
	font-size:8vw;
	clear:both;
	height:50%;
	margin-top:5%;
	margin-bottom: 5%;
	border-bottom: solid 3px #B1C8EE;
	background-color: #50505360;
	padding:2px;
	border-radius:8px;
	float:right;
	transition-duration: 1s;
}
/*Todo note from me: so instead of toggling this display add a thing to #lul or something that will have an open class added to it so that it can be more adaptive and maybe put in some more animations and transitions and hover things.*/
.i1.showman {
	display: block;
	position: relative;
	animation-name: espressooo;
	animation-duration: 0.8s;
}

		.navicon {
			display:block;
			background-color: whitesmoke;
			width:8vw;
			height:2px;
			margin:3vw 0;
			margin-left:2vw;
			border-radius: 35px;
		}
		#hamburger {
			float:right;
			display:block;
			margin-right: 2vw;
			transition-duration: 0.3s;
			transition-timing-function: ease-in-out;
		}
		#nldt {
			display:none;
		}
		#nldtb {
			font-size: 8vw !important;
		}
		footer {
			width: fit-content;
		}
}