/*Контейнер с новостями*/

.news-item {
    display: flex;
    padding: 1em;
    text-align: center;
    align-content: center;
}

/*Контейнер с новостью*/

.news-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255,0.5) 50%, rgba(255, 255, 255,0.2) 100%);
    color: white;  
    margin: 10px;
    padding-inline: 1em;
}

.news-container > a{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    text-decoration: none;
    color: white;
}

.news-container > a > img {
    width: 18em;
    padding: 1.5em;
}

/*Страница с новостью*/


.news-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#news-mode-toggle {
 background: linear-gradient(180deg, rgba(255, 255, 255,0.4) 50%, rgba(255, 255, 255,0.16) 100%);
    border: solid 2px white;
    border-radius: 1em;
    color: white;
    width: 100%;
}


.preview-and-text {
    display: flex;
    justify-content: space-between;
}

 .news-preview > #news-preview {
    width: 18em;
    padding: 1.5em;
    margin-right: 55em;
}
 
.text-news > {
    width: 5em;
    flex-direction: column;
    float: left;
}

@media (max-width:756px) {
    .news-preview > #news-preview {
        width: 18em;
        padding: 0em;
        margin-right: 0em;
    } 
    .news-preview {
        display: flex;
        justify-content: center;
    }
} 
    @media (max-width:1200px) {
        .news-preview > #news-preview {
            width: 18em;
            padding: 0em;
            margin-right: 0em;
            text-align: center;
        }  
        
    }   
   
/*Страница с новостью (режим приложения)*/     

.news-section.app-mod {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preview-and-text.app-mod {
    display: flex;
    justify-content: space-between;
}

.text-news.app-mod > p {
    font-weight: bold;
    background-color: rgba(16, 76, 214, 0.295);
    border-radius: 2em;
    padding: 0.5em;
}


 .news-preview > #news-preview-app-mod {
    width: 27em;
    margin: 1.5em;
    margin-right: 40em;
    margin-left: 8em ;
    border-style: solid;
    border-color: white;
    border-width: 0.1em;
    border-radius: 1em;

}
 
.text-news.app-mod > {
    width: 5em;
    flex-direction: column;
    float: left;
}

@media (max-width:756px) {
    .news-preview > #news-preview-app-mod {
        width: 18em;
        padding: 0em;
        margin-right: 0em;
        margin-left: 0em ;
    } 
    .news-preview {
        display: flex;
        justify-content: center;
    }
} 
    @media (max-width:1200px) {
        .news-preview > #news-preview-app-mod {
            width: 18em;
            padding: 0em;
            margin-right: 0em;
            margin-left: 0em ;
            text-align: center;
        }  
        
    }   
   
/*Если изображение новости на весь экран*/

.modal-window {
    display: none;
    position: fixed;
    z-index: 100;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

.modal-content {
  max-width: 50%;
  max-height: 70%;
}

.close {
  display: flex;
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
  background-color: rgba(233, 233, 233, 0.622);
  border-radius: 5em;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;

}

/*Страница с новостью (формы и интерактивные элементы)*/

.ref-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255,0.4) 50%, rgba(255, 255, 255,0.16) 100%);
    border-style:solid; 
    border-width: 1px;
    border-color: white;
    border-radius: 2em;
    padding: 0.2em;
    max-width: 100%;
}

.ref-item > .ref-link {
    color: rgb(0, 147, 233);
    padding: 0.2em;
    background-color: white;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(0, 147, 233);
    border-radius: 1em;
    text-decoration: none;
    font-weight: normal;
    margin: 0.2em;
}

.ref-item > .ref-link:hover {
    color: rgb(0, 233, 31);
    background-color: rgb(255, 255, 255);
    border-color: rgb(0, 233, 31);
    font-weight: bold;
}

.ref-item > .ref-resource-image {
    width: 1.5em;
    height: 1.5em;
    margin: 0.2em;
}

.code-item {
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    background: linear-gradient(180deg, rgba(255, 255, 255,0.4) 50%, rgba(255, 255, 255,0.16) 100%);
    border-radius: 1em;
    border-style:solid; 
    border-width:0.1em; 
    border-color: rgba(161, 161, 161, 0.671);
} 

.code-item > .head-code-item {
    border-bottom: solid 2px white; 
}
.code-item > #my-code {
    color: white;
}

.code-item > .foot-code-item {
  display: flex;
  flex-direction: row;
  justify-content: end;  
}

.code-item > .foot-code-item > .code-copy-button{
    background: linear-gradient(180deg, rgba(255, 255, 255,0.4) 50%, rgba(255, 255, 255,0.16) 100%);
    border: solid 2px white;
    border-radius: 1em;
    color: white;
}

.code-item > .foot-code-item > .code-copy-button:hover{
    transform: scale(95%);
    background: linear-gradient(180deg, rgba(255, 255, 255,0.4) 50%, rgba(255, 255, 255,0.16) 100%);
    border: solid 2px white;
    border-radius: 1em;
    color: white;
}

.frame-item {
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    background: linear-gradient(180deg, rgba(255, 255, 255,0.4) 50%, rgba(255, 255, 255,0.16) 100%);
    border-radius: 1em;
    border-style:solid; 
    border-width:0.1em; 
    border-color: rgba(161, 161, 161, 0.671);}

    .emoji-item > .emoji-img {
        width: 1em;
        height: 1em;
        margin-inline: 0.1em;
    }