ਫਰਮਾ:Main Page/styles.css

/*--------------------------------------WIKIPEDIA TOP BANNER----------------------------------------*/
            
            #topBanner {
            	position: relative;
            }
            
            #socialsDesktop {
            	display: none;
            }
            
            #socialsContainer {
            	position: relative;
				margin-bottom: 3rem;
				margin-right: .5rem;
            }
            
            #socialsMobile {
            	position: absolute;
				top: 0;
				right: 0;
                z-index: 1;
            }
            
            #topHeader {
            	border: 1px;
                display: flex;
                flex-direction: column;
                border-radius: 10px;
                align-items: center;
                padding: 1rem;
                box-shadow: 0 5px 20px #ddd, 0 0 1px #ccc;

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

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

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

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

            #links {
                margin-top: 1rem;
            }
            
            #desktopLinks {
            	display: none;
            }
            
            .hlist ul {
            	display: flex;
            	flex-direction: row;
            	justify-content: center;
            	gap: 0.5rem;
            }
            
            @media only screen and (min-width: 720px) {
            	
            	#socialsMobile {
            		display: none;
            	}
            	
                #socialsDesktop {
                	display: initial;
            		position: absolute;
            	    right: 0.5rem;
            	    top: 0.5rem;
            	}
            }

            @media only screen and (min-width: 1000px) {
            	
            	#socialsMobile {
            		display: none;
            	}
            	
            	#socialsDesktop {
            		display: initial;
            		position: absolute;
            	    right: 0.5rem;
            	    top: 0.5rem;
            	}
            	
                #links {
                	display: none;
                }
                
                #desktopLinks {
                	display: initial;
                	margin-top: 1rem;
                }
            }
            
/*----------------------------WIKIPEDIA CARDS----------------------------------------*/

.cards {
	width: auto;
	padding: 0.5rem;
	line-height: 1.75;
	border-radius: 10px;
	border: 1px;
    margin-bottom: 1rem;
	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.2rem;
	border: 1px solid #a3b0bf;
	border-radius: 10px;
	padding-left: 0.5rem;
	margin-bottom: 0.5rem;
}

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

#cardHeader {
margin-top: 1rem;
}

#essayTitle {
	background-color:#cef2e0;
}

#history .cardTitle  {
	background-color: #a6d4ff;
}

#doyouknow .cardTitle {
	background-color: #ffe0cc;
}

#news .cardTitle {
	background-color: #f2e6ff;
}

#potd .cardTitle {
	background-color: #fbbbbf;
}
#otherlang .cardTitle {
	background-color: #ddcef2;
}

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

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

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

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