*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --green:#2d6c48;
    --dark-color:#219150;
}


.lecani{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    background-color: #E2DFD0;
}

.my-wrapper{
    width: 85%;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background-color: #fff;
    flex-wrap: wrap;

}
.first-wrapper{
    width: 60%;
}
.lecauni-wrapper{
   width: 100%;
    border: 1px solid #000;
    padding: 0rem 1rem;
}
.head1{
    text-align: center;
    /* background-color: #03AED2; */
    background-color: var(--green);
}
.lecauni-wrapper .head1 span{
    color: white;
}

.content-image-wrapper{
    width: 100%;
    display: flex;
    justify-content: end;
    padding: 0.5rem 0rem;
    border-bottom: 1px dashed #E2DFD0; 
}
.content-image-wrapper:hover{
    background-color: #D6DAC8;
}
.lacanu-h-span{
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    direction: rtl;
}
.lacanu-h-span h1{
    font-size: 1rem;
}
.lacanu-h-span span{
    padding-top: 0.5rem;
}
.lacanu-h-span a{
    text-decoration: none;
    color: #000;
}
.lacanu-h-span a:hover{
    text-decoration: underline;
}
.lacanu-cantant img{
     width: 15%; 

}
.my-content{
    display: none;
    direction: rtl;
}
.wrapper-hide{
    display: none;
}
.show{
display: block;
padding: 0.3rem;
width: 100%;
}
.new-litters{
width: 30%;
border: 1px solid #000;
height: fit-content;
}
.F-ul h1{
/* padding: 0.5rem; */
background-color: #C0D6E8;
direction: rtl;
text-align: start;

}
.T-content-title{
display: inline-block;
/* background-color: #03AED2; */
background-color: var(--green);
padding: 0.5rem;
color: #fff;
font-size: 1rem;
}
.F-ul h1 span:hover{
/* background-color: #DD5746; */
background-color: var(--dark-color);
}
.F-ul{
list-style-type: none;
text-align: end;
}
.F-ul li{
display: flex;
justify-content: end;
padding: 0 0.5rem ;
border-bottom: 1px dotted grey;
}
.F-ul li:hover{
    
background-color: #D6DAC8;
}
.new-litters ul a{
display: inline-block;
text-decoration: none;
padding: 0.2rem;
font-size: 1.2rem;
/* font-weight:bolder; */
margin-top: 0.5rem;
color: #000;
}
.new-litters ul a:hover{
    text-decoration: underline;
}
.ul-content{
display: none;
}
.ul-content-sytle{
width: 100;
margin-left: 0.5rem;
direction: rtl;
}
.T-articl-title{
    text-align: center;
    padding-bottom: 2rem;
    color: #666666;
}
.T-articl-publisher{
    text-decoration: underline;
    padding-bottom: 1.5rem;
    color: #666666;
}

.T-articls::before {
    content: "";
    display: block;
    margin-bottom: -1em;
  }
  .T-articls{
    text-align: start;
    line-height: 1.5rem;
    color: #666666;
    font-size: 18px;
    padding: 0 5vh;
    white-space: pre-line;
    text-indent: -1rem;
}

.T-tags{
    display: flex;
    padding: 10px 0;
}
.tag-link{
    padding:7px;
    border:1px solid black;
    display: inline-block;
    margin: 0 5px;
    color: #303030;
}
.back-button{
    font-size: 2.5rem;
    background: none;
    position: relative;
    top: -5px;
    left: -5px;
    padding: .5rem;
    border: none;
    cursor: pointer;

}
.dropdown-button{
    display: none;
}


  .display-nane{
    display: none;
  }

@media only screen and (max-width: 768px) and (min-width: 360px) {
    .lecani{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .my-wrapper{
        width: 100%;
        padding: 0 .3rem;
    }
    .first-wrapper{
        width: 100%;
        padding: 0;
    }
    .dropdown-button {
        display: block;
        position: fixed;
        top: 11vh;
        left: 5px;
        padding: .3rem 1rem;
        background-color: rgb(204, 61, 61);
        color: white;
        font-size: 24px;
    }
    
    .new-litters {
        display: none;
        width: 100%;
    }
    
    .new-litters.open {
        display: block;
        width: 100%;
    }
   
    .new-litters.open {
        display: block;
        width: 100%;
    }
   
}