*{
	margin: 0;
	padding: 0;
	text-decoration:none;
	box-sizing: border-box;
	list-style: none;
  
  }
  
  header{
	  top:0;
	  right:0;
	  left: 0;
	  background-color:#f1f1f1;
	  width:100%;
	  height:100px;
	  }
  header .header-brand{
	  font-family:sans-serif;
	  font-size:24px;
	  font-weight:900px;
	  font-style:bold;
	  color:#111;
	  text-transform:uppercase;
	  display:block;
	  margin:0 auto;
	  text-align: center;
	  padding:20px 0 ;
  
  }
  header nav ul{
	  display:block;
  margin:0 auto;
  width:fit-content;
  }
  header nav ul li{
	  display:inline-block;
	  list-style:none;
	  padding: 0 16px;
  }
  header nav ul li a{
	  font-family:sans-serif;
	  font-size:14px;
	  color:#111;
	  text-transform:uppercase;
  }
  header .header-cases{
	  display:none;
  }
   @media only  screen and ( min-width:1000px){
	   header .header-brand{
	  margin:  31px 0 ;
	  text-align: left;
	  line-height:38px;
	  padding:0px 20px 0px 40px ;
	  border-right:3px solid #111;
	  float:left;
  }
  header .header-brand:hover{
	  color: darkcyan;
  }
  
	  header nav ul{
	  display:block;
  margin:20px 20px ;
  float:left;
  }
  
  header nav ul li a{
	  line-height:60px;
	  font-size: 24px;		
  }
  header nav ul li a:hover{
	  color: goldenrod;		
  }
  
   }
  
  /*body------*/
  .main{
	background-image: url(img/bac.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	backdrop-filter: 20%;

  }
 h1{
	text-align: center;
	text-shadow: 1px 1px darkgoldenrod;
	font-family: san;
}
  .main-image{
	  margin-top: 20px;
  }
  .main-image :nth-child(2){
margin-left: auto;
  }
.images{
  border: 2px solid #000;
  width: 200px;
  position: relative;
  overflow: hidden;
}
.images img{
	width: 100%;
	height: auto;
}

.content {
	color: whitesmoke;
	background: rgba(0,0,0,0.5);
	position: absolute;
	top: -100%;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 20px;
	transition: all 0.5s;
	box-shadow: 4px 4px  6px cyan inset ;
	display: flex;
	justify-content: center;
	align-items: center;
}

.content h3 {
	font-family: cursive;
	text-shadow: 1px 1px black;
	border-top: 2px solid whitesmoke;
	border-bottom: 2px solid whitesmoke;
	padding: 3%;
}

.images:hover .content{
	top: 0;
}
.text{
	padding: 4%;
	margin-top: 10px;
	
}
 
.text p{
	font-size: x-large;
	padding: 3%;
	font-weight: bold;
	border-bottom: 2px solid black;
}
  /* footer */
  #footer{
	  margin: auto;
	  padding: 4%;
	  height: fit-content;
	  background-color:rgba(27,31,34,0.85) ;
	  
  }
  #footer h1{
	  color: white;
	  text-align: center;
	  font-size: 2rem;
	  font-weight: bold;
	  font-family: sans-serif;
	  text-shadow: 1px 1px cyan;
	 }
	  .name{
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  font-size: 2rem;
		  letter-spacing: .2rem;
		  margin-bottom: 15px;
	  }
	  .name span{
		  color: honeydew;
	  }
	  .links{
		  font-size: 1.2em;
		  text-align: center;
	  }
	  .copy{
		  text-align: center;
		  line-height: 1.2em;
	  }

	  @media only  screen and ( min-width:500px){
	
		.main{
			width: 50%;
			margin: 20px auto;

		}
		.main-image :nth-child(1){
			margin-left: unset;
			float: right;
			margin-left: 10px;
			  }
			  .main-image :nth-child(2){
				margin-left: unset;
				float: right;
				margin-left: 10px;
				  }
				  .main-image :nth-child(3){
					margin-left: unset;
					float: right;
					  }
					  .content {
					left: -5%;
					
					}

	  }