* {box-sizing: border-box;}

html{
	scroll-behavior: smooth;
}

body{
	margin: 0;
  height:auto;
    background-color:  rgb(47, 47, 53);
    font-family: Helvetica neue, roboto;

}

.gtText{
	text-align: center;
	letter-spacing: 5px;
	font-size: 42px;
	background-image: linear-gradient(-90deg,red,green);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bolder;	
}
marquee{
    background-color:white;
    color:red;
    width:100%;
	padding-top: 2%;
	padding-bottom: 2%;
}
#mainstat{
	background-color: antiquewhite;
	color: black;
	width: 100%;
	padding: 10px;
	
}

#mainstat:after {
content: "";
	clear:both;
	display: table;
	
}
.globalnewcon{
	background-color: transparent;
	text-align: center;
	padding: 10px;
	font-weight: bolder;
	width: 31%;
	float: left;
	margin: 1%;
	border-bottom: 4px solid orange;
	box-shadow: 0 0 1px 0.5px orange;
}

.globalnewdth{
	background-color: transparent;
	text-align: center;
	padding: 10px;
	font-weight: bolder;
	width: 31%;
	float: left;
	margin: 1%;
	border-bottom: 4px solid orangered;
	box-shadow: 0 0 1px 0.5px orangered;

	
}

#todaytime{
	font-weight: bold;
}
.globalnewrec{
	background-color: transparent;
	text-align: center;
	padding: 10px;
	font-weight: bolder;
	width: 31%;
	float: left;
	margin: 1%;
	border-bottom: 4px solid green;
	box-shadow: 0 0 1px 0.5px green;

	
}
#globalnewrec, #globalnewdth, #globalnewcon{
	font-size: 25px;
}
.globaltoday{
	width: 75%;
	float: left;
}


.hotlinks{
	width: 25%;
	float: left;
}
.hotlinks button{
	width: 100%;
	padding: 5% 2%;
	color: black;
	font-weight: bold;
	margin: 5px;
	box-shadow: 0 0 6px 1px gray;
	text-shadow: 1px 1px 1px white;
	cursor: pointer;
	
}
.hotlinks button:hover{
	background-color: #ff00003d;
color: #0f0f0f;
border-radius: 10px;
scale: 0.98;
padding-left: 5%;
}

.hotlinks button:focus{
		box-shadow: 1px 1px black;

	
}
.anime1{
  width: 40px;
  height: 40px;
  position: relative;
  animation-name: anime1;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes anime1{
  0%{transform: rotate(0deg); left: 0px;top: 0px;transform: scale(1);}
  25%{transform: rotate(180deg);left: 20%;top:-2%;}
  50%{transform: rotate(360deg); left: 400px; top:-40px;transform: scale(2);}
  75%{transform: rotate(540deg); left: 200px;top:30px;}
  100%{transform: rotate(720deg);left:0px;top:0px;}
}
#countryinfo:after{
	content: "";
	display: table;
	clear: both;
}

.countryheading{
  padding: 20px;
  font-size: 30px;
  color:white;
  text-align: center;
}
.countrybut{
  background-color: palevioletred;
border-bottom: 4px solid;
}

.countrybut button{
background-size:40px;
background-repeat: no-repeat;
background-position: 10%;
padding: 10px 3px 10px 60px;
color: white;
cursor: pointer;
margin: 4px;
font-size: 15px;
text-align: right;
background-color: palevioletred;
text-shadow: 1px 1px 3px black;
border: none;
}

.countrybut button.active{
background-color:rgb(155, 27, 70);  
font-size: 20px;
border-radius: 5px;
}
.countrybut button:focus{
 background-image: linear-gradient(90deg, maroon, red);
 transform:translate(5px, 0);
 transition: 0.5s;
 text-transform: uppercase ;
 border-style: hidden;
}


.countrybut button:hover{
transform: skew(-10deg);
transition: 0.5s;
}

.countrystat{
  background-color: palevioletred;
  width:100%;
}

.countrytable{
	width: 100%;
	
	
}
.countrytable tr td {
width: 60%;
	text-align: left;
	border-style: hidden;
	
}

