:root {
    --clr-primary-200: #f3eed9;
    --clr-primary-400: red;

    --clr-neutral-100: #fff;
    --clr-neutral-900: #222c2a;

    --ff-primary: 'Dosis', sans-serif;
    --ff-primary-22: "Roboto", sans-serif;
    --ff-accent: "Playfair Display", serif;
    font-size: 16px;
  }

  *, *::before, *::after {
    box-sizing: border-box;
}

  body {
    font-family: var(--ff-primary);
    font-size: 1.3125rem;
    line-height: 1.4;
    background-color: #b8b8fe;
    color: #2b3080;
    font-weight: 400;
  }

  body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
  }

  img {
    display: block;
    max-width: 100%;
  }

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

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

  a:hover {
    text-decoration: none;
    opacity: .7;
  }

  a:active {
    text-decoration: none;
  }

  .text-center {
    text-align: center;
  }

  header {
    background-color: #1c2874;
    color: #fff;
    /* border: 1px solid #1c2874; */
  }

  header ul {
    list-style-type: none;
    margin-bottom: 0;
    padding-bottom: 20px;
  }

  header li a {
    color: #fff;
    text-decoration: none;
  }
  .topik {
    display: flex;
  }

  .logo, .logo-img {
    width: 160px;
    height: 89px;
  }

/* Hamburger */

#menu_checkbox
{
    display: none;
}

label
{
    display: block;
    width: 40px;
    height: 40px;
    margin:  20px 5px 5px 15px;
    /* cursor: pointer; */
}

label div
{
    position: relative;
    top: 0;
    height: 5px;
    background-color: #fff;
    margin-bottom: 8px;
    transition: 0.3s ease transform, 0.3s ease top, 0.3s ease width, 0.3s ease right;
    border-radius: 2px;
}

label div:first-child
{
    transform-origin: 0;
}

label div:last-child
{
    margin-bottom: 0;
    transform-origin: 40px;
}

label div:nth-child(2)
{
    right: 0;
    width: 40px;
}


#menu_checkbox:checked + label div:first-child
{
    top: -7px;
    transform: rotateZ(45deg);
}

#menu_checkbox:checked + label div:last-child
{
    top: 7px;
    transform: rotateZ(45deg);
}

#menu_checkbox:checked + label div:nth-child(2)
{
    width: 57px;
    top: 0;
    right: 9px;
    transform: rotateZ(-45deg);
}

/* Menu */

  .menu, .menu-hide {
    display: none;
  }
  .menu-show {
    display: block;
  }
  .menu li{
    display: block;
    /* width: 100%; */
  }

  .menu-link + .menu-link {
    margin-top: 0.5em;
  }

  @media (min-width: 600px) {
    header {
      display: flex;
      align-items: center;

    }
    .hamburger {
      display: none;
    }
    .logo, .logo-img {
      width: 180px;
      height: 100px;
    }
    .menu, .menu-hide, .menu-show {
      display: inline;
    }

    .menu li{
      display: inline;
    }
    .menu-link + .menu-link {
      margin-left: 0.5em;
    }
  }
  /* AdS */

  .ad-top-senneo, .ad-d1-senneo, .ad-r1-senneo, .ad-r2-senneo, .ad-m1-senneo, .ad-m2-senneo {
    max-width: 100%;
    margin: 0 auto;
    color: #000;
    font-family: var(--ff-accent);
    justify-content: center;
    text-align: center;
  }

  .ad-r1-senneo, .ad-r2-senneo {
    display: none;
  }

  /* MAIN */
  main {
    margin: 0 auto;
    width: 95%;
    background-color: #ece0f5;
    padding-top: 0.3em;
    padding-bottom: 1em;
  }

  .breadcrumbs {
    width: calc(100% + 5px);
    height: 61px;
    background: url(/img/breadcrumbs.png) no-repeat top;
    background-size: 100% 70%;
    margin-left: -5px;
    padding-left: 10px;
    align-items: center;
    margin-bottom: -15px;
  }

  .breadcrumbs ol {
    margin: 0;
    padding: 0;
    display: flex;
    list-style-type: none;
    color: #2b3080;
    font-size: 1.1rem;
  }

  .breadcrumbs a {
    color: #2b3080;
    font-weight: 700;
    text-decoration: none;
  }

  .breadcrumb-separator {
    margin-left: 0.5em;
    margin-right: 0.5em;
    color: #b890fe;
    font-weight: bolder;
    /* font-size: 1.2em; */

  }

  article, section {
    width: calc(100% - 22px);
    margin: 0 auto;
  }

  article a:link, section a:link {
    text-decoration: dashed;
  }

  article.dream h1::after {
    background-image: url('/img/feather.png');
    background-size: 65px 41px;
    display: inline-block;
    width: 65px;
    height: 41px;
    content:"";
  }

  section h1 {
    margin-bottom: 0.5em;
  }

  @media (min-width: 600px) {
    article.dream h1::after {
      background-size: 130px 82px;
      width: 130px;
      height: 82px;
    }
  }

  article p {
    margin-top: 0.8em;
  }

  .article-image {
    margin: 0 auto;
    margin-bottom: 20px;
    width: auto;
    height: auto;

  }

  .section-search {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* dictionary */
  .one-word{
    padding-top: 10px;
    padding-bottom: 10px;
    /* text-align: justify; */
    color: #2b3080;
    height: 100%;
    /* z-index: 999; */
      /* position: relative; */
    display: flex;
  }

  .one-word a {
    display: flex;
  }

  .one-word:nth-child(2n) {
    background-color: #e0cdef;
  }

  .one-word:hover {
    background-color: white;
  }

  .word-left {
    width: 25%;
    padding-left: 5px;
    font-weight: 600;
  }

  .word-desc {
    width: 75%;
    padding-left: 10px;
  }

  .pagination {
    /* margin: 0 auto; */
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
    font-size: 1.5rem;
    font-family: var(--ff-accent);
    line-height: 1;
  }

  .pagination a{
    padding: .8em;
    border: 2px #dddddd solid;
    border-radius: .8em;
    background-color: whitesmoke;
    color: #2b3080;
    display: inline-block;
    margin-bottom: 0.5em;
  }
  
  .pagination a.active_link {
    background-color: #2b3080;
    color: white;
    font-weight: bold;
  }

  /* Alphabet */
  .alphabet {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
  }

  .alphabet a {
    padding: .1em .5em 0.5em 0.5em;
    color: #2b3080;
    display: inline-block;
  }

  /* Search dream */

    .form-control {
      display: block;
      min-width: 300px;
      height: calc(2.25rem + 2px);
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.5rem;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }


  /* Aside */
aside {
    margin: 0 auto;
    margin-top: 20px;
    width: 95%;
  }

  .menu-right {
    background-color: #ece0f5;
    width: 100%;
    padding: 0.3em;
    padding-bottom: 1em;
  }

    .menu-right ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

  /* Footer */

  footer {
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 95%;
    background-color: #ece0f5;
    padding-top: 0.3em;
    padding-bottom: 1em;
    padding-left: 0.3em;
    padding-right: 0.3em;
  }

  .footer-links ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 2em;
  }
  
  .footer-links li {
    display: inline-block;
    padding-right: .5em;
  }

  .copy {
    display: block;
    text-align: center;
    color: #000;
  }

  .note {
    text-align: justify;
    font-size: 0.8em;
    color: #000;
    padding-top: 1em;
  }

  /* IMAGE static */
  .static-right {
    margin: 5px;
  }

  @media (min-width: 600px) {
    .static-right {
      float: right;    
    }    
  }

  @media (min-width: 1200px) {
  body {
    line-height: 1.6;
    /* font-size: 1.3vw; */
    display: grid;
    grid-template:
      "header header header header" auto
      ". main aside ." auto
      ". footer footer ." auto
      / 1fr minmax(30em, 6fr) minmax(16em, 2fr) 1fr;
    /* grid-column-gap: 1em; */
  }

  header {
    grid-area: header;
    padding-left: 12%;
  }

  main {
    grid-area: main;
    padding-top: .8em;
  }

  aside {
    grid-area: aside;
    background: url(/img/main-sznur.png) repeat-y top;
    margin-top: 0;
    background-size: 50%;
    background-position-x: 40%;
    padding-top: .8em;
  }

  footer {
    grid-area: footer;
    width: 100%;
  }

  .ad-r1-senneo, .ad-r2-senneo {
    display: block;
  }
}

/* nowy hamburger */