static/styles.css

html {
scroll-behavior: smooth;
}

@media screen and (min-width: 800px) {
a.headline {
background-color: #E5E4E2;
display: block;
width: relative;
text-decoration: none;
color: black;
line-height: 1.2;
align: justify;
border-left: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 0px;
font-weight: bold;
font-size: 18px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
}

@media screen and (max-width: 800px) {
a.headline {
background-color: #E5E4E2;
display: block;
width: relative;
text-decoration: none;
color: black;
line-height: 1.2;
align: justify;
border-left: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 0px;
font-weight: bold;
font-size: 16.5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
}

@media screen and (min-width: 800px) {
a.description {
background-color: #E5E4E2;
align:justify;
text-align: justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 7px solid transparent;
border-right: 0px;
font-size: 14px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
color: dimgrey;
}
}

@media screen and (max-width: 800px) {
a.description {
background-color: #E5E4E2;
align:justify;
text-align: justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 7px solid transparent;
border-right: 0px;
font-size: 12.5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
color: dimgrey;
}
}

@media screen and (min-width: 800px) {
a.time {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 11px;
padding-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}

@media screen and (max-width: 800px) {
a.time {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 10px;
padding-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}

.box {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
@media screen and (min-width: 800px) {
form {
width: 50%;
overflow-x: hidden;
padding: 20px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 20px 0 #095484;
    }}

@media screen and (max-width: 800px) {
form {
width: 100%;
overflow-x: hidden;
padding: 20px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 15px 0 #095484;
}}
.banner {
      position: relative;
      height: 30px;
/*       background-size: cover; */
      display: flex;
/*       justify-content: center; */
/*       align-items: center; */
/*       text-align: center; */
      }
@media screen and (min-width: 800px) {
h1 {
      position: absolute;
      margin: 0;
      padding-left: 50px;
      font-size: 25px;
      color: black;
      z-index: 2;
      font-family: Arial, Helvetica, sans-serif;
      }
}

@media screen and (max-width: 800px) {
h1 {
      position: absolute;
      margin: 0;
      padding-left: 40px;
      font-size: 24px;
      color: black;
      z-index: 2;
      font-family: Arial, Helvetica, sans-serif;
      }
}

p.unavailable {
background-color: #E5E4E2;
display: block;
width: 100%;
text-decoration: none;
color: black;
line-height: 1.2;
align: justify;
border-left: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 0px;
font-weight: bold;
font-size: 18px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
div.news-item{
	background-color: #E5E4E2;
/*box-shadow: rgba(0, 0, 0, 0.4) -1px 0px 5px, rgba(0, 0, 0, 0.5) 0px 4px 5px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;*/
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 1px, rgba(0, 0, 0, 0.1) 0px 4px 5px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;


	  }
div.news-item:hover{
box-shadow: none;
}

@media screen and (min-width: 800px) {
p.srctxt {
align:justify;
text-align: justify;
word-break: break-all;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
.logo-img{
margin-right: 10px;
vertical-align: center;
/* position: relative; */
width: 34px;
height: 34px;

}
}

@media screen and (max-width: 800px) {
p.srctxt {
align:justify;
text-align: justify;
word-break: break-all;
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
}
.logo-img{
margin-right: 10px;
vertical-align: top;
/* position: absolute; */
width: 30px;
height: 30px;
}
}

.float{
	position:fixed;
	width:25px;
	height:25px;
	bottom:15px;
	right:12px;
	background-color: white;
	border-radius:50%;
	text-align:center;
	vertical-align:center;
	z-index: 99999998;
	font-size:0;
	cursor:pointer;
	animation: beatan 0.8s infinite alternate;
	
}
.top-float{
	position:fixed;
	width:25px;
	height:25px;
	bottom:52px;
	right:12px;
	background-color: white;
	border-radius:50%;
	text-align:center;
	vertical-align:center;
	z-index: 99999998;
	font-size:0;
	cursor:pointer;
	animation: beatan 0.8s infinite alternate;
	
}
.my-float{
	margin-top:22px;
}

@keyframes beatan{
	to { transform: scale(1.1); }
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999999999;
	background: url('../static/loader.gif') 50% 50% no-repeat rgb(255,255,255);
}

 .highlight {
    background-color: yellow;
    font-weight: bold;
  }

.input-container {
	position: relative;
    padding-bottom: 10px;
  }

  .keyword-input {
	
    border-radius: 5px;
    transition: border-color 0.3s ease;
	border: 1px solid silver;
	width: 10em;
	height: 1.5em;
	padding-left: 0.5em;
	outline: none;
	overflow: hidden;

  }

  .clear-btn {
    position: absolute;
	font-size: 20px;
    left: 129px;
    transform: translateY(-105%);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .clear-btn.show {
    opacity: 1;
  }

@media screen and (min-width: 800px) {
a.article-category {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
font-weight: bold;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 11px;
padding-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}

@media screen and (max-width: 800px) {
a.article-category {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
font-weight: bold;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 10px;
padding-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}

.content {
    display: none;
	font-family: Arial, Helvetica, sans-serif;
	
  padding-right: 5px;
  
  padding-top: 5px;
  border-left: 5px solid transparent;
  }
  
 .container{
 padding-bottom:10px;
 }
 
 .show-similar-button-container{
 display: flex;
 flex-direction: column;
 align-items: center; 
 }
 
 .similar-news-item:hover {
 text-decoration: none;
 }
 
 @media screen and (min-width: 800px) {
.similar-news-item {
text-align: justify;
text-decoration: underline;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display:inline-block;
padding-bottom: 10px;
width:100%;
/*white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;*/

}
}

@media screen and (max-width: 800px) {
.similar-news-item {
text-align: justify;
text-decoration: underline;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display:inline-block;
padding-bottom: 8px;
width:100%;
/*white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;*/
}
}
 
 
 
 .show-more {
background-color: #E5E4E2;
font-family: Arial, Helvetica, sans-serif;
border-radius:4px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
font-size: 12px;
display: box;
border: none;

  }
  
 .show-more:hover {
background-color: black;
color: white;
  }
 
 .show-less {
background-color: #E5E4E2;
font-family: Arial, Helvetica, sans-serif;
border-radius:4px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
font-size: 12px;
border: none;
display: none;
  }
  
 .show-less:hover {
background-color: black;
color: white;
  }
  
 .word-cloud-container{
 word-wrap: break-word;
padding-bottom: 10px;

 }
 
 .wc-tokens{
font-family: Arial, Helvetica, sans-serif;
font-size: 13.2px;
cursor: pointer;
 }
 
 .wc-tokens:hover{
 text-decoration: underline;
 }
 
 .word-cloud-section{
   padding-bottom: 10px;
	 display: none;
   word-wrap: break-word;
 }
 
 .show-more-word-cloud{
 padding-bottom: 23px;
 text-align: center;
 }
 
 .three-dots{
	 font-size: 30px;
 margin: 0;
 line-height:0;
 vertical-align: top;
    padding: 0;
	cursor: pointer;
 }
 
 .three-dots:hover{
	 font-size: 25px;
 }