#header{
  background-image:linear-gradient(100deg, white,rgb(179, 28, 28));
  padding:20px 20px;
 margin:0;
 width:100%;
 box-shadow: 0 0 10px 1px gray;
 display: block;
z-index: 200;
top: 0;
position: sticky;

}
.siteheading{
  background: -webkit-linear-gradient(130deg, white,black);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  text-decoration: underline;
  animation-name: heading;
  animation-duration: 4s;
  animation-iteration-count: infinite;

}

@keyframes heading{
0%{transform: scale(0.5);}
50%{transform: scale(1.0);}
100%{transform: scale(0.5);}

}

.show{
  display: block;
}

#seperator{
	width: 100%;
	background-color: darkgray;
	height: auto;
	padding: 20px 0;
	text-align: center;
	font-weight: bolder;
	color: ghostwhite;
	font-size: 30px;
	text-shadow: 0 0 5px black;

}

#chart_sl{
	width: 100%;
	text-align: center;
overflow: hidden;	
}
.col1{
  background-color: rgb(47, 47, 53);
  width:33%;
  color: white;
  float:left;
      text-align: center;
      padding:5% 1%;
  
}
.col2{
  background-color: rgb(47, 47, 53);
  width:33%;
  color: white;
  float:left;
    height:auto;
    text-align: center;
    padding:1%;
 
}
.col3{
  background-color:  rgb(47, 47, 53);
  width:33%;
  color: white;
  float:left;
    height:auto;
        text-align: center;
        padding:1%;

}

.col4{
	background-color:  palevioletred;
  width:50%;
  color: white;
  float:left;
  padding:10px;
}

.col5{
	background-color:  rgb(47, 47, 53);
  width:50%;
  color: white;
  float:left;
        padding:1%;
}
table,td,tr{
  border-color: whitesmoke;
  border-style: solid;
  border-width: 2px;
  border-collapse: collapse;
  text-align: left;
}

td:hover{
transform: scale(1.2);
transform: translate(20px, 0);

}

#chart_div1{
	border-radius: 20px;
	border: 3px solid white;
	
}
#world-container{
width:100%;
margin:0;
background-color:  rgb(47, 47, 53);
}
#brief{
width:100%;
margin:0;
background-color:  rgb(47, 47, 53);
}
#brief:after{
	content: "";
	display: table;
	clear: both;
}
.location-container{
  background: linear-gradient(90deg, red, white);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;

}
#newssection:after{
	content: "";
	display: table;
	clear: both;
	
}

#localnews, #unnews, #whonews{
	width: 100%;
	
}

#localnews:after{
	content: "";
	display: table;
	clear: both;
	
}
#unnews:after{
	content: "";
	display: table;
	clear: both;
	
}
#whonews:after{
	content: "";
	display: table;
	clear: both;
	
}
.locheading{
	background-color: antiquewhite;
	width: 100%;
	padding: 10px;
	font-size: 20px;
	font-weight: bolder;
	
	
}
.loc{
	width: 25%;
	float: left;
	font-size: 10px;
	color:white;
	padding: 10px;
}



.loc img{
	width: 95%;
	border-radius:10px;
	border: 2px solid white;
}

#locdes a, #locdes1 a, #locdes2 a, #locdes3 a{
text-decoration: none;
color:rgb(138, 82, 119);
	
}
.unNewsCol{
	width: 25%;
	float: left;
	font-size: 10px;
	color:white;
	padding: 10px;
}

.unNewsCol img{
	width: 95%;
	border-radius:10px;
	border: 2px solid white;
}

#unlink a, #unlink1 a, #unlink2 a, #unlink3 a{
	text-decoration: none;
color:rgb(138, 82, 119);
	
}
#shareBtn{
	width: 30%;
	height: 10%;
	background-color: white;
	border-radius: 50px;
	font-size: 15px;
	text-align: center;
	display: block;
	
}

#slStatshareBtn{
	width: 50%;
	height: 10%;
	background-color: white;
	border-radius: 50px;
	font-size: 15px;
	text-align: center;
	display: block;
	margin-top: 5%;
	box-shadow: 0 0 10px 1px black;
	
}
#slStatshareBtn img{
	vertical-align: middle;
	width:25px;
	border-radius:none;
	border: none;

}

