body{
   font-family: 'Inter var',sans-serif;
   margin: 0px;
   padding: 0px;
   background-color: #ffffff;
 }
ul{
   list-style-type: none;
   display: inline-flex;
 }
a{
   text-decoration: none;
   /*display: inline-flex;*/
   color: #000;
}
/*span{
  font-weight: bolder;
  font-size: 16px;
  color: red;
}*/
h2{
  margin: 0px;
}
hr{
  border: 0px;
  border-top: 1px solid #d7d7d7;
  border-bottom: 0px;
  width: 36.3%;
}
button{
  background-color: inherit;
  border: 0px;
  font-size: 13px;
}
.header{
  width: 100%;
  margin: 0px;
  text-align: center;
}
.header-img{
  display: inline-block;
}
.header-img img{
  width: 200px;
  height: 202.7px;
  margin-bottom: -70px;
}
.header-text{
  display: inline-block;
  padding: 20px;
}
.header-text h1{
  font-size: 76px;
}
.menu-bar{
  background-color: #ffffff;
  text-align: center;
  padding: 5px;
}
.ul-a-links a{
  padding: 15px;
}
.ul-a-links-info{
  margin-left: auto;
  padding: 0px 25px 0px 25px;
}
.menu-svg a{

}
.menu-svg{
  margin-right:35px;
}
.menu-svg ul{
  display: inline-block;
}
.article{
  margin: 0px;
  text-align: center;
}
.box{
  width: 25%;
  display: inline-flex;
  padding: 35px;
}
.img img{
  width: 280px;
  height: 280px;
}
.side-box{
  padding: 10px;
}
.title{
  font-size: 18px;
}
.author{
  margin: auto;
}
.description{
  font-size: 14px;
}
.description, .title, .tags{
  text-align: left;
}
.tags{
  color: #4d69f6;
  font-size: 12px;
}
.footer{
  background-color: #f5f6f7;
  text-align: center;
}
.footer-links a{
  padding: 0px 20px 0px 20px;
  font-weight: normal;
}
.description-footer{
  margin: auto;
  width: 33.3%;
  padding: 5px;
}
.copyright{
  padding: 0px 0px 5px 0px;
  margin-top: -10px;
}
.menu-svg img{
  width: 30px;
  height: 30px;
  filter: grayscale(1);
}
.description-datetime p{
  margin: 0px;
  padding: 0px;
  font-size: 15px;
}
.hd-title{
  text-align:center;
  padding: 20px;
}
.hd-img img{
  width: 290px;
  padding: 10px;
}
.article-text{
  width: 24%;
  margin: auto;
  text-align: left;
}
.article-img img{
  width: 585px;
  padding: 5px;
}
.twitter-tweet{
  margin:auto;
}
.faq{
  width: 30%;
  margin:auto;
}
@media screen and (max-width: 1080px){
	#green{
		height: 585px;
	}
	#blue, #orange{
		height: 375px;
	}
	#yellow{
		height: 750px;
	}
	#purple{
		height: 124px;
	}
}
@media screen and (max-width: 1920px){
  .img img{
    width: 240px;
    height: 240px;
	}
  .tags{
    font-size: 10px;
  }
  .box{
    width: 29%;
  }
  .title{
    font-size: 16px;
  }
  .description{
    font-size: 12px;
  }
}
@media screen and (max-width: 1366px){
  .img img{
    width: 220px;
    height: 220px;
	}
  .tags{
    font-size: 10px;
  }
  .box{
    width: 36%;
  }
  .title{
    font-size: 13px;
  }
  .description{
    font-size: 10px;
  }
}
@media screen and (max-width: 414px){
  .img img{
    width: 180px;
    height: 180px;
	}
  .tags{
    font-size: 11px;
  }
  .box{
    width: 100%;
    display: block;
    padding: 0px;
    margin: auto;
  }
  .title h2{
    font-size: 24px;
  }
  .description{
    font-size: 14px;
  }
  .description-footer{
    width: 68.3%;
  }
  .header-img img{
    margin-bottom: 0px;
  }
  .header-img{
    display: none;
  }
  .header-text h1{
    font-size: 62px;
  }
  .header-text{
    display: block;
    padding: 0px;
  }
  .menu-bar{
    padding: 0px;
    margin: 0px;
  }
  .ul-a-links a {
    padding: 10px;
  }
  li{
    padding: 5px;
  }
  ul{
    display: block;
    margin-right: 35px;
  }
  .article{
  }
  hr{
    width: 75%;
  }
  .menu-svg{
    margin-right: 0px;
  }
  a{
    display: inline-flex;
  }
}
@media screen and (max-width: 1080px){
  .img img{
    width: 220px;
    height: 220px;
	}
  .tags{
    font-size: 10px;
  }
  .box{
    width: 36%;
  }
  .title{
    font-size: 13px;
  }
  .description{
    font-size: 10px;
  }
}
@media screen and (max-width: 780px){
  .img img{
    width: 220px;
    height: 220px;
	}
  .tags{
    font-size: 10px;
  }
  .box{
    width: 36%;
  }
  .title{
    font-size: 13px;
  }
  .description{
    font-size: 10px;
  }
}