MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

.icon-box {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 0.5rem; /* Rounded-lg */
            padding: 2rem; /* p-4 */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            
        }
        
        .icon-box i {
            font-size: 3rem; /* text-3xl */
            margin-bottom: 0.5rem; /* mb-2 */
        }
        
        .people i {
        	background-image: url("People.png");
        	height: 150px;
		    width: 500px;
		    background-size: 20%;
		    background-repeat: no-repeat;
		    background-position: center;
        }
        
        .books i {
        	background-image: url("images/books.png");
        	height: 150px;
		    width: 500px;
		    background-size: 20%;
		    background-repeat: no-repeat;
		    background-position: center;
        }
        
        .video i {
        	background-image: url("images/videos.png");
        	height: 150px;
		    width: 500px;
		    background-size: 20%;
		    background-repeat: no-repeat;
		    background-position: center;
        }
        
        .conferences i {
        	background-image: url("images/conferences.png");
        	height: 150px;
		    width: 500px;
		    background-size: 20%;
		    background-repeat: no-repeat;
		    background-position: center;
        }
        
        .journal i {
        	background-image: url("images/articles.png");
        	height: 150px;
		    width: 500px;
		    background-size: 20%;
		    background-repeat: no-repeat;
		    background-position: center;
        }
        
        .events i {
        	background-image: url("images/theories.png");
        	height: 150px;
		    width: 500px;
		    background-size: 20%;
		    background-repeat: no-repeat;
		    background-position: center;
        }
        
        .icon-box pre {
        	padding: 3em !important;
        	background-size: auto 100%;
        	background-repeat: no-repeat;
        	background-position: center top;
        	background-color: rgba(0, 0, 0, 0);
        	border: none;
        	object-fit: contain !important;
        	max-width: 100%;
        	max-height: 100%;
        }
        
        .icon-box p {
            margin-top: 0.5rem; /* mt-2 */
            font-size: 1.125rem; /* text-lg */
            font-weight: 700; /* font-semibold */
        }
        
        .text-white {
            color: white;
        }
        
        .text-gray-600 {
            color: #4B5563;
        }
        
        .bg-red-500 {
            background-color: #EF4444;
        }
        
        .bg-orange-400 {
            background-color: #F97316;
        }
        
        .bg-gray-300 {
            background-color: #D1D5DB;
        }
        
        .bg-purple-500 {
            background-color: #A855F7;
        }
        
        .bg-blue-400 {
            background-color: #60A5FA;
        }
        
        /* Responsive grid */
        @media (min-width: 640px) {
            .grid-cols-3 pre {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1rem; /* gap-4 */
            }
        }