#countryShareBtn{
	width: 50%;
	height: 10%;
	background-color: white;
	border-radius: 50px;
	font-size: 15px;
	text-align: center;
	display: block;
	margin-top: 5%;
	box-shadow: 0 0 10px 1px black;
	
}
#countryShareBtn img{
	vertical-align: middle;
	width:25px;
	border-radius:none;
	border: none;

}
#shareBtn span{
	display: inline;
	vertical-align: middle;
	color: green;

}
#shareBtn a{
	text-decoration: none;
}
#shareBtn Img{
	width:25px;
	border-radius:none;
	border: none;
	vertical-align: middle;


}

footer{
 background-image:linear-gradient(-150deg, white,rgb(238, 0, 0));
 color: black;
padding: 10px;
font-size:10px;
text-align: center;
width:100%;
}
footer a{
  text-decoration: none;
}

#myInput{
  background-color: white;
  padding: 10px;
  color:palevioletred;
  
  }

  #myInput:focus{
    background-color: palevioletred;
    color:white;
  }

  .submit{
    background-color: white;
color:palevioletred;
padding: 10px;
width: 30%;
border-radius: 5px;
font-weight: bolder;
text-shadow: 0.2px 0.3px black;

  }

  .submit:hover{
    background-color: palevioletred;
    color: white;
    cursor: pointer;
  }

  .dropdown{
    position: relative;
    display: inline-block;
    
  }
  .dropdown-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  }

  .dropdown-items div{
    background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  cursor: pointer;
	padding: 10px;
	color: palevioletred;

  }
 .dropdown-items div:hover {
  background-color: palevioletred; 
  color: white;
 }
  .dropdown-active{
    background-color: palevioletred;
     color: white;
     font-weight: bolder;
  }

.topbtn{
	background-color: transparent;
	position:fixed;
	bottom: 10px;
	right: 10px;
	opacity: 0.5;
	z-index: 100;
	cursor: pointer;
	
	}
.topbtntop{
	position:fixed;
	bottom: 10px;
	right: 10px;
	opacity: 0.5;
	border-style: none;
	z-index: 100;
	cursor: pointer;
	background-color: transparent;
}
.topbtn:focus{
	transform: rotate(90deg);
	transition: 0.2s;
	scroll-behavior: smooth;
	
}
.topbtn:hover{
	opacity: 1;
}

.ngo{
	padding: 10px;
	width:10%;
	background:linear-gradient(90deg, white, antiquewhite);
	border-radius: 5px;
	border-style: none;
	font-weight: bold;
	text-shadow: 0 0 1px;
	box-shadow: 0 0 1px;
	cursor:pointer;
}

.ngo:hover{
background: none;
	color:white;
	border: 3px solid #3C7EC3;
	
}

#covidsection{
	padding: 10px;
}
#bp{
	width: 100%;
	background-color: gray;
	padding: 10px;
	
}
.bpcol{
	width: 25%;
	float:left;
	font-size: 12px;
	padding: 10px;
	text-align: justify;
}

.bpcol h5{
	color: floralwhite;
	font-size: 15px;
}

.bpcol a{
	text-decoration: none;
	color: black;
}


.bpcol ul{
text-align: right;
	font-weight: bold
}

#bp:after{
	content: "";
	display: table;
	clear: both;
}

.logoline{
	width: 100%;
	background: transparent;
	

}
.logoline img{
	width: auto;
	height: 50px;
	padding: 10px;
}


@media (max-width:600px){
  	.col1, .col2, .col3, .globaltoday, .hotlinks, .col4, .col5 {
width:100%;
  }
	.hotlinks button{
		width: 45%;
	}
	.globalnewcon, .globalnewdth, .globalnewrec{
		width: 100%;
	}
	.bpcol{
		width: 100%;
		margin: -30px 0 0 0; 
		padding: 5px;
	}
	.loc, .unNewsCol{
		width: 100%;
align-content: center;
	}
	#shareBtn{
		width: 90%;
	}
	#slStatshareBtn{
		width: 50%;
		margin-top: 5%;
		margin-left: 25%;
		margin-right: 25%;
		
	}
	#header{
		padding: 10px 20px;
	}

	.anime1{
		position: sticky;
	}
}