/*--- GLOBAL VARS ---*/
:root { 
  --move-up-on-hover: translate(0%, -5%); 

  /*font sizes*/
  --font-size-navbar: 20px;
  --font-size-navbar-title: 16px;
  
  /*fonts*/
  --website-name-font: "Lucida Console", "Courier New", monospace;
  --article-title-font: "Consolas";

  /*colors*/
  --topbar-bg-color: #FFF4B5;
  --website-bg-color: #8B8863;
  --article-title-color: #092c0d;
  --footer-color: #d4ddc5; 
  --hover-color: #46611d;
  --tab-color: rgb(65, 35, 11);

  /*images*/
  --morris-pattern_article: url("images\\morris_1_compressed.png");
  --morris-pattern_about: url("images\\morris_2_compressed_bis.jpg");
  --morris-pattern_index: url("images\\morris_3_compressed.jpg");
  --morris-pattern_home: url("images\\william.jpg");
}

/*for debugging divs*/
/*border: 3px solid rgba(0, 0, 0, 0.247);*/

#about_body{
  background-image: var(--morris-pattern_about);
  background-size: 20%;
}

#about_div{
  background-color: var(--topbar-bg-color);
  margin: 4em 2em 0em;
  border-radius: 10px;
  background-size: 10%;
}

#index_body{
  background-image: var(--morris-pattern_index);
  background-size: 20%;
}

#index_div{
  background-color: var(--topbar-bg-color);
  margin: 4em 2em 0em;  
  border-radius: 10px;
}

#home_body{
  background-image: var(--morris-pattern_home);
  background-size: cover;
}

#home_div{
  background-color: #d0d89b94;
  margin: 9em 9em 8em;  
  border-radius: 10px;
}

.article_page{
  background-image: var(--morris-pattern_article);
  background-position: 60%;
  background-size: 30%;
}

.tabcontent{
  margin-bottom: 2em;
}

/* body{
  background-color: var(--website-bg-color);
} */

/*--- SEARCHBAR ---*/
pagefind-modal-trigger {
    display: inline-block;
    width: 100%; /*change searchbar width*/
}

body div:not(.footer){
  padding-left: 1em;
  padding-right: 1em;
  ;
}





/*--- TOPBAR ---*/
/*Parent*/
.topbar{ /*main topbar container*/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding-bottom: 1em;
    padding-top: 1em;
    background-color: var(--topbar-bg-color);
}

/*Children*/

/*NAVBAR*/
.navbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 30px;
}

#logo{
  padding-right: 0;
}

#name{
  padding-left: 0;
}

.navbar ul{
    display: flex;
    list-style-type: none; /*remove list points*/
    gap: 2em;
    padding: 0; /*prevent weird padding on the right*/
    padding-left: 2em;
}

.navbar a{
    color: var(--tab-color);
    text-decoration: none; /*remove underline*/
    padding: 15px; 
}

/*move hovered tab up + color*/
.navbar a:hover:not(.logo){
    transform: var(--move-up-on-hover);
    color: var(--hover-color);
}

/*decide font size tabs*/
.navbar li{
    font-size: var(--font-size-navbar);
} 



/*frames for navbar*/
#home_button{
    border: 1rem solid transparent; /* width, style, color*/
    border-image-source: url('images\\frame_red.png'); /*make sure image is cropped close, see tool backend here: https://css-tricks.com/almanac/properties/b/border-image/ */
    border-image-slice: 30;
}

#articles_button{
    border: 1rem solid transparent; /* width, style, color*/
    border-image-source: url('images\\frame_blue.png'); /*make sure image is cropped close, see tool backend here: https://css-tricks.com/almanac/properties/b/border-image/ */
    border-image-slice: 35 22;
  }

#about_button{
    border: 1rem solid transparent; /* width, style, color*/
    border-image-source: url('images\\frame_green.png'); /*make sure image is cropped close, see tool backend here: https://css-tricks.com/almanac/properties/b/border-image/ */
    border-image-slice: 50 80;
    border-image-width: 30px 48px;
}



/*SEARCHBAR*/
.searchbar{
  width: 20%;
  min-width: 250px;
}

/*WEBSITE NAME*/
.name{
  flex-shrink: 5;
  /* font-family: var(--website-name-color); */
  font-family: Georgia, serif;
  font-variant: small-caps;
}

