/************************************************/
/*                   Global                     */
/************************************************/

html, body {
  height: 100%;
}

main{
  background-image: url("../images/background_blue.jpg");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow:auto;  /* When scrolling, the background stays in the same position */
}

/************************************************/
/*                  Page top                    */
/************************************************/

header {
  background: white;
}

/* Separator betwen header and main content */
.horizontal_divider{
  height: 0.3em;
}

/************************************************/
/*                   Navbar                     */
/************************************************/

/* COMMON */
.menu_item_icon{
  font-size: 18pt;
}

.menu_item_text{
  font-size: 14pt;
}

/* DROP DOWN MENU */
@media(max-width: 1199px){
  .menu_item_icon_wrapper{
    width: 2.2em;
  }

  .menu_item_icon{
    height: 1.2em;
  }
}

/* EXPANDED MENU */
@media(min-width: 1200px){
  /* Separator between nav buttons */
  .top_navbar_item:not(:last-child){
      border-right: 1px solid rgb(64, 64, 64);
  }

  .navbar-item .row{
    --bs-gutter-x: 0px;
    padding-left: 0.2em;
    padding-right: 0.5em;
  }

  .menu_item_icon_wrapper{
    width: 2.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .menu_item_icon{
    height: 2.5em;
    display: table-cell;
    vertical-align: middle;
  }

  .menu_item_text{
    height: 3.3em;
    display: table-cell;
    vertical-align: middle;
  }

  .top_navbar_item:nth-child(1){
    width: 13em;
  }

  .top_navbar_item:nth-child(2){
    width: 10em;
  }

  .top_navbar_item:nth-child(3){
    width: 8em;
  }

  .top_navbar_item:nth-child(4){
    width: 10em;
  }
}

/************************************************/
/*                Page content                  */
/************************************************/

.content_wrapper {
  background: rgba(255, 255, 255, 0.85);  /* Opacity 85% */
  min-height: 20em;
  border: 1px solid rgb(107, 103, 97);
  padding: 1em;
}

.text_block{
  font-size: 14pt;
  text-indent: 2em;
}

/************************************************/
/*              Page selection                  */
/************************************************/

#page_select_content a{
  text-decoration: none;
}

.page_select_button_container{
  padding: 1.5em;
  height: 15em;
  border: 2px solid rgb(107, 103, 97);
}

#page_select_button_cws{
  background-color: white;
}

#page_select_button_cws span{
  color: black;
}

#page_select_button_inventions{
  background-color: rgb(182, 0, 0);
}

/* White text to contrast the red background */
#page_select_button_inventions span{
  color: white;
}

/* Space between buttons */
#page_select_button_cws{
  margin-bottom: 0.5em;
}

/* More stylish font */
.page_select_button_container span{
  font-weight: lighter;
}

/* Extra-small screens */
@media(max-width: 576px){
  .page_select_button_container{
    width: 400px;
  }

  /* Make side paddings big enough, so that the text
     in the first button has line breaks in correct places.
     Makes nicer button appearance. */
  #page_select_button_cws{
    padding: 0 40px;
  }

  .page_select_button_container span{
    font-size: 20pt;
    text-align: center;
  }

  .page_select_button_container div{
    text-align: center;
  }

  .page_select_button_container div img{
    height: 8em;
  }
}

/* Small screens */
@media(min-width: 577px) and (max-width: 767px){
  .page_select_button_container span{
    font-size: 24pt;
    text-align: center;
  }

  .page_select_button_container div{
    text-align: center;
  }

  .page_select_button_container div img{
    height: 8em;
  }
}

/* Medium, large and extra large screens */
@media(min-width: 768px){
  .page_select_button_container span{
    font-size: 28pt;
  }

  .page_select_button_container div img{
    height: 12em;
  }
}

/************************************************/
/*                About museum                  */
/************************************************/

/* Small screens */
@media(min-width: 577px) and (max-width: 767px){
  #photo_under_about_museum{
    width: 390%;
  }
}

/* Medium, large and extra large screens */
@media(min-width: 992px){
  #photo_under_about_museum{
    width: 60%;
  }
}

/************************************************/
/*              Polish inventions               */
/************************************************/
.books_container div{
  text-align: center;
}

#books_general div img{
  height: 250px;
}

#young_patriot_books div img{
  width: 200px;
}

.links_list_header{
  margin-top: 1.5em;
}

.links_list_short{
  max-width: 400px;
}

.links_list_long{
  max-width: 700px;
}

.links_list a{
  text-decoration: none;
}

.list-group-item{
  background: none;
}

/************************************************/
/*                   Gallery                    */
/************************************************/

.gallery div {
  margin: 0.5em 0;              /* Margin between images rows */
}

.gallery div img{
  border: 1px solid #141414;
  max-height: 200px;
}

.gallery_image_wrapper{
  background: #141414;
}

/* Sizes greater than extra small */
@media(min-width: 576px){
  .gallery div img{
    /*width: 100%;*/      /* Don't stretch the image at very small screens */
  }
}

.gallery_modal .modal-dialog{
  max-width: 1200px;            /* Size of preview box*/
}

.gallery_modal .image_description_wrapper{
  color: white;                              /* Text color */
  background-color: rgba(29, 29, 29, 0.7);   /* Description background */
  padding: 0.5em 1em;
  display: inline-block;                     /* Wrap the text tightly */
}

/************************************************/
/*                Page bottom                   */
/************************************************/

footer div {
  line-height: 2.5em;
  text-align: center;
  vertical-align: middle;
  color: rgba(255, 255, 255, .55);
}