@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto&display=swap');


*{
	margin:0;
	padding:0;
}
body{
	background-color:#202124;
}
.navbar{
	display:flex;
	flex-direction:row;
	height:8vh;
	width:100vw;
	background-color:#202124;
}
.menu{
	filter:invert(100%);
	height:25px;
	margin:15px;
}
.all{
	height:25px;
	width:30px;
	margin-top:15px;
	text-align: center;
}
.alltext{
	color:#8A8A8A;
	font-size:0.9rem;
	font-family: 'Roboto', sans-serif;
}
.images{
	height:25px;
	width:50px;
	margin:15px;
	text-align: center;
}
.imagestext{
	color:#8A8A8A;
	font-size:0.9rem;
	font-family: 'Roboto', sans-serif;
}
.alltext:hover{
	color:#8AB4F8;
	cursor:pointer;
	user-select: none
}
.all:hover{
	border-bottom:2px solid #8AB4F8;
}
.imagestext:hover{
	color:#8AB4F8;
	cursor:pointer;
	user-select: none
}
.images:hover{
	border-bottom:2px solid #8AB4F8;
}
.apps{
	width:25px;
	height:25px;
	margin:15px;
	margin-left: auto;
	filter:invert(100%);
}
.acc{
	width:30px;
	height:30px;
	margin-top:14px;
	margin-right:15px;
	filter:invert(100%);
}
.logo-container{
	margin-top:5vh;
}
.logo{
	margin-left: auto;
  	margin-right: auto;
	display: block;
	width:150px;
}
.search-container{
	margin-top:4vh;
}
.search{
	max-width:700px;
	width:90%;
	border-radius:40px;
	height:40px;
	border:1px solid #70757A;
	margin-left: auto;
	margin-right: auto;
 	display: block;
	background-color:#202124;
	color:white;
	font-size:1rem;
}
.offered{
	margin-top:4vh;
}
.gfi{
	text-align: center;
	color:#aaafbd;
	font-family: 'Roboto', sans-serif;
}
.langs{
	height:6vh;
	width:90vw;
	margin-left: auto;
	margin-right: auto;
 	display: flex;
	flex-direction: row;
	max-width:600px;
	flex-wrap: wrap;
}
.lang-item{
	margin-left: auto;
	margin-right: auto;
 	display: block;
	text-decoration:none;
	color:#8AB4F8;
	font-size:1rem;
	font-family: 'Roboto', sans-serif;
	padding-left:10px;
}
.trend-container{
	margin-top:2vh;
	margin-left: auto;
	margin-right: auto;
 	display: block;
	width:85vw;
}
.trend-head{
	color:white;
	font-family:sans-serif;
	font-size:1.1rem;
}
.opt{
	color:white;
	font-family:sans-serif;
	font-size:1.2rem;
	float:right;
}
.trend-body{
	margin-top:3vh;
	display:flex;
	flex-direction: column;
}
.rise{
	height:20px;
	filter:invert(100%);
	margin-right:10px;
}
.body-item{
	padding:15px;
	border-bottom: 1px solid #70757A;
	color:white;
	font-family:sans-serif;
	font-size:1rem;
}
.foot1{
	margin-top:100px;
	background-color:#171717;
	height:4vh;
	width:100vw;
	padding-top:10px;
	bottom:0;
}
.country{
	color:#70757A;
	font-family:sans-serif;
	margin-left:10px;

}
.foot3{
	display:flex;
	margin-top:1px;
	background-color:#171717;
	height: 14vh;
	width:100vw;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.info-content{
	display:none;
	background-color:#171717;
	height: 10vh;
	width:40vw;
	color:#70757A;
	font-family:sans-serif;
	margin:25px;
	font-size:0.9rem;
}
.settings{
	background-color:#171717;
	height: 1vh;
	width:25vw;
	color:#70757A;
	font-family:sans-serif;
	margin:10px;
	font-size:0.9rem;
}
.foot{
	margin-left:20px;
}
.setting{
	display:none;
	font-size:0.9rem;
	color:#70757A;
	font-family:sans-serif;
	margin-top:20px;
	margin-left: auto;
}
.btns{
	display:none;
	justify-content: center;
	margin-top:20px;
	color:#70757A;
}
.buttons{
	border:none;
	border-radius:5px;
	margin-left:20px;
	height:35px;
	width:130px;
	color:white;
	background-color:#303134;
}

@media only screen and (min-width: 1080px) {
	#foot2{
		display:none;
	}
	.trend-container{
		display:none;
	}
	.logo{
		width:300px;
	}
	footer{
		position:fixed;
		bottom:0;
	}
	.btns{
		display:flex;
	}
	.search{
		width:45%;
		height:45px;
	}
	.menu, .all, .images{
		display:none;
	}
	.country{
		margin-left:30px;
	}
	.settings{
		display:none;
	}
	.setting{
		display:flex;
	}
	.info-content{
		display:flex;
	}
	
  }