@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:200,300,400,500,600,700,800,900&display=swap');

*{
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-drag: none;
    outline: none;
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
}
@font-face{
	font-family: "SFPro";
	src: url("src/fonts/SFProDisplay-Regular.ttf");

}
::-webkit-scrollbar {
    width: 12px;
}

.scrollbar{
}
::-webkit-scrollbar-thumb {
    /*border-radius: 10px;*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1); 
}


@media (min-width: 1370px){
    body{	
        display: none;
    }
}
.desktop-navigation::-webkit-scrollbar{
	display: none;
}
@media  (min-width: 673px){/*desktop_devices*/
    body{
    	--card: rgba(0,0,0,0.5);
    	--white: rgba(255,255,255,0.6);
    	--black: rgba(25, 25, 25, 0.6);
    	--yellow: #F2E22E;
    	--orange: #FF590D;
    	--red: red;
    	--green: #00FFD4;
        width: 100%;
        min-height: 100%;
        
        display: flex;
        flex-direction: column;
        font-family: Poppins, sans-serif;
        align-items: center;
        overflow: hidden;
    }
    body.active{
		background: rgba(4, 17, 27, 1);
        background-image: url("https://i.annihil.us/u/prod/marvel/images/OpenGraph-TW-1200x630.jpg") !important;
        background-size: contain;
        background-repeat: no-repeat;
	}
			.project-container{
				width: 100%;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
					.project-title{
						width: 1100px;
						height: 500px;
						font-size: 5em;
						text-align: center;
						transform: rotate(270deg);
						line-height: 50px;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;
						background: var(--yellow);
						color: var(--orange);
					}
					.projects{
					    display: flex;
					    flex-wrap: wrap;
					    align-items: center;
					    justify-content: center;
					}
							.project{
								width: 250px;
							    height: 125px;
							    background: var(--yellow);
							    color: white;
							    font-family: Poppins, sans-serif;
							    border-radius: 5px;
							    transition: 0.3s;
							    display: flex;
							    justify-content: center;
							    align-items: center;
							    text-decoration: none;
							    margin: 0 20px 25px 0;
							}
							.project:hover{
								transform: scale(1.2);
								opacity: 1;
								background: var(--white);
							}
					.projects a h1{
						font-size: 2.2em;
						font-weight: 600;
						color: var(--orange);
						opacity: 1;
					}
					.projects a ion-icon, .projects a img{
						position: absolute;
						width: 48px;
						height: 48px;
						color: var(--orange);
						opacity: 0;
					}
					.projects a img{
						width: 48px;
						height: 48px;
					}
					.projects a:hover h1{
						opacity: 0;
						z-index: 0;
					}
					.projects a:hover ion-icon, .projects a:hover img{
						opacity: 1;
						z-index: 1;
					}

			
			.introduction{
				width: 100%;
				height: 100vh;
				display: flex;
				flex-direction: column;
				text-align: center;
				background-image: url("https://i.annihil.us/u/prod/marvel/images/OpenGraph-TW-1200x630.jpg");
				background-repeat: no-repeat;
				background-size: cover; 
			}
					.introduction h1{
						top: 75vh;
						position: relative;
						line-height: 75px;
						word-spacing: 5px;
						letter-spacing: 4px;
						font-size: 2.9em;
						text-transform: capitalize;
						background-clip: text;
						-webkit-background-clip: text;
						background-image: url("https://unsplash.it/1360");
						color: transparent;
					}

			/*
			.circle-background{
				width: 100%;
				font-family: Poppins, sans-serif;
				font-size: 1.2em;
				position: relative;
				font-weight: 200;
			}
					.circle-container .circle1{
						width: 60px;
						height: 60px;
						background: var(--black);
						border-radius: 50%;
						position: relative;
						filter: blur(20px);
					}
					.circle-container .circle2{
						width: 120px;
						height: 120px;
						background: var(--black);
						border-radius: 50%;
						position: relative;
						left: 5%;
						filter: blur(20px);
					}
					.circle-container .circle3{
						width: 275px;
						height: 310px;
						background: var(--black);
						position: absolute;
						border-radius: 50%;
						display: flex;
						align-items: center;
						flex-direction: column;
						text-align: center;
						left: 7%;
						top: 15%;
						transform: scaleY(0.9) rotateX(-30deg) rotateY(30deg);
					}
							.circle-container .circle3 h1{
								position: relative;
								margin: 5px;
								font-size: 2em;
								font-weight: 400;
								top: 80px;
								color: white;
							}
							.circle-container .circle3 .circle1{
								position: relative;
								left: -100%;
								bottom: 10%;
							}
							.circle-container .circle3 .circle2{
								position: relative;
								left: 20%;
								bottom: -90%;
								filter: blur(10px);
							}
					.circle-container .circle4{
						width: 350px;
						border-radius: 50%;
						height: 350px;
						background: var(--black);
						position: absolute;
						left: 25%;
						bottom: 10%;
					}/*
							.circle-container .circle4 h1{
								position: relative;
								top: 25%;
								text-align: center;
								flex-wrap: wrap;
								font-weight: 400;
								font-size: 2em;
								color: white;
							}*/
			.android-navigation, .hint{
				display: none;
			}
			.desktop-navigation{
				width: 25%;
				height: 50px;
				background: rgba(255, 255, 255, 1);
				box-sizing: initial;
				position: fixed;
				display: flex;
				justify-content: center;
				box-shadow: 0 8px 32px #000;
				overflow-x: hidden;
				transition: 0.5s;
				z-index: 1;
			}
					.desktop-navigation:hover{
						height: 560px;
						background: white;
						z-index: 2;
					}
					/*.desktop-navigation:hover ul li a{
						transform: translateX(50%);
					}*/
					.desktop-navigation ul{
						width: 100%;
						position: absolute;
						padding-top: 60px;
						top: 0;
						left: 0;
					}
							.desktop-navigation ul li{
								width: 100%;
								list-style: none;
								position: relative;
							}
							.desktop-navigation ul li.active a .title,.desktop-navigation ul li.active a,.desktop-navigation ul li.active a .icon{
								color: white;
								background: rgba(0,0,0,1);
							}
									.desktop-navigation ul li a{
										position: relative;
										width: 100%;
										display: flex;
										text-decoration: none;
										color: white;
									}
											.desktop-navigation ul li a .icon{
												position: relative;
												display: block;
												min-width: 60px;
												height: 50px;
												line-height: 60px;
												text-align: center;
												top: 5px;
												color: black;
											}
											.desktop-navigation ul li a .icon ion-icon{
												font-size: 1.5em;
											}
											.desktop-navigation ul li a .title{
												position: relative;
												display: block;
												padding-left: 10px;
												height: 60px;
												line-height: 60px;
												white-space: normal;
												color: black;
											}

					body.active .desktop-navigation:hover, body.active .desktop-navigation{
						background: black;
					}
					body.active .desktop-navigation ul li a .title, body.active .desktop-navigation ul li a .icon ion-icon{
						color: var(--orange);
					}
					body.active .desktop-navigation ul li.active a .title{
						background: var(--orange);
						color: var(--yellow);
					}
					body.active .desktop-navigation ul li.active a .icon ion-icon, body.active .desktop-navigation ul li.active a .icon{
						background: var(--orange);
						color: var(--yellow);
					}
					body.active .desktop-navigation ul li.active a{
						background: var(--orange);
						color: var(--yellow);
					}
					body.active .desktop-navigation h1{
						color: var(--orange);
					}
					body.active .about, body.active .about ion-icon{
						color: var(--orange);
					}
					.desktop-navigation ul li.active a{
						color: #333;
					}
			.contact-form{
				width: 100%;
				height: 100vh;
				background: var(--white);
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: SFPro;
			}
					.contact{
						width: 600px;
						height: 600px;
						border-radius: 20px;
						background: var(--orange);
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						text-align: center;
						transition: 0.7s;
					}
					#form{
						color: white;
						display: flex;
						flex-wrap: wrap;
						font-size: 22px;
						line-height: 40px;
					}
					#input{
						width: 450px; 
						height: 25px;
						border-radius: 4px;
						border: none;
						font-family: SFPro;
						text-align: center;
						resize: none;
						font-size: 1em;
						line-height: 25px;
					}
					textarea:nth-child(8){
						min-height: 200px !important;
						display: flex;
						flex-wrap: wrap;
						resize: vertical !important;
					}
					#submit-btn{
						width: 80px;
						height: 35px;
						outline: none;
						font-size: 1.1em;
						font-weight: 700;
						position: relative;
						top: 25px;
						cursor: pointer;
						border-radius: 4px;
						background: #FF69B4;
						border: none;
					}
					.Download{
						width: 200px;
						height: 150px;
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin: 0 0 0 250px;
						border-radius: 20px;
						background: var(--yellow);
					}
					.file-name{
						font-size: 1em;
						margin: 0 0 20px 0;
					}
			.fmplayer{
				width: 100%;
				height: 100vh;
				background: var(--white);
				display: flex;
				justify-content: center;
				align-items: center;
			}
					.u93{
						width: 800px;
						height: 400px;
						border-radius: 5px;

					}
					.fmplayer h1{
						margin: 20px;
						font-size: 3.5em;
						color: var(--orange);
					}
					.fmplayer h2{
						margin: 20px;
						color: black;
					}
			.about{
				width: 100%;
				height: 100vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
					.about .aboutme{
						display: flex;
						justify-content: space-between;
					}
					.about .profile-links{
						width: 100%;
						height: content;
						background: var(--green);
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						top: 5em;
					}
					.about .profile-links ion-icon{
						color: var(--black);
						font-size: 3em;
					}
					.about .profile-image{
						width: 7em;
						height: 7em;
						background: lightgreen;
						background-image: url(https://media-exp1.licdn.com/dms/image/D5603AQFyTfl1zjYOUg/profile-displayphoto-shrink_100_100/0/1630733315841?e=1637193600&v=beta&t=MaKA-8mjOUi9RoizGsH1hEcCiqKzqWcWogH8zCeENws);
						border-radius: 50%;
						background-size: cover;
						--web-kit-box-reflect: 2px 2px 2px 2px #000000;
					}
					.aboutme{
						display: flex;
					}

			.experiments{
				width: 100%;
				height: 90vh;
				position: relative;
				background: var(--black);
			}
			.element1{
				width: 40vw;
				height: 40vw;
				background: var(--white);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.element1 code{
				background: var(--black);
				color: white;
			}
			.element1 code textarea{
				width: 20em;
				height: 2em;
				resize: none;
			}
			.element1 .visual{
				width: 20rem;
				height: 20rem;
				margin: 15px;
			}
			.element1 .visual .sea{
				width: 29rem;
				height: 29rem;
				background: lightblue;
				overflow: hidden;
			}
			.element1 .visual .sea .sun{
				width: 50px;
				height: 50px;
				background: orange;
				border-radius: 50%;
				margin: 40px;
			}
			.element1 .visual .sea .water-flow{
				width: 50em;
				height: 50em;
				background: blue;
				border-radius: 30% 40% 45% 35%;
				position: relative;
				top: 35vh;
				right: 30%;
				animation-name: water-splash;
				animation-iteration-count: infinite;
				animation-duration: 15s;
			}
			@keyframes water-splash{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(360deg);
				}
			}
}