.animate {
		  transition: all 0.1s;
		  -webkit-transition: all 0.1s;
		}

		.action-button {
		  position: relative;
		  padding: 5px 10px;
		  margin: 0px 10px 10px 0px;
		  float: center;
		  border-radius: 8px;
		  font-family: 'Rubik', sans-serif;
		  font-size: 20px;
		  color: #FFF;
		  text-decoration: none;
		}

		.blue {
		  background-color: #3498DB;
		  border-bottom: 5px solid #2980B9;
		  text-shadow: 0px -2px #2980B9;
		}

		.red {
		  background-color: #E74C3C;
		  border-bottom: 5px solid #BD3E31;
		  text-shadow: 0px -2px #BD3E31;
		}

		.green {
		  background-color: #82BF56;
		  border-bottom: 5px solid #669644;
		  text-shadow: 0px -2px #669644;
		}

		.yellow {
		  background-color: #F2CF66;
		  border-bottom: 5px solid #D1B358;
		  text-shadow: 0px -2px #D1B358;
		}

		.action-button:active {
		  transform: translate(0px, 5px);
		  -webkit-transform: translate(0px, 5px);
		  border-bottom: 1px solid;
		}
 h2 {

   font-family: serifbold;

   color: black;

   text-align: center;
 }

.blog {
  display: block; /* Change from flex to block */
  clear: both; /* Clear any floats before displaying */
  margin-top: 20px; /* Add margin-top to create space between the content above */
}
.blog2 {
  max-width: 800px;
  width: 100%;
}
 
 .wrapper {
   margin: auto;
   max-width: 500px;
   width: 98%;
   box-shadow: 9px 9px 8px #8c8c8c,
     -29px -29px 58px #ffffff;
   border-radius: 10px;
   overflow: hidden;

 }

 :root {
   --plyr-color-main: #25d366;
   --plyr-video-control-color: #e8ffba;
 }


.padding-md {
  padding: 20px;
}

.intro {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}



.bg-main {
    background-attachment: fixed;
    background-image: url('https://images.unsplash.com/photo-1519882189396-71f93cb4714b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-position: center;
    background-size: cover;
}

a {
    text-decoration: none;
}
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.center {
    align-items: center;
    justify-content: center;
}


.mt-2 {
    margin-top: 2rem;
}

.wrapper {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.padding-md {
    padding: 1rem 1rem;
}


h2 {
    font-size: 1.2rem;
}

.post p {
    margin-bottom: 1rem;
}

.col{
  padding: 0px
}
/* structure */


.header {
    border: 1px solid #4f3232;
    background-color: rgba(244, 244, 249, 0.8);
}

main {
    background-color: rgba(244, 244, 249, 0.8);
    border: 1px solid #4f3232;
    margin-top: 1rem;
}
.post img {
  align-items: center;
  width: 100%;
  height: auto;
  
}