style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
#mainpage{
	height: 100vh;
	width: 100%;
}

#news,
#aboutcorona,
#symptoms,
#stats,
#Prevention {
	min-height: 100vh;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
}

button:focus {
    outline: none !important; 
     /* outline: 5px auto -webkit-focus-ring-color; */
}
.navbar-toggler{
	border: none;
}
/* =========================navbar classes================================== */

.new-nav {
	background: rgb(67, 47, 104) !important;
	box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2);
}

/* .new-nav a {
	color: white !important;
} */

/* .navbar a {
	color: black;
} */

.navbar-brand {
	font-weight: 700;
	font-size: 100%;
}

/* ======================================================================= */
#mainpage {
	background-color: #e6fdd3;
}




#mainpage .row {
	height: 100vh;
}

#mainpage .mainpage-text h1 {
	font-size: 450%;
	font-weight: 700;
	margin-left: auto;
	margin-right: auto;
}
#mainpage .mainpage-hero {
	width: 80%;
}

#mainpage .mainpage-text a {
	background-color: #005a14;
	border: none;
	color: white;
	font-weight: 500;
}

.heading-primary-01 {
	display: block;
	animation-name: moveInLeft;
	animation-duration: 1s;
}

.heading-primary-02 {
	display: block;
	animation-name: moveInRight;
	animation-duration: 1s;
}

.animated {
	animation: moveInBottom 0.5s ease-out 0.75s;
	animation-fill-mode: backwards;
}

@keyframes moveInLeft {
	0% {
		opacity: 0;
		transform: translateX(-10rem);
	}
	80% {
		transform: translateX(1rem);
	}
	100% {
		opacity: 1;
		transform: translate(0);
	}
}

@keyframes moveInRight {
	0% {
		opacity: 0;
		transform: translateX(10rem);
	}
	80% {
		transform: translateX(-1rem);
	}
	100% {
		opacity: 1;
		transform: translate(0);
	}
}

@keyframes moveInBottom {
	0% {
		opacity: 0; /*Because at starting opacity is 0*/
		transform: translateY(30px); /*Starting from left of the side*/
	}
	100% {
		opacity: 1;
		transform: translate(0); /*Final position is orignal*/
	}
}

/* ============================-------------------about corona section-----------------------================ */

#aboutcorona p {
	font-size: large;
}

#aboutcorona img {
	width: 50%;
}

/* ======================= symptoms page ===================================== */
#symptoms {
	background-color: rgba(232, 255, 247, 0.33);
}

#symptoms .card {
	width: 80%;
	margin: 0 auto;
	border: none;
	background-color: transparent;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	height: 100% !important;
	transform-origin: center;
}

#symptoms .img-top {
	border-radius: 50%;
	box-shadow: 0px 0px 9px 4px #eee;
	background-color: white;
	transform-origin: center;
	transition: box-shadow 0.6s;
}

#symptoms .card {
	perspective: 1000px;
}

#symptoms .card-front {
	z-index: 2;
}

#symptoms .card-wrapper:hover .img-top {
	box-shadow: 0px 0px 36px 16px rgb(229, 246, 253);
}

.card-wrapper {
	position: relative;
}

.card-front{
	width: 100% !important;
	margin: 0 auto 0 auto;
	
}



/* =========================================Prevention Section======================================== */
#Prevention {
	background-color: #2B2926
}

#Prevention .title{
	color: white;
}

#Prevention .card{
	width: 90%;
}

#Prevention .card-img-top{
	width: 50%;
	margin: 30px auto;
}

/* =========================================fOOTER======================================== */


footer{
	background-color: rgb(230, 234, 232);
	width: 100%;
}

footer .content-wrap{
	text-align : center;
}

.content{
	list-style: none;
	padding-inline-start : 0px;
	margin-top: 2rem;
}

.social{
	list-style: none;
	padding-inline-start: 0px;
	margin-top: 2rem;
}

footer .para{
	text-align: center;
	color: #888;
}

.content li,
.social li{
    display: inline-block;
	margin-right: 20px;
}

.content li:last-child,
.social li:last-child{
    margin-right: 0px;
}


.content li a:link,
.content li a:visited,
.social li a:link,
.social li a:visited{
    text-decoration: none;
    border: 0;
    color: #888;
    transition: color 0.2s ;
}

.content li a:hover,
.content li a:active{
    color: #8787;
}

.social li a:link,
.social li a:visited{
    font-size: 180%;
}

.fa-facebook-square,
.fa-linkedin-square,
.fa-google-plus-official,
.fa-instagram{
    transition: 0.2s;
}

.fa-facebook-square:hover{
    color: #3b5998;
}

.fa-linkedin-square:hover{
    color: #00aced;
}

.fa-google-plus-official:hover{
    color: #dd4b39;
}

.fa-instagram:hover{
    color: #a45174;
}

/* =====================news=========================== */
#news .news_img{
	width: 100%;
	padding-bottom: 15px;
}

#news .row{
	border: 1px solid rgb(248, 248, 248);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	padding-top: 15px;
	padding-bottom: 0px;
}	
#news .row *{
	line-height: 150%;
}


/* -------------------------------------------------media queries------------------------------------------ */

@media only screen and (max-width: 860px) {
	#mainpage .mainpage-text h1 {
		font-size: 300%;
	}

	/* #mainpage .mainpage-text{
        transform: translateY(-20%);
    } */
}
@media only screen and (min-width: 570px) {
	#aboutcorona,
	#symptoms,
	#news,
	#stats {
		min-height: 100vh;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	html{
		font-size: 14px !important;
	}
}
@media only screen and (max-width: 575px) {
	html{
		font-size: 14px !important;
	}
	#mainpage .mainpage-hero {
		width: 80%;
	}
	#stats #info .card-body {
		width: 100%;
	}

	.new-nav {
		background-color: white;
		box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2);
	}

	#mainpage .mainpage-text {
		margin-top: 0 !important;
	}

	#symptoms .card-title {
		font-size: 80%;
	}

	#Prevention .card{
		margin-left: auto;
		margin-right: auto;
	}

	#news .row{
		border: 1px solid rgb(235, 235, 235);
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
		border-radius: 16px;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: 85%;
	}

	#news .row h4{
		font-size: 140%;
	}
}