:root {
  --ff-base: Roboto;
  --fw-regular: 400;
  --fw-bold: 700;
  --fs-200: 0.8rem;
  --fs-400: 1rem;
  --fs-700: 1.5rem;
  --fs-800: 2rem;
  --fs-900: 3.5rem;
}

@font-face {  font-family: 'Roboto';  src: url(../fonts/Roboto-Regular.ttf);  font-weight: 400;}
@font-face {  font-family: 'Roboto';  src: url(../fonts/Roboto-Bold.ttf);  font-weight: 700;  }

* {  box-sizing: border-box;  padding: 0;  margin: 0;}



/*
    Mobiltelefonos hamburgermenü eleje >>>
*/

nav {  background: transparent;  padding: 0px 0px;  }
ul {  list-style-type: none;}
.menuitem {  color: #f2e6ff;  text-decoration: none;}
.menu li {  font-size: 16px;  padding: 15px 5px;  white-space: nowrap;}
.toggle a {  font-size: 20px;}
.menu {  display: flex;  flex-wrap: wrap;  justify-content: space-between;  align-items: center; }
/* .toggle {  order: 1; }
.item.button {  order: 2;} */
.item {  width: 100%;  text-align: center;  order: 3;  display: none;}
.item.active {  display: block;}

/* Navbar Toggle */
.toggle {  cursor:pointer;}
.bars {  background: #999;  display: inline-block;  height: 2px;  position: relative;  transition: background .2s ease-out;  width: 18px;  }
.bars:before,
.bars:after {  background: #999;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%;}
.bars:before {  top: 5px;}
.bars:after {  top: -5px;}

/*
    <<< Mobiltelefonos hamburgermenü vége
*/

.about_button {
  max-width: 200px;
}


/* EZ A RÉGI, AMIKOR MÉG A MOBILVERZIÓBAN IS ÁLLANDÓAN LÁTSZOTTAK A GOMBOK 
.button-container {  display:flex;  flex-direction: column;  align-items: center;  justify-content: center;} */


body {		margin: 0px;		padding: 0px;		border: none;		background: #f2e6ff;    font-family: var(--ff-base);  }
.header-container {  background-color: #330066;  padding: 20px ;  display:flex;  flex-direction: column;  justify-content: space-around;}
.button-container {  display: none;}
.banner-container {  display:flex;  flex-wrap: wrap;  flex-direction: column;  justify-content: center; } 
.body-container {  display:flex;  flex-direction: column;  justify-content: center; }
.menubutton {  display: block;  align-items: center;  text-align: center;  margin: 5px;  justify-content: center;   /* flex-grow: 1;  */  /* flex-shrink: 1; */}
.story-container {  display: flex;  flex-direction: column;  max-width: 900px;  margin-left: 20px;  margin-right: 20px;}
.story-headline{  font-size: var(--fs-800); margin-top: 50px;}
.story-title{  font-size: var(--fs-700);  margin-top: 4rem;}
.story-excerpt {  margin-top: 20px;}
.story-open{  font-size: var(--fs-200);  margin-top: 20px;  text-align: end;  font-weight: var(--fw-bold);}
.story-link {  text-decoration: none;  color: #330066;  }
 
/* div {
  border: 1px solid red;
}  */

.buttonlink {  text-decoration: none;  color: #f2e6ff;  background-color: #330066;  border-radius: 8px;  text-decoration: none;  height: 40px;  display: flex;  align-items: center;  justify-content: center;  min-width: 350px;  /* max-width: 400px; */  flex-grow: 1;  flex-shrink: 1;}
.buttonlink:hover {  text-decoration: none;  color: #330066;  background-color: #d9b3ff;  border-radius: 8px;  text-decoration: none;  display: flex;  align-items: center;  justify-content: center;}
.story-list  {  display: flex;  flex-direction: column;  min-width: 300px;  gap: 20px; margin-left: 20px; margin-top: 50px; margin-bottom: 50px;}
.story  {  border-bottom: 1px solid #330066;  padding: 10px;  margin-left: 20px;  margin-right: 20px;}



.title {  margin: 0;  padding: 0;  color: #f2e6ff;   background: #330066;  font-size: var(--fs-900); }
.title_quote {  margin: 0;  padding: 0;  color: #f2e6ff;   background: #330066;  font-size: var(--fs-700);  padding-top: 20px;}
.title_subquote {  margin: 0;  padding: 0;  color: #f2e6ff;   background: #330066;  font-size: var(--fs-400);  padding-top: 20px;  text-align:right;}




/* Mobilon a kis kép látszik, a nagy nem */
#portrait-small {  display: block;}
#portrait {  display: none;}


@media (min-width: 800px) {

  nav {    display: none;  }
  .header-container {    /* flex-wrap: wrap; */    flex-direction: row;    justify-content: center;    flex-shrink: 1;  }
  .banner-container {    padding-left: 20px;  }
  
  .button-container {    /* flex-wrap: wrap; */    width: 90%;  display: grid;  gap: 1rem;   grid-template-columns:   repeat(2, 1fr);  padding-top: 30px;    padding-bottom: 10px;   }
  
  .body-container {    /* flex-wrap: wrap; */    flex-direction: row;    justify-content: center;  }
  .story-list {    order: 2;  margin-top: 0px;margin-left: 80px;}
  .story-container {    order: 1;  }


  .title_quote {    padding-top: 50px;  }
  .title_subquote {    /* padding-top: 0px; */  }




 .buttonlink {    min-width: 200px;  }
 .menubutton {  margin: 10px;  flex-shrink: 1;  flex-grow: 1; }

 /* Desktopon a nagy kép látszik, a kicsi nem */
  #portrait-small {    display: none;  }
  #portrait {    display: block;  }
  
}


@media (min-width: 1400px) {

  nav {    display: none;  }
  .header-container {    /* flex-wrap: wrap; */    flex-direction: row;    justify-content: center;    flex-shrink: 1; max-width: 80%; }
  .banner-container {    padding-left: 20px;  }
  
  .button-container {    /* flex-wrap: wrap; */    width: 80%; display: grid;  gap: 1rem;   grid-template-columns:   repeat(4, 1fr);  padding-top: 30px;    padding-bottom: 60px;   }
  
  .body-container {    /* flex-wrap: wrap; */    flex-direction: row;    justify-content: center;  }
  .story-list {    order: 2;  margin-top: 0px;margin-left: 80px;}
  .story-container {    order: 1;  }


  .title_quote {    padding-top: 50px;  }
  .title_subquote {    /* padding-top: 0px; */  }




 .buttonlink {    min-width: 200px;  }
 .menubutton {  margin: 10px;  flex-shrink: 1;  flex-grow: 1; }

 /* Desktopon a nagy kép látszik, a kicsi nem */
  #portrait-small {    display: none;  }
  #portrait {    display: block;  }
  
}








/*                      */
/* Versnézet, három DIV */
/*                      */

.poem_view_divs {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Mobil (alap) */
.poem_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

/* 2. Desktop (> 1400px) */
@media (min-width: 1401px) {
  .poem_container {
    display: grid;
    /* két oszlop */
    grid-template-columns: repeat(2, 600px); 
    justify-items: center; 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .poem_back_to_main {
    /* A harmadik DIV középen */
    grid-column: span 2;
  }
}



/* Vers képe */
.responsive_poem_img {
  width: 100%;
  height: auto;
  display: block; /* Removes bottom whitespace */
  object-fit: cover; /* Ensures it fills the box nicely */
}