* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

img {
    max-width: 100%;/*limits the image to 100% of its parent's width */
}

body {
    background-color: burlywood;
    padding: 16px;
}

    h1 {
        margin-bottom: 32px;
    }

    #article-set, #dem1 {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        gap: 16px;
    }

        #article-set > article {
            border: 2px solid maroon;
            flex: 1 0 40%;
            min-height: 200px;
        }

            #article-set article:nth-child(1) {
                flex: 1 0 100%;
                padding: 16px;
            }

        #dem1 > div {
            border: 2px solid purple;
            flex: 1 0 30%;
            min-height: 160px;
        }

        h2 {
            margin-bottom: 12px;
            
        }

        button {
            margin: 20px auto;
            display: block;
            padding: 8px;
            background-color: transparent;
        }

            button:hover {
                cursor: pointer
            }

        #button1c {
            position: relative;
            border: 2px solid brown;
            width: 75px;
            height: 75px;
            overflow: hidden;
        }

            .menu1cClosed .b1c1, .menu1cClosed .b1c2, .menu1cClosed .b1c3 {
                width: 50px;
                height: 10px;
                background-color: brown;
                position: absolute;
            }

            .b1c1, .b1c2, .b1c3 {
                transition: all .8s linear;
            }

                .menu1cClosed .b1c1 {
                    left: 10px; top: 10px;
                }

                .menu1cClosed .b1c2 {
                    left: 10px; top: 30px;
                }

                .menu1cClosed .b1c3 {
                    left: 10px; top: 50px;
                }

            .menu1cOpened .b1c1, .menu1cOpened .b1c2, .menu1cOpened .b1c3 {
                width: 50px;
                height: 10px;
                background-color: brown;
                position: absolute;
            }
    
                .menu1cOpened .b1c1 {
                    left: 10px; top: 30px;
                    transform: rotate(225deg);
                }
    
                .menu1cOpened .b1c2 {
                    left: 100px;
                    top: 30px;
                }
    
                .menu1cOpened .b1c3 {
                    left: 10px; top: 30px;
                    transform: rotate(-225deg);
                }

        #dem2 > div {
            flex: 1 0 30%;
            min-height: 160px;
        }

            #button2 {
                position: relative;
                border: 2px solid brown;
                width: 75px;
                height: 75px;
                margin-top: 40px;
                overflow: hidden;
            }

                .menu2Closed .b2d1, .menu2Closed .b2d2, .menu2Closed .b2d3 {
                    width: 50px;
                    height: 10px;
                    background-color: brown;
                    position: absolute;
                }

                .b2d1, .b2d2, .b2d3 {
                    transition: all .5s linear;
                }

                    .menu2Closed .b2d1 {
                        left: 10px; top: 10px;
                    }

                    .menu2Closed .b2d2 {
                        left: 10px; top: 30px;
                    }

                    .menu2Closed .b2d3 {
                        left: 10px; top: 50px;
                    }

                .menu2Opened .b2d1, .menu2Opened .b2d2, .menu2Opened .b2d3 {
                    width: 50px;
                    height: 5px;
                    background-color: brown;
                    position: absolute;
                }
        
                    .menu2Opened .b2d1 {
                        left: -5px;
                        
                        transform: rotate(90deg);
                    }
        
                    .menu2Opened .b2d2 {
                        left: 10px;
                        transform: rotate(90deg);
                    }
        
                    .menu2Opened .b2d3 {
                        left: 25px;
                        transform: rotate(90deg);
                    }

        #dem3 > div {
            flex: 1 0 30%;
            min-height: 160px;
        }

            #button3 {
                position: relative;
                border: 2px solid brown;
                width: 75px;
                height: 75px;
                margin-top: 40px;
                overflow: hidden;
            }

                #button3 {
                    margin: 20px auto;
                    display: block;
                    padding: 8px;
                    background-color: blanchedalmond;
                }

        #dem4 > div {
            flex: 1 0 30%;
            min-height: 160px;
        }
        
            #button4 {
                position: relative;
                border: 2px solid brown;
                width: 75px;
                height: 75px;
                margin-top: 40px;
                overflow: hidden;
            }

                .menu4Closed img {
                    display: none;
                }

                .menu4Closed .b4d1, .menu4Closed .b4d2, .menu4Closed .b4d3 {
                    width: 50px;
                    height: 10px;
                    background-color: brown;
                    position: absolute;
                }

                .b4d1, .b4d2, .b4d3 {
                    transition: all .8s linear;
                }

                    .menu4Closed .b4d1 {
                        left: 10px; top: 10px;
                    }

                    .menu4Closed .b4d2 {
                        left: 10px; top: 30px;
                    }

                    .menu4Closed .b4d3 {
                        left: 10px; top: 50px;
                    }

                

        .menu4Opened .b4d1, .menu4Opened .b4d2, .menu4Opened .b4d3 {
            width: 50px;
            height: 5px;
            background-color: brown;
            position: absolute;
        }
        
            .menu4Opened .b4d1 {
                top: -100px;
                       
            }
        
            .menu4Opened .b4d2 {
                top: -100px;
            }
        
            .menu4Opened .b4d3 {
                top: -100px;
            }

                #dem4 > div {
                    flex: 1 0 30%;
                    min-height: 160px;
                }
                    
                #button4 {
                            position: relative;
                            border: 2px solid brown;
                            width: 75px;
                            height: 75px;
                            margin-top: 40px;
                            overflow: hidden;
                        }
            
                            .menu4Closed img {
                                display: none;
                            }
            
                            .menu4Closed .b4d1, .menu4Closed .b4d2, .menu4Closed .b4d3 {
                                width: 50px;
                                height: 10px;
                                background-color: brown;
                                position: absolute;
                            }
            
                            .b4d1, .b4d2, .b4d3 {
                                transition: all .8s linear;
                            }
            
                                .menu4Closed .b4d1 {
                                    left: 10px; top: 10px;
                                }
            
                                .menu4Closed .b4d2 {
                                    left: 10px; top: 30px;
                                }
            
                                .menu4Closed .b4d3 {
                                    left: 10px; top: 50px;
                                }
            
                            
            
                            .menu4Opened .b4d1, .menu4Opened .b4d2, .menu4Opened .b4d3 {
                                width: 50px;
                                height: 5px;
                                background-color: brown;
                                position: absolute;
                            }
                    
                                .menu4Opened .b4d1 {
                                    top: -100px;
                                   
                                }
                    
                                .menu4Opened .b4d2 {
                                    top: -100px;
                                }
                    
                                .menu4Opened .b4d3 {
                                    top: -100px;
                                }
                #dem5 > div {
                    flex: 1 0 30%;
                    min-height: 160px;
                }

                    #button5 {
                        position: relative;
                        border: 2px solid brown;
                        width: 75px;
                        height: 75px;
                        margin-top: 40px;
                        overflow: hidden;
                        display: block;
                        padding: 8px;
                        background-color: blanchedalmond;
                    }

                        .b5d1, .b5d2, .b5d3, .b5d4, .b5d5, .b5d6 {
                            transition: all .8s linear;
                        }

                        .menu5Closed img {
                            display: none;
                            transition: all.8s linear;
                        }
                    
                            .menu5Closed .b5d1 {
                                width: 50px;
                                height: 10px;
                                left: 10px; top: 10px;
                                background-color: tan;
                                position: absolute;
                                border-radius: 30%;
                                transition: all 1.5s linear;
                            }

                            .menu5Closed .b5d2 {
                                left: 10px; top: 30px;
                                width: 45px;
                                height: 8px;
                                margin: -10px 3px;
                                background-color: red;
                                position: absolute;
                                border-radius: 30%;
                                transition: all 1.2s linear;
                            }

                            .menu5Closed .b5d3 {
                                left: 8px; top: 40px;
                                width: 55px;
                                height: 5px;
                                margin: -12px 0px;
                                background-color: limegreen;
                                position: absolute;
                                border-radius: 15%;
                                transition: all 1s linear;
                            }

                            .menu5Closed .b5d4 {
                                left: 10px; top: 50px;
                                width: 45px;
                                height: 5px;
                                margin: -18px 3px;
                                background-color: orange;
                                position: absolute;
                                border-radius: 90%;
                                transition: all .8s linear;
                            }

                            .menu5Closed .b5d5 {
                                left: 10px; top: 55px;
                                width: 45px;
                                height: 8px;
                                margin: -18px 3px;
                                background-color: brown;
                                position: absolute;
                                border-radius: 30%;
                                transition: all .5s linear;
                            }

                            .menu5Closed .b5d6 {
                                width: 50px;
                                height: 10px;
                                left: 10px; top: 45px;
                                background-color: tan;
                                position: absolute;
                                border-radius: 25%;
                                transition: all .3s linear;
                            }
            
                        .menu5Opened .b5d1, .menu5Opened .b5d2, .menu5Opened .b5d3 {
                            width: 50px;
                            height: 5px;
                            background-color: brown;
                            position: absolute;
                        }
                    
                            .menu5Opened .b5d1 {
                                top: -100px;
                                transition: .8s linear
                                   
                            }
                    
                            .menu5Opened .b5d2 {
                                top: -100px;
                            }
                    
                            .menu5Opened .b5d3 {
                                top: -100px;
                            }

                            .menu5Opened .b5d4 {
                                top: -100px;
                               
                                   
                            }
                    
                            .menu5Opened .b5d5 {
                                top: -100px;
                                
                            }
                    
                            .menu5Opened .b5d6 {
                                top: -100px;
                                
                            }