@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,400;1,100;1,300&display=swap');
* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
	--bg-color: #222;
	--fg-color: #EEE;
	--bg-nav: #00FF00;
	--bg-ul: #FFF;
}
body{
    color: var(--fg-color);
	background: var(--bg-color);
   
}
.container {
	position: relative;
	box-sizing: border-box;
	display:block;
	width:100%;
	height:100%;
	text-align: center;
}

.navigation {
    margin:0 auto;
	margin-top:50px;
	position: relative;
    display: flex;
    height: 110px;
    width: 600px;
    justify-content: center;
    align-items: center;
	border-radius:15px;
	background: var(--bg-ul);
}
.navigation ul{
    
    display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
    width:100%;
	
}
.navigation ul li {
    position: relative;
	display:flex;
    list-style: none;
    width:100px;
    height:100px;
    z-index: 1;
	background-color: var(--bg-ul);
	border-radius:50%;
	/*border:3px solid var(--bg-color);*/
	margin: 5px;
	transition:0.5s;
	
}
.navigation ul li.active{
	background-color: var(--bg-nav);
	margin-top: -60px;
}


.navigation ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    width: 100%;
    text-align: center;
	color: var(--bg-color);
}
.navigation ul li a .icon{
    position: relative;
    display: block;
    font-size: 2em;
	transition: 0.5s;
}

.navigation ul li:hover a .icon{
	transform: translateY(-25px);
	font-size: 1.2em;
}

.navigation ul li a .text{
    position: absolute;
	display: block;
    justify-content: center;
    align-items: center;
	transition: 0.5s;
	transition-delay: 0.2s;
	opacity:0;
	

}
.navigation ul li:hover .active a .text {
	transform: translateY(25px);
}

.navigation ul li:hover a .text{
	opacity:1;
}

.toggler {
	position: absolute;
	left:0;
	top:0;
	width: 30px;
	height: 30px;
	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin:0;
	padding:2px;
	display:none;
}
.toggler .bars,
.toggler .bars:before,
.toggler .bars:after {
	display:block;
	background-color:#000;
	width:100%;
	height:4 px;
	border-radius:2px;
	padding:  0;
	positon: absolute;
}
.toggler .bars:before{
	content:'';
	margin-top:-8px;

}
.toggler .bars:after{
	content:'';
	margin-top:12px;

}
.main{
	margin:0 auto;
	paddint-top:10px;
	
}
.car{
	border:none;
	margin:0;
	padding:0;
}
.car img:before{
	content:'';
	background: var(--bg-color);
	box-shedow: 0 0 10px 10px var(--bg-color); 
}