ਫਰਮਾ:Main Page/styles.css

/*--------------------------------------WIKIPEDIA TOP BANNER----------------------------------------*/

	#topBanner {
		position: relative;
    }
            
	#socialsDesktop {
		display: none;
	}

	#socialsContainer {
		position: relative;
		margin-bottom: 3em;
		margin-right: .5em;
	}

	#socialsMobile {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}

	#topHeader {
		border: 1px;
		display: flex;
		flex-direction: column;
		border-radius: 1em;
		align-items: center;
		padding: 1em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}

	#heading {
		font-size: 2.5em;
		text-align:center;
		margin-top:-0.5em;
	}

	#statement {
		text-align:center;
		margin-top: -1.5em;
	}

	#azad {
		font-size: 1.2em;
		color:brown;
		font-weight: bold;
		padding: 0 .4em 0 .4em;
	}

	.line {
		border-top: 1px solid rgb(116, 158, 220);
		min-width: 80%;
	}

	#time {
		text-align: center;
	}

	#topHeader2 {
		border: 1px;
		padding: 1em;
		display: flex;
		flex-direction: column;
		margin-top: 1em;
		border-radius: 1em;
		align-items: center;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}

	#topHeader2 p {
		text-align: center;
	}

	#links {
		margin-top: 1em;
	}

	#desktopLinks {
		display: none;
	}

	.hlist ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 0.5em;
	}

@media only screen and (min-width: 720px) {
	#socialsMobile {
		display: none;
	}

	#socialsDesktop {
		display: initial;
		position: absolute;
		right: 0.5em;
		top: 0.5em;
	}
}

@media only screen and (min-width: 1000px) {
	#socialsMobile {
		display: none;
	}

	#socialsDesktop {
		display: initial;
		position: absolute;
		right: 0.5em;
		top: 0.5em;
	}

	#links {
		display: none;
	}

	#desktopLinks {
		display: initial;
		margin-top: 1em;
	}
}
            
/*----------------------------WIKIPEDIA CARDS----------------------------------------*/

	.cards {
		width: auto;
		padding: 0.5em;
		line-height: 1.75;
		border-radius: 1em;
		border: 1px;
		margin-bottom: 1em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}

	.cardTitle {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items:center;
		gap: 0.2em;
		border: 1px solid #a3b0bf;
		border-radius: 0.625em;
		padding-left: 0.5em;
		margin-bottom: 0.5em;
	}
	
	.mw-heading3 {
		color: white;
	}

	.potdCard {
		width: auto;
		padding: 0.5em;
		line-height: 1.75;
		border:1px;
		border-radius:10px;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}

	#cardHeader {
		margin-top: 1em;
	}

	#essayTitle {
		background-color:#06671c;
	}

	#history .cardTitle  {
		background-color: #2a54a9;
	}

	#doyouknow .cardTitle {
		background-color: #714ea7;
	}

	#news .cardTitle {
		background-color: #814c1a;
	}

	#potd .cardTitle {
		background-color: #6d5153;
	}
	
	#otherlang .cardTitle {
		background-color: #b0142c;
	}

	#otherproject .cardTitle {
		background-color: #753900;
	}

	#otherlang, #otherproject {
		border: 1px;
		border-radius: 1em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
		margin-top:1em;
		padding:0.5em;
	}

@media only screen and (min-width: 720px) {
	#cardHeader{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
		width: auto;
	}

	#doyouknow, #news {
		margin-top:-1em;
	}
}

/* forced night mode */
@media screen {
	html.skin-theme-clientpref-night #topHeader,
	html.skin-theme-clientpref-night #topHeader2,
	html.skin-theme-clientpref-night .cards,
	html.skin-theme-clientpref-night .potdCard,
	html.skin-theme-clientpref-night #otherlang,
	html.skin-theme-clientpref-night #otherproject  {
		box-shadow:none;
		border:1px solid;
  }
}

/* automatic mode */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os #topHeader,
	html.skin-theme-clientpref-os #topHeader2,
	html.skin-theme-clientpref-os .cards,
	html.skin-theme-clientpref-os .potdCard,
	html.skin-theme-clientpref-os #otherlang,
	html.skin-theme-clientpref-os #otherproject {
		box-shadow:none;
		border:1px solid;
	}
}