How to apply CSS styling to modularized shiny code in Pagepiling - css

Question

I am trying to stylize my UI in a shiny app that I am making. I had previously built a fairly comprehensive map that I now have to modularize to improve readability by setting the map background as a transparent layer. Unfortunately, I cannot seem to understand how to go about applying CSS styles while using modules.
mapUI <- function(id) {
ns <- NS(id)
leafletOutput(ns("map"),width =250 , height = 250))
}
basin <- rgdal::readOGR("data/basin.kml", "basin")
ui <- pagePiling(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "style.css")),
sections.color = c('#f2f2f2', '#2C3E50', '#39C'),
opts = options,
menu = c("Start" = "start",
"Station 1" = "station1",
"Station 2" = "station2"
),
pageSectionImage(
center = TRUE,
img = "image1.jpg",
menu = "start",
mapUI("map1")
),
pageSectionImage(
center = TRUE,
img ="image2.jpg",
menu = "station1",
mapUI("map2")
),
pageSectionImage(
center = TRUE,
img ="image3.jpg",
menu = "station2",
mapUI("map3")
)
)
server <- function(input, output){
mapServer <- function(id) {
moduleServer(
id,
function(input, output, session) {
output$map<-renderLeaflet({
leaflet(options = leafletOptions(zoomControl = FALSE, minZoom = 5, maxZoom = 5))%>%
addPolygons(data = basin,color = "white",weight = 2,opacity = 1,fillOpacity = 0.9 )
})
})
}
mapServer("map1")
mapServer("map2")
}
here is the style.css that doesn't work for me!
#bottommap-map{
background: rgba(0,0,0,0.05);
}