/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
html{
  scroll-behavior: smooth;
}

#content_wrapper{
    display: grid;
    grid-template-rows: 30vh 70vh auto;
    max-width: 600px;
    margin: 0 auto;
}
/*#logo_container{ grid-row: 1/1; display: flex; flex-direction: column; justify-content: center; align-items: center;} */
#buttons_container{ height: 70vh; grid-row: 2/2;     display: grid;}
#previous_links_container{ grid-row: 3/3}


/**** LOGO ****/


#logo_container *, #logo_container * * {max-height: 100%;}
#logo_container a, #logo_container span{ display: block;}
#logo_container{     grid-row: 1/1; display: grid; grid-template-rows: 25vh 5vh;}
#logo_container #hs_cos_wrapper_page_template_logo { grid-row: 1/2; display: flex !important;}

#logo_container h1 {grid-row: 2/3;   height: 5vh;}

#logo_container img { 
  margin-top: 10px;
  max-width: 250px;
  max-height: 100%;
  width: auto !important;
  object-fit: contain;
  height: 25vh;
}

#logo_container > *{  display: flex; flex-direction: column; justify-content: center; align-items: center;}
   


#buttons_container > * ,#previous_links_container > *{ height:  100%; width: 100%; } 

/*====== FONT ===== */

h2, h3, h4 {
  font-family: Merriweather,Arial,Verdana,Helvetica,sans-serif;
  font-weight: bold;
  font-style: italic;
  color: #333;
letter-spacing: 0.015em;
}

#linktree_title{
  margin-top: 10px;
  font-family: Lato, Arial,Verdana,Helvetica,sans-serif;
  letter-spacing: 0.15em; 
  font-size: 18px; font-weight: 400; color: #333; font-style: normal;
  margin-bottom: 0;
  
}
p{ font-family: Lato, Arial,Verdana,Helvetica,sans-serif; letter-spacing: 0.05em; font-weight: 300; color: #333;}



/**** MODUL CSS ******/

/***** BUTTONS *****/

.insta_button_wrapper{
  height: 100%;
  max-height: 50vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.insta_button{
  width: 90%;
  border: 2px solid #d86f45;
  /* border-radius: 9px; */
  text-align: center;
  padding: 1em 2em;
  margin: 1vh  auto;
    text-decoration: none;
  
  
      width: 90%;
    border: 2px solid #d86f45;
    text-align: center;
    /* padding: 1em 2em; */
    max-height: 50px;
    /* line-height: 20%; */
    margin: 1vh auto;
    text-decoration: none;
    display: inline-block;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
  
  
}

.insta_button > div ,.insta_button  {
  font-size: 16px;
  color: #333;
  font-family: "Lato" ,"helvetica" , sans-serif;
}

#some-buttons{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 10vh;
}
#some-buttons > *{ padding: 10px;}
.some-button{
  max-height: 100%;
  height: 100%;
  max-width: 90px;
  display: flex;
  align-items: flex-end;
  flex: 1 1 0px;
} 

.some-button > img { height: 100%!important; width: 100%;  object-fit: contain;}


/***** Posts *****/

#post_wrapper{
  max-width: 900px;
  margin: 0 auto;
  
  display: flex;
  flex-wrap: wrap;
  padding: 3%;
}

.post{
  flex: 0 0 33.333333%;
}

.post_content img{ padding: 3%;}
.post_content, .post_content:hover{
  display: block;
  text-decoration: none;
}

.post_content h2{
  font-size: 16px;

  margin: 0 0 0 0 !important;
  margin-bottom: 35px !important;
}

.published_dated{
  display: inline;
    font-size: 10px;
  color: #333;
}

.published_dated, h2{ padding: 0 10px 0 5px!important;}


/*====> FONTS <====*/




/**** QUERIES *****/

@media screen and (max-height: 650px){
  .insta_button{
    padding: 0.5em 1.5em !important;
  
  }
  .insta_button > div{
    font-size: 16px !important;
  }

}




/**** THEME OVERWRITER