ਵਰਤੋਂਕਾਰ:Kuldeepburjbhalaike/ਕੱਚਾ ਖ਼ਾਕਾ/styles.css

/* Header */
	.header {
		text-align: center;
		padding: 0.5em;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		border: 1px;
		border-radius: 1em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}

	.imgDiv {
		display: none;
	}

	.heading {
		font-size: 1.5em;
	}

	.heading span {
		color: #5090c0;
		font-size: 2em;
	}

	.subHeading {
		margin: .3em 0;
	}

	.subHeading span {
		font-weight: bold;
		margin: 0 .3em;
	}

	.line {
		border-bottom: 1px solid #5090c0;
		width: 80%;
		margin: auto;
	}

	.stats {
		margin: .5em;
	}

	.socialmedia {
		margin-bottom: 0.5em;
	}

	.headerLinks {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 1.5em;
	}

	.headerLinks a {
		padding: .3em .5em;
		border-radius: 0.5em;
		background-color: #5090c0;
		color: white;
		text-decoration: none;
	}

	.headerLinks a:hover {
		background-color: #20435d;
	}

/* Cards */
	.cards-container {
		display: grid;
		gap: 1em;
		grid-template-rows: auto;
		margin-top: 1em;
	}
	
	.col1, .col2 {
		display: grid;
		gap: 1em;
		grid-template-rows: auto;
	}

	.card {
		border: 1px;
		border-radius: 1em;
		padding: 0.5em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}

	.cardTitle {
		background-color: #5090c0;
		padding-left: 0.5em;
		border: 1px;
		border-radius: 0.625em;
	}

	.mw-heading3 {
		padding: 0.2em 0;
		color: white;
	}
	
	.more {
		text-align: center;
		margin: 1em;
	}

	.more a {
		padding: .3em;
		border-radius: 0.5em;
		background-color: #5090c0;
		color: white;
		text-decoration: none;
	}

	.more a:hover {
		background-color: #20435d;
}

/* Featured */
	.featured {
		border: 1px;
		border-radius: 1em;
		padding: 0.5em;
		margin-top: 1em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}
	
	.cardContent {
		padding: 0.5em;
	}

/* explore */
	#exploreDesktop {
		display: none;
	}

	#exploreLists {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
    }

	#exploreLists div {
		text-align: center;
	}

	.list {
		text-align: initial;
	}

/* Sister Projects */
	.sisterProjects {
		border: 1px;
		border-radius: 1em;
		padding: 0.5em;
		margin-top: 1em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}

	#projectContainer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}

	.project {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
/* desktop styles */
@media only screen and (min-width:700px) {
/* Header */
	.header {
		flex-direction: row;
		padding: 1em;
		justify-content: space-between;
	}

	.imgDiv {
		display: initial;
	}

	.imgDiv img {
		object-fit: cover;
		width: 150px;
		border-radius: 0.625em;
	}

	.textDiv {
		display: flex;
		flex-direction:column;
	}

	.socialmedia {
		margin-bottom: 0;
	}

	.headerLinks {
		margin-right: 2em;
		flex-direction: column;
	}

/* Cards */
	.cards-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.card {
		border: none;
		box-shadow: none;
		padding: 1em;
	}
	
	.mw-heading3 {
		padding: 0.4em 0;
	}

	.col1, .col2 {
		border: 1px;
		border-radius: 0.625em;
		box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;
	}


/* Featured */
	.featured {
		padding: 1em;
	}
	
/* explore */
	#exploreDesktop {
		display:initial;
	}
	
	#exploreMobile {
		display:none;
	}

/* Sister Projects*/
	.sisterProjects {
		padding: 1em;
	}

	#projectContainer {
		grid-template-columns: repeat(6, 1fr);
	}
}