Template:MainPage/Portal/styles.css

.snca-portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 60px;
    border-radius: 5px;
    padding: 0 5px;
    margin: 1px; /* Reduced from 5px to pack them tighter */
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-decoration: none !important;
    /* This creates the inner border that is slightly darker than the background + a heckin' aesthetic skeuomorphic shine */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px rgba(255,255,255,0.3),
	inset 0 10px rgba(255,255,255,0.2),
	inset 0 10px 20px rgba(255,255,255,0.25),
	inset 0 -15px 30px rgba(0,0,0,0.3);
}

/* Hover effects */
.snca-portal-btn:hover {
    transform: scale(1.08);
    /* Keeps the effects, but adds an outer drop-shadow on hover */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 5px 5px 10px rgba(0,0,0,0.25),
    inset 0 1px rgba(255,255,255,0.3),
	inset 0 10px rgba(255,255,255,0.2),
	inset 0 10px 20px rgba(255,255,255,0.25),
	inset 0 -15px 30px rgba(0,0,0,0.3);
}

.snca-portal-img {
    margin-right: 3px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2; /* Ensures image stays above the background */
}

.snca-portal-text {
    font-size: 15pt;
    line-height: 1.1em;
    position: relative;
    z-index: 2; /* Ensures text stays above the background */
}

.snca-portal-text a {
    text-decoration: none !important;
}