ਫਰਮਾ:Main Page/styles.css

            /*--------------------------------------------------------------WIKIPEDIA TOP BANNER--------------------------------------------------------------*/
            
            #topBanner {
            	position: relative;
            }
            
            #socialsDesktop {
            	display: none;
            }
            
            #socialsMobile {
            	margin-bottom: 1rem;	
            }
            
            #topHeader {
            	border: 1px solid rgb(116, 158, 220);
                display: flex;
                flex-direction: column;
                border-radius: 10px;
                align-items: center;
                padding: 1rem;
            }
            
            #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 solid rgb(116, 158, 220);
                padding: 1rem;
                display: flex;
                flex-direction: column;
                margin-top: 1rem;
                border-radius: 10px;
                align-items: center;
                
            }
            
            #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: 650px) {
            	
            	#socialsMobile {
            		display: none;
            	}
            	
                #socialsDesktop {
                	display: initial;
            		position: absolute;
            	    right: 0.5rem;
            	    top: 0.5rem;
            	}
            	
            	.mobileList {
    				display: none;
    			}
    	
    			#desktopStyle {
    				display: block;
    			}
    	
    			#cardHeader{
				  	display: grid;
				  	grid-template-columns: 1fr 1fr;
				  	gap: 1rem;
				  	max-width: 800px;
				}
				
				#socialsMobile {
            		display: none;
            	}
            	
            	#socialsDesktop {
            		display: initial;
            		position: absolute;
            	    right: 0.5rem;
            	    top: 0.5rem;
            	}
            	
            	.containers {
            		background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg");
                    background-color: rgba(206, 221, 216, 0.43);
                    background-position: right;
                	background-repeat: no-repeat;
            	}
            	
            	#topHeader {
            		border: none;
            	}
            	
            	#topHeader2 {
            		border: none;
            	}
            	
                #links {
                	display: none;
                }
                
                #desktopLinks {
                	display: initial;
                	margin-top: 1rem;
                }
            }
            
/*---------------------------------------------------------------------------WIKIPEDIA CARDS-------------------------------------------------------------------*/
            

.cards {
	padding: 0.5rem;
	line-height: 1.75;
	border-radius: 10px;
	background-color: #f9f9ff;
    box-shadow: 3px 10px 20px -3px rgba(0,0,0,0.35);
    margin-bottom: 1rem;
}

#essayTitle {
	background-color:#cef2e0;
}

#history div  {
	background-color: #a6d4ff;
}

#doyouknow div {
	background-color: #ffe0cc;
}

#news div {
	background-color: #f2e6ff;
}

#potd div {
	background-color: #ffd9e6;
}

.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;
}

.title h3 {
	margin: 0;
	text-align: left;
	font-weight:bold;
	padding-top: 0;
}


/*-------------------------------------------------------------------LIST-----------------------------------------------------------------------------------*/
#desktopStyle {
    		display: none;
    	}

.mobileList {
				position: relative;
                background-color: #f8f9fa;
                border-radius: 5px;
                padding: 10px;
                transition: max-height 0.3s ease;
                max-height: 25px;
                overflow: hidden;
				margin-bottom: 0.5rem;
				border: 1px dotted #a7d7f9;
            }

            .mobileList p {
                text-align: center;
                font-size: larger;
                margin-top: 0;
                color:#3366cc;
                text-decoration: underline;
                display: flex;
                flex-flow: row-reverse;
                justify-content: space-between;
            }

    .mobileList:hover {
      max-height: 200px;
    }

    .mobileList h1 {
      margin: 0;
    }

    .mobileList ul {
      padding-left: 20px;
    }