Hello, I made a search component, but I am not satisfied with the design. Could you tell me how to change the color of the white part which shows the search results?

My code:

COMPONENT:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="MediathekSearchController">
 
    <!-- handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
 
    <!-- attributes -->
    <aura:attribute name="showSearchResults" type="Boolean" default="false"/>
    <aura:attribute name="searchKey" type="String"/>
    <aura:attribute name="mediathekList" type="List" default="Mediathek[]"/>
    <aura:attribute name="mediathekColumns" type="List"/>
    
 
    <lightning:layout multipleRows="true">
        <lightning:layoutItem padding="around-small" size="9">
            <lightning:input name="searchKey" placeholder="Enter search key" value="{!v.searchKey}"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small" size="3">
            <lightning:button variant="brand" label="Search" title="Search" onclick="{!c.search}" class="customButton"/>
        </lightning:layoutItem>
    </lightning:layout>
 
    <aura:if isTrue="{!v.showSearchResults}">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                Mediathek
                <lightning:datatable keyField="id"
                                     data="{!v.mediathekList}"
                                     columns="{!v.mediathekColumns}"
                                     hideCheckboxColumn="true"/>
            </lightning:layoutItem>
            
        </lightning:layout>
    </aura:if>
 
</aura:component>

Style:
.THIS .customButton{
    margin-top: 19px;
    background-color: #ffffff;
    color: blue
}

.cMediathekSuchleiste{
 height: 50px;
 background-color:#003781;
}