*{
    padding: 0;
    margin: 0;
}

.main_intro{

    text-align: center;
    padding: 20px;
    font-size: 2.5em;
    background-color: #2c2b2b;
    color: #fff;
}

.nav_bar{
    display: flex;
    justify-content: space-around;
    font-size: 2em;
    word-spacing: 3px;
    padding: 20px;
    background-color: #2c2b2b;
    /* background: aqua; */
}

.nav_bar a{
    text-decoration: none;
}


#button_A{

    border: 4px solid hsl(0, 0%, 30%);
    border-radius: 30px;
    width: 180px;
    height: 40px;
    text-align: center;
    background-color: rgb(228, 228, 228);
    color: rgb(90, 88, 88);

}

#button_B{

    border: 4px solid hsl(0, 0%, 30%);
    border-radius: 30px;
    width: 180px;
    height: 40px;
    text-align: center;
    background-color: rgb(228, 228, 228);
    color: rgb(90, 88, 88);

}

#button_C{

    border: 4px solid hsl(0, 0%, 30%);
    border-radius: 30px;
    width: 180px;
    height: 40px;
    text-align: center;
    background-color: rgb(228, 228, 228);
    color: rgb(90, 88, 88);



}

#button_D{

    border: 4px solid hsl(0, 0%, 30%);
    border-radius: 30px;
    width: 180px;
    height: 40px;
    text-align: center;
    background-color: rgb(228, 228, 228);
    color: rgb(90, 88, 88);

}

.menu{
    text-align: center;
    padding: 30px;
    background-color: #2c2b2b;
    color: #fff;
}

.products{

    display: flex;
    justify-content: flex-start;
    flex-flow: column wrap;
    height: fit-content;
    background-color: #2c2b2b;
}

.sub_products{
    width: 550px;
    height: 250px;
    background: lightblue;
    margin: 20px;
    text-align: center;
    font-size: 1.4em;
    border: 5px solid peachpuff;
    border-radius: 50px;

}

#button_A:hover{
    
    background-color: rgb(255, 255, 255);
    color: black;
}
#button_B:hover{
    
    background-color: rgb(255, 255, 255);
    color: black;

}
#button_C:hover{
    
    background-color: rgb(255, 255, 255);
    color: black;
}
#button_D:hover{
    
    background-color: rgb(255, 255, 255);
    color: black;
}

.footer{

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(190, 190, 196);
    height: 100px;
    font-size: 2em;

}

/* Controls the resize of the screen*/
@media screen and (max-width:500px) { 
    
    .products{
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        height: fit-content;
    }
    .sub_products{
        height: 250px;
        width: 250px;
    }
    #button_A{
        margin: 10px;
        padding: 10px;
        background-color: transparent;
        border: none;
    }
    #button_B{
        margin: 10px;
        padding: 10px;
        background-color: transparent;
        border: none;
    }
    #button_C{
        margin: 10px;
        padding: 10px;
        background-color: transparent;
        border: none;
    }
    #button_D{
        margin: 10px;
        padding: 10px;
        background-color: transparent;
        border: none;
    }
}