styles.css

body {
		margin:0;
		padding:0;
		overflow-x:hidden;
	}
	.main-container {
		width:100%;
		height:105vh;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		color:white;
		background-color:#2d2d2d;
	}
	.data-div {
		width:100%;
		height:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
		color:white;
		background-color:#2d2d2d;
		display:none;
	}

	h1, h2 {
		font-family: "Open Sans Pro", sans-serif;
	}
	h2 {
		font-size:16px;
	}
	
	.sub-title {
		text-align:center;
		margin:10px;
		font-family: "Open Sans Pro", sans-serif;
		
	}
	.form {
	  width:50%;
	  height:300px;
	  background-color:#404040;
	  border-radius:25px 25px 25px 25px;
	  margin-top:10px;
	
	
	 }
	 @media screen and (max-width:850px) {
	   .form {
	   	width:80%;
	   }
	 }
	 .form-items {
	 	width:100%;
		height:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
	 }
	 input {
	 	border-bottom:2px solid black;
		width:80%;
		border-top:none;
		border-right:none;
		border-left:none;
		background:transparent;
		color:white;
		font-size:18px;
		font-family: "Roboto Condensed", sans-serif;
		
	 }
	 input[type = "text"] {
	 	padding-left:10px;
	 }
	 input, button {
	 	margin:40px;
		outline:none;
	 }
	 button {
	 	width:80%;
		height:50px;
		background-color:#242424;
		color:white;
		border:2px solid black;
		font-size:24px;
		cursor:pointer;
		font-family: "Roboto Condensed", sans-serif;
	 }
	 .compare-title {
	 	text-align:center;
	 }
	 .recov, .deaths {
	 	font-family: "Roboto Condensed", sans-serif;
		cursor:pointer;
	 }
	 .live {
	 	display:inline-block;
		
	 }
	
     .no-chart {
	 	display:none;
		text-align:center;
	 }