.name h1{
  font-size: 170%;
   font-weight: normal;
}


/*currently not working, meant to show which tab you're on*/
 .active { 
  text-shadow:0px 0px 1px black; 
} 


/*--- HOMEPAGE ---*/
.home_div{
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.home_div h3{
  font-size: 150%;
  font-family: var(--article-title-font);
  font-style: italic;
  color: var(--article-title-color);
}

.home_div button{
  background-color: #3d60537c;
  border-radius: 20px;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  margin: 16px;
}

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

#about_div p{
   text-align: center;
   padding-bottom: 2em;
}

#about_div h3{
  padding-top: 2em;
  margin: 0px;
}

/*--- ARTICLE ---*/
/*ARTICLE TABS*/

/*article title*/
#all_about_title {
  display: grid;
  justify-content: center;
  grid-row: 1;
  padding-top: 4em;
  color: var(--article-title-color);
  font-size: 16px;
  font-style: italic;
}

#all_about_title em{
  font-size: 38px;
  font-style: normal;
  font-family: var(--article-title-font);
}

#all_about_title h2{
  background-color: var(--topbar-bg-color);
  border-radius: 50%;
  width: auto;
  height: auto;
  padding: 20px 40px;
  border-style: solid;
  border-width: 5%;
  border-color: #092c0d;

}

/* Style the tab */
.tab {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  /* border: 3px solid rgb(85, 255, 6) */
}

/* Style the buttons that are used to open the tab content */
#buttons_and_iframes{
  margin: 0px 1em 
}

.tablinks {
  background-color: #dfd499;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 30px 10px;
  transition: 0.3s;
  border-radius: 15px 15px 0 0;  /*top-left top-right bottom-right bottom-left*/
  /* border: 3px solid rgb(6, 22, 255) */
}

/* Change background color of buttons on hover */
.tablinks:hover {
  transform: translate(0%, 5%);
}

/* Create an active/current tablink class */
.tablinks.active {
  /* text-shadow:0px 0px 1px black; */
  background-color: var(--topbar-bg-color);
}

/*TABS CONTENT*/
.tabcontent {
  display: none;
  padding: 20px 12px 6px;
  background-color: var(--topbar-bg-color);
  /* border: 3px solid rgb(231, 30, 30); */
  border-radius: 10px;
}

/* iframe */
.tabcontent iframe {
  border-style: none;
  min-height: 500px; /* necessary to display content in not opened by default tabs*/
  width: 100%;
  height: 0vh;
  border: none;
  overflow: hidden;
}

/*KEYPOINTS STYLING*/
dt{
  font-weight: bold;
  margin-top: 1em;
}

dd{
  display: list-item; /*treat it like list*/
  list-style-type: disc; /*add list bullet point*/
}


/*--- FOOTER ---*/
body{ /*set the body to take minimum the whole page so that the footer sits at the bottom even for short pages*/
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.footer {
  display: grid;
  justify-content: center;
  /* background-color: --website-bg-color; */
  background-color: transparent;
  padding: 10px 0px 10px 0px; /*top, right, bottom, left*/
  margin-top: auto; /*footer is part of the body, and always sits at the bottom*/
}

.img_footer {
  height: auto; 
  width: auto; 
  max-width: 30px; 
  max-height: 30px;
}



/*--- SOURCES ---*/
.sources_list{
  list-style-type: none;
  padding: 0;
}

.sources_list li{
  padding-bottom: 5px;
}



/*--- INDEX ---*/
.article_title {
	display: inline-block;
	margin-left: 2em;
}

.sub_article_title {
	display: inline-block;
	margin-left: 3em;
}

a:link {
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: var(--article-title-color);
}

/*--- RESPONSIVENESS ---*/
@media(min-width: 768px){
  #searchbar {
     margin-left: auto;
     padding-right: 20px;
  }
}

@media(max-width: 768px){
  .navbar ul{
    padding-left: 0;
  }

  #buttons_and_iframes{        
    margin: 0px
  }

  #index_div{        
    margin: 1em
  }

  #about_div{        
    margin: 1em
  }

  #home_div{
    margin: 4em 4em 3em
  }
}

/*dynamically hide website name if on a narrow screen*/
@media(max-width: 600px){
  .name {
     display:none
  }

  .tab {
    display: flex;
    justify-content: center;
  }
}