@charset "utf-8";
/* CSS Document */

/* Title of the blog*/
.blog-title div {
	padding: 5px;
	margin: 5px;
}
/* container of blog categories*/
.blog-categories {
	display: flex; /* flex container*/
	flex-flow: row wrap; /* direction row with no wrap*/
	justify-content: center; /* centered */
}
/* button category */
.btn-blog-category {
	border: none;
  	outline: 0;
  	display: inline-block;
  	padding: 5px 10px;
	margin: 10px;
  	color: white;
  	background-color: mediumaquamarine;
  	text-align: center;
  	cursor: pointer;
}

/* effect hover and active*/
.btn-blog-category:hover, .active {
	background-color: orangered;
}

/*******blogs-section**********/
/* all blogs in a flex container*/
.blog-container {
    display: flex; /*flex container*/
    flex-direction: column; /* dispaly column in small size screen*/
    flex-wrap: nowrap; /* no wrap as single column */
}

/* container of blogs for medium screens*/
@media screen and (min-width: 750px){
    .blog-container {
        display: flex;
        flex-direction: row; /* row display for medium screens*/
        flex-wrap: wrap; /* allow wrap */
    }
    /* medium screens display 2 columns only */
    .blog-column {
        flex-basis: 50%; /* starting column width */
        margin-bottom: 16px;
        padding: 0 8px;   
    }
}
 /* blogs container for large screens */
@media screen and (min-width: 1008px){
    .blog-container {
        display: flex; /* flex container */
        flex-direction: row; /* dispaly in rows */
        flex-wrap: wrap; /* wrapping allowed */
    }
    /* 3 column will be displaye din large screens*/
    .blog-column {
        flex-basis: 33%; /* initial column width */
        margin-bottom: 16px;
        padding: 0 8px;   
    }
}
/* card of every blog */
.blog-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* shadow position and color*/
    margin: 15px;
    display: block;
    height: 100%; /* full height*/
}

.blog-card img {
    width: 100%; /* all width of container*/
}

.blog-content-wrapper {
  padding: 0px 16px; /* place content top and 16 pixel right*/

}
/* summary of article*/
.blog-intro {
    position: relative;
    width: 100%;
    overflow: hidden;
}


.blog-category {
	background-color: cadetblue;
  	color: white;
	padding: 3px 10px;
	text-align: center;
	margin: 10px 0; /* 10 margin to and bottom 0 on the sides*/
}

/* link styled as button*/
.blog-read-btn {
    width: 55%;
    position: relative;
    display: block;
    bottom: 10px;
}
/* change colour on hhover*/
.button:hover {
  background-color: #555;
}


/************ BLOG ARTICLE***************/
/* displays the articles */
.size-container{text-align: center;}

/* icon to increase font size */
#font-larger{
    display: inline-block; /* in line with the smaller Icon*/
    font-family: fantasy; /* any fantasy font the browser chooses */
    font-size: 30px; /* size to 30px*/
    text-align: center;
    margin: 20px; /* distance from other elements*/
    padding: 10px;
    cursor: pointer; /* cursor becomes pointer on hover */
}
/* icon to decrease font size */
#font-smaller{
    display: inline-block;
    font-family: fantasy;
    font-size: 24px;
    text-align: center;
    padding: 10px;
    margin: 20px;
    margin: auto;
    cursor: pointer;
}

/* container of the blog title*/
.single-blog-title {
	width: 70%;
	background-color: white;
	text-align: center;
	margin: auto;
}

/* COntainer for the blog image */
.blogs-image{
	width: 70%;
	background-color: white;
	margin: auto;
    overflow: hidden; /* overflow is not displayed */
}

/* Image takes all width of container*/
.blogs-image img {
    width: 100%;
}

/* text takes all width of container*/
.blogs-text {
	width: 100%;
	background-color: white;
	padding: 20px;
}
 /* add extra space on bottom */
.resources-wrapper, .details-wrapper {
	padding-bottom: 10px;
}