section.cards_container{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  }

article.card{
  width: 30%; 
	min-width: 235px;
	max-width: 340px;
	text-align: center;
	padding: 1rem;
	border: 1px solid #CCCCCC;
	margin: 2rem 0.5rem;
  flex-grow: 1;
  transition: width 1s, box-shadow 1s, opacity 1s;	
	}
  	
article.card:hover{
	width: 30%;
	box-shadow: 2px 4px 8px 1px #595959; 
  opacity: 1;
	transition: width 1s, box-shadow 1s, opacity 1s;
	}

.websites {
    background-image: linear-gradient(to right, #d9d9d9, #e6e6e6, #d9d9d9), url('../img/matrix.jpg');
    opacity: 0.6;
  }

.guis{
	background-image: linear-gradient(to right, #d9d9d9, #e6e6e6, #d9d9d9), url('../img/leather_backgr.png');
  opacity: 0.6;
  }

.languages {
	background-image: linear-gradient(to right, #d9d9d9, #e6e6e6, #d9d9d9), url('../img/wood_backgr.png');
  opacity: 0.6;
  }

img.article_img{
	width: 100%;
	margin: 0.5rem 0;
	}	

div.to_more{
  font-weight: bold;
	width: 75%;
	margin: 5px auto 10px auto;
	border-radius: 25px 25px;
	background-color: #ffffcc;
	opacity: 0.4;
	transition: opacity 1.5s, background-color 2s;
  }

div.to_more:hover{
  background-color: #33cc33;/* #80ff80; */
	border-radius: 25px 25px;  
	opacity: 0.99;
	transition: opacity 1.5s, background-color 2s;
  }