@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@100;200;300;400;500;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:opsz,wght@10..72,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline:opsz,wght@10..72,100..900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins";
}

body {
	background: 1E1E1E;
}

nav ul li {
	list-style-type: none;
	}

nav {
	width: 100%;
	height: 9vh;
	background: black;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 2vh;
	padding: 0 5vh;
	transition: 0.3s all;
	z-index: 2;
	box-shadow: 10px 10px 30px rgba (0 ,0 ,0 ,0.1);
}

nav > a {
	color: white;
    text-decoration: none;
}

nav > ul {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 2vw;
}

nav > ul > li > a{
		color: white;
		text-decoration: none;		
	}

/*Mobile*/
@media screen and (max-width: 768px) {
	nav {
		font-size: 3.5vw;
		height: 8vh;
		padding: 0 5vw;
	}
	
.logo {
	width:100%;
    text-decoration: none;
    display: flex; 
    justify-content: center;
    }
    
.logo1 {
	color: white;
	font-size: 32px;
	}
	
.logo2 {
	color: orange;
	font-size: 18px;
	}

	nav > ul {
		width: 96%;
	    height: 8vh;
	    background: black;
	    display: flex;
    	justify-content: space-evenly;
	    align-items: center;
	    font-family: "Source Sans Pro";
	    position: fixed;
		bottom: 5px;
		left: 2%;
		border-radius: 5px;
		box-shadow: 10px 10px 30px rgba (0 ,0 ,0 ,0.1);
		
	}
	
	nav > ul > li > a {
		color: white;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
	
	nav > ul > li > a > span { 
		text-size: 12px;
		font-weight: 200;
	}
	
	nav > ul > li > a > span:hover { 
		color:orange;
	}
	
	ion-icon {
      font-size: 20px;
      color: orange;
    }
		
}