/*Colours palette:
 * e6e6e6
 * B5C6D2
 * 314249
 * 152525
 * 171C18
 * 
*/


:root {
  --header-image: url('img/background/oldbackground.jpeg');
}

body {
  background-color: #152525;
  color: #e6e6e6;
  font-family: "Trebuchet MS", 'Helvetica';
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
}

::selection {
  background: #EDEFF1;
  color: black;
}

/*Ogólna struktura strony.*/
.wrapper {
  display: flex;
  gap: 10px;
  flex-direction: column;
  width: 60%;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto;
  
  > div {
    box-shadow: 2px 2px 5px #171C18;
  }
}

.header {
  background-image: var(--header-image);
  background-size: 100%;
  background-position: 50% 85%;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;


  .title_bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    height: 7rem;;
    width: 100%;

    img {
      width: 5rem;
    }

    p {
      font-size: 3.5rem;
    }
  }

  .menu {
    display: flex; 
    width: 100%;
    background-color: #314249;

    nav {
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      display: flex;
      justify-content: space-around;
      width: 100%;

      a {
        color: #e6e6e6;
        text-decoration: none;
        text-align: center;
        font-size: 1.3rem;
      }

      a:hover {
        color: #171C18;
      }
    }
  }

}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #314249;

  .content_wrapper {
    padding: 2rem;
  }
}

.footer {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  width: 100%;
  background-color: #314249;

}


/*Lista postów na blogu*/
.post_link {
  a {
    text-decoration: none;
    color: #B5C6D2;

    }
  margin-bottom: 0.4rem;
}

/*Post na blogu*/
.posts_button_container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  
  a {
    text-decoration: none;
    color: #B5C6D2;
    }
}