@import url('https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&family=Outfit&display=swap');
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background-color: hsl(217, 54%, 11%);
	font-family: outfit;
	display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;

}
.container{
	background-color: hsl(216, 50%, 16%);
	max-width: 320px;
	margin: 5% auto;
	border-radius: 10px;
	padding: 15px;
}
.text1{
	font-weight: 600;
	color: white;
	margin-bottom: 10px;
	cursor: pointer

}
p{
	line-height: 20px;
}
.text2{
	color: hsl(215, 51%, 70%)
}
.left{
	float: left;
	color: hsl(178, 100%, 50%);
	font-weight: 400
}
.left img, .right img{
	margin-right: 4px
}
.right{
	float: right;
	color: hsl(215, 51%, 70%);
	font-weight: 400
}
.img-equilibrium{
	border-radius: 10px;
	margin-bottom: 10px
}
.text3{
	margin-top: 12px;
}
.about{
	clear: left;
	margin-top: 23px;
	border-top: 1px solid hsl(215, 51%, 70%);
	padding-top: 12px
}
.about img{
	float: left;
	border:1px solid white;
	border-radius: 50%
}
.about p{
	float: left;
	margin-left: 10px;
	margin-top: 5px;
	color: white
}
.about p{
	color:hsl(215, 51%, 70%);
}
.about span{
	color: white;
	cursor: pointer;
}
.view{
	text-align: center;
	position :absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
	background-color: hsl(178, 100%, 50%);
	opacity: 0.7;
	border-radius: 10px;
	margin-bottom: 14px;
}
.text1:hover, .about span:hover{
	color:hsl(178, 100%, 50%) 
}
.view img{
	margin-top: 41%
}
.img_container{
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.img_container:hover .view{
	display: block;
}
@media screen and (max-width: 470px){
	.container{
		width: 80%;
		padding: 20px
	}
}