@font-face {
    font-family: "Inter_Medium" ;
    src: url(/font/Inter-Medium.ttf);
}
@font-face {
    font-family: "Inter_Regular" ;
    src: url(/font/Inter-Regular.ttf);
}
@font-face {
    font-family: "Lexend" ;
    src: url(/font//LexendDeca-Regular.ttf);
}

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html{
    font-size: 18px ;
    color: black ;
    font-family:"Lexend";
    background-color: #F3F5F7;
}

header{
    padding-block: 1rem 2rem;
    background-image: linear-gradient(to right,#574AE8, #3EA1DB);
    margin-bottom: 20px;
}

form{
    width: 100%;
    height: 100%;
}

#header_text{   
    display: flex;
    justify-content: space-evenly;
    color: white;
    height: 30%;
}

.center_flex{
    display: flex;
    width: 70%;
    justify-content: space-between;
    padding-block: 20px;
}

#header_searchbar{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
}

#search_bar{
    display: flex;
    width: 70%;
    height: 3rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    align-items: center;
    justify-content: space-evenly;
}

#search_btn{
    display: flex;
    background-color: transparent;
    cursor: pointer;
    height: 100%;
    align-items: center;
}

#search_btn button :hover{
    background-color: hsla(210, 20%, 96%, 0.25);
}

#search_bar input{
    background-color: transparent;
    width: 90%;
    height: 100%;
    padding-left: 0.7rem;
    outline: 0;
    color: white;
}

#search_bar ::placeholder {
    color: rgb(255, 255, 255, 0.5);
  }

main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog_post{
    width: 70%;
    background-color: white;
    margin-block: 25px;
}

.blog_post h1{
    font-size: 26px;
    padding-inline: 20px;
}

.blog_post p{
    font-size: 18px;
    padding-block: 15px;
    padding-inline: 20px;
    color: #717171;
}

.post_data{
    padding-block: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.post_data span{
    padding-inline: 25px;
    font-size: 16px;
    color: #717171;
}

.btn_heart{
    background-color: white;
    background-image: url("/image/heart.svg");
    background-repeat: no-repeat;
    background-position: center; 
    width: 25px;
    height: 20px;
    margin-inline: 30px;
    cursor: pointer;
}

.btn_heart.active{
    background-image: url("/image/heart-Filled.png");
}

/* ***** Copyright *****  */

#copy_section{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 1rem;
    font-size: 90%;
}

#copy_button{
    background-color: #F3F5F7;
    color: #000000;
    border: 1px solid black;
    border-bottom: 0px solid;
    cursor: pointer;
    align-self: flex-end;
    width: 1rem;
    height: 1rem;
    font-size: 0.8rem;
}

#copy_hidden{
    display: none;
}

#copy_hidden a{
    text-decoration: none;
    color:#569ff5;
    margin-inline: 0rem;
}

#copy_section.show #copy_hidden{
    font-size: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    color: #000000;
    background-color: #F3F5F7;
    border-top: 1px solid black;
}


@media (max-width: 768px){

    #header_text{   
        height: 20%;
    }

    .center_flex{
        width: 90%;
    }

    #search_bar{
        width: 90%;
    }

    #search_bar input{
        width: 80%;
    }

    .blog_post{
        width: 90%;
    }
}