@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;400&display=swap');

body{
    margin: 0 auto;
    font-family: 'Roboto Slab', sans-serif;
    background-color: #f0f0f0;
    /* background-image: url(../img/farmer.png); */
}

.header{
    margin: 0 auto;
    width: 80vw;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.header h1{
    margin-top: 0;
    font-weight: bolder;
    font-size: 50px;
    text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

.lit-logo{
    position: relative;
    width: 300px;
    margin-bottom: 30px;
}

.logo {
    width: 120px;
    height: 200px;
    background-image: url(../img/vidlak.png);
    background-size: cover;
    margin: 0 auto;
}

.main{
    margin: 1% auto;
    width: 70vw;
    padding: 20px;
    border-radius: 10px;
}

.boxes{
    display: grid;
    grid-template-columns: 100%;
    margin: 0 auto;
    gap:10px;
}

.box{
    border: 1px solid #ddd;
    text-align: center;
    box-shadow: 3px 3px 5px 0px rgba(207,207,207,1);
    background-color: #fff;
}

.box p{
  padding: 10px;
  text-align: left;
}

.old-boxes{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 1% auto;
    gap: 10px;
    overflow: auto;
}

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }

.new{
    
}

.right .box{
  margin-bottom: 10px;
}

.autor{
  margin-top: 5px;
  margin-left: 5px;
  float: left;
  padding: 5px;
  background-color: #2f3033;
  color: #fff;
  border-radius: 10px;
  font-weight: 200;
}

.datum{
  float: right;
  margin: 5px;
  padding: 5px;
  background-color: #ddd;
  color: #202020;
  border-radius: 10px;
}

.menu{
    width: fit-content;
    margin: 0 auto;
    margin-top: 1%;
    display: grid;
grid-template-columns: 1fr;
gap: 20px;
display: none;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {cursor: pointer; float: left; padding: 10px;}
li:hover{
    background-color: #2f3033;
    color: #fff;
}

.search-container input{
    padding: 5px;
    border: none;
    margin-top: 4px;
    border-bottom: 2px solid #2f3033;
    text-align: center;
}

.search-container{
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    text-align: right;
    font-size: 17px;
    border: none;
    cursor: pointer;
  }

  .search-container button{
    padding: 7px;
    border: none;
    color: #fff;
    background-color: #ba4a57;
    cursor: pointer;
  }


/* For mobile devices */
@media only screen and (max-width: 768px) {
    .parent {
      grid-template-columns: 1fr !important; 
      grid-template-rows: auto !important; 
      width: 90vw !important; 
      margin: 2% 5% !important; 
    }
    
    /* Update grid-area values for mobile */
    .div1 { grid-area: 1 / 1 / 2 / 2 !important; }
    .div2 { grid-area: 3 / 1 / 4 / 2 !important; }
    .div3 { grid-area: 5 / 1 / 6 / 2 !important; }
    .div4 { grid-area: 7 / 1 / 8 / 2 !important; }
    .div5 { grid-area: 9 / 1 / 10 / 2 !important; }
    .div6 { grid-area: 11 / 1 / 12 / 2 !important; }
    
    /* Add new rule to stack all divs below each other */
    .parent > * {
      grid-column: 1 / -1 !important;
    }
  }

@media only screen and (max-width: 800px) {
    
    .header{
        width: 91%;
        background-image: none !important;
    }

    .header h1{
        font-size: 37px;
    }

    .main{
        width: 90%;
    }

    .menu{
        display: grid;
        grid-template-columns: 1fr;
    }

    .clanek{
        width: 95% !important;
    }

    .obrazek{
        width: 90% !important;
    }

    .text{
        width: 90% !important;  
    }

    .coment-box{
        width: 95% !important;
    }

    .lit-logo{
        width: 250px;
    }

    .slepice-stars, .rating{
        width: 90% !important;
    }

    .menu-tab{
        position: absolute !important;
    }

    .menu-tab.active{
        position: fixed !important;
    }
}

@media screen and (min-width:801px) and (max-width:1000px){
    .header{
        width: 95%;
        background-image: none !important;
    }

    .main{
        width: 95%;
    }
}

@media screen and (min-width:1001px) and (max-width:1300px){
    .header{
        width: 90%;
        background-image: none !important;
    }

    .main{
        width: 90%;
    }
}

.read{
    float: right;
    margin: 0px 15px 10px;
    border: none;
    padding: 10px;
    border-radius: 5px;
    background-color: #202020;
    color: #fff;
    cursor: pointer;
}

.clanek{
    margin: 1% auto;
    background-color: #fff;
    box-shadow: 3px 3px 5px 0px rgba(207,207,207,1);
    width: 70%;
    border-radius: 10px;
    padding: 10px;
}

.text{
    width: 75%;
    margin: 3% auto;
    word-break: break-word;
    font-weight: 200;
}

/* .text::first-letter{
    padding: 10px;
    initial-letter: 1.5;
    -webkit-initial-letter: 2;
    font-weight: 400;
} */

.first-text::first-letter{
    font-size: 1.5rem;
    font-weight: 400;
    color: #202020;
    padding: 5px;
}

.clanek .nadpis{
    text-align: center;
    font-size: 35px;
}

.nadpis{
    color: #4d4d4d;
}

.title{
    text-align: center;
}

.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 10px;
    width: 80vw;
    margin: 1% auto;
    }

    .parent>div{
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 10px;
    }
    
    .div1 { grid-area: 1 / 1 / 5 / 4; }
    .div2 { grid-area: 1 / 4 / 3 / 7; }
    .div3 { grid-area: 3 / 4 / 5 / 7; }
    .div4 { grid-area: 5 / 1 / 7 / 3; }
    .div5 { grid-area: 5 / 3 / 7 / 5; }
    .div6 { grid-area: 5 / 5 / 7 / 7; }
    

.art:hover{
    border: 1px solid #c0d1d7;
    cursor: pointer;
}

.art p{
    font-weight: 200;
}

.obrazek{
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    height: 500px;
    width: 70%;
    background-image: url(../img/image.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.art-autor{
    color:#434242;
    text-align: center;
}
.com-autor{
    color:#1f1f1f;
    text-align: center;
}

.com-autor .fa-user{
    color: #000000 !important;
}

.com-autor .fa-calendar{
    color: #000000 !important;
}

.art-autor .fa-user{
    color:#a5a5a5 !important;
}

.art-autor .fa-calendar{
    color:#a5a5a5 !important;
}

.art-info{
    display: flex;
    justify-content: center;
    gap: 20px;
}

.com-info{
    display: flex;
    justify-content:flex-start;
    gap: 20px;
}

.socials{
    display: flex;
    justify-content: center;
    gap: 20px;
}

.soc{
    width: 40px;
    height: 40px;
    background-size: cover;
    margin-bottom: 10px;
    margin-top: 20px;
}

.fb{
    background-image: url(../img/facebook.png);
}

.tw{
    background-image: url(../img/twitter.png);
}

.coment-box{
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    width: 70%;
    margin: 0 auto;
}

.coment-box h2{
    text-align: center;
}

.coment-box p{
    font-weight: 200;
}

.coment-message{
    padding: 15px;
    width: 90%;
    border-radius: 10px;
    background-color: #eee;
    color: #202020;
    margin: 1% auto;
}

.rating{
    width: 75%;
    margin: 0 auto;
}

.slepice-stars{
    display: flex;
    gap: 5px;
    width: 75%;
    margin: 2% auto;
}

.slepice-stars-coment{
    display: flex;
    gap: 5px;
    width: 100%;
    margin: 2% auto;
}

.slepice-coment{
    background-size: cover;
    background-image: url(../img/slepice.png);
    width: 35px;
    height: 35px;
    background-position: bottom; 
}

.slepice{
    background-size: cover;
    background-image: url(../img/slepice.png);
    width: 50px;
    height: 50px;
    background-position: bottom;
}

/* .slepice:hover{
    background-position: center;
} */

.menu-tab {
    width: 90px;
    height: 70px;
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    cursor: pointer;
    transition: all 0.6s ease-in-out;
    z-index: 1111;
  }
  
  .menu-tab div {
    width: 33px;
    height: 4px;
    background-color: #56575d;
    display: block;
    margin: 5px 20px;
    transition: all 0.6s ease-in-out;
    border-radius: 5px;
  }
  .menu-tab div:nth-child(1) {
    margin-top: 20px;
  }
  
  .menu-tab.active {
    left: 345px;
    transition: all 600ms ease-in-out;
  }
  .menu-tab.active #one {
    transform: translateY(9px) rotate(-135deg);
    transition: all 0.6s ease-in-out;
    background-color: #333;
  }
  .menu-tab.active #two {
    opacity: 0;
    transition: 0.4s ease;
  }
  .menu-tab.active #three {
    transform: translateY(-9px) rotate(-45deg);
    transition: all 0.6s ease-in-out;
    background-color: #222323;
  }
  
  .menu-hide {
    width: 345px;
    left: -345px;
    height: 100vh;
    position: fixed;
    z-index: 1111;
    top: 0px;
    transition: all 0.6s ease-in-out;
  }
  .menu-hide nav {
  }
  .menu-hide nav ul {
  }
  
  .menu-hide nav ul li {
    height: 70px;
    list-style-type: none;
    text-align: center;
    line-height: 70px;
    transition: all 0.5s ease;
    color: #333;
  }
  .menu-hide nav ul li:hover {
    background-color: #004f93;
    transition: all 0.5s ease;
    color: #fff;
  }
  .menu-hide nav ul li a {
    padding: 30px 25px;
    text-decoration: none;
    color: green;
    font-weight: 800;
  }
  
  .menu-hide.show {
    left: 0px;
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.6s ease-in-out;
  }

  .side-menu{
    display: grid;
    padding: 0;
    width: 100%;
  }

  .side-menu a{
    display: grid;
    text-decoration: none;
    color: #000;
  }

  .side-menu li{
    list-style-type: none;
    padding: 10px;
    font-size: 18px;
  }

  .menu-item a{
    text-decoration: none;
    color: #000;
  }

  li>a:hover{
    background-color: #2f3033;
    color: #fff;
  }

  .title a{
    text-decoration: none;
    color: #202020;
  }

  hr{
    border: 1px solid #ddd;